几行代码实现ofo首页小黄人眼睛加速感应转动

简介: 最新版的ofo 小黄车的首页小黄人眼睛随重力而转动,感觉有点炫酷,学习一下吧,以下代码是在xamarin android下实现 ofo首页效果图: xamarin android实现效果: 实现思路: 这个眼睛转动随加速度,使用的是FrameLayout图层叠加布局的,然后再进行dimen适配,随着加速度的变化,两个眼睛TranslationY方法进行View的移动。

最新版的ofo 小黄车的首页小黄人眼睛随重力而转动,感觉有点炫酷,学习一下吧,以下代码是在xamarin android下实现
ofo首页效果图:
这里写图片描述
xamarin android实现效果:
这里写图片描述
实现思路:
这个眼睛转动随加速度,使用的是FrameLayout图层叠加布局的,然后再进行dimen适配,随着加速度的变化,两个眼睛TranslationY方法进行View的移动。一下代码是在xamarin android下实现的,大概效果差不多,屏幕适配没弄。
素材图片:
github中自己复制吧:

先来看看MainActivity布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
    <FrameLayout
        android:layout_height="150dp"
        android:layout_width="150dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/minions_btn_scan" />
        <ImageView
            android:layout_height="@dimen/dimen18"
            android:layout_width="@dimen/dimen18"
            android:src="@drawable/nes"
            android:layout_marginTop="@dimen/dimen60"
            android:layout_marginLeft="@dimen/dimen54"
            android:layout_gravity="left"
            android:id="@+id/lefteye" />
        <ImageView
            android:layout_height="@dimen/dimen18"
            android:layout_width="@dimen/dimen18"
            android:src="@drawable/nes"
            android:layout_marginTop="@dimen/dimen60"
            android:layout_marginRight="@dimen/dimen34"
            android:layout_gravity="right"
            android:id="@+id/righteye" />
        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/minions_btn_scan_see" />
    </FrameLayout>
</RelativeLayout>

效果实现主要代码:

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Hardware;
using Android.Views;
using Android.Content;
using Android.Runtime;
using System;
namespace ofo_eye_demo
{
    [Activity(Label = "ofo_eye_demo", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity,ISensorEventListener
    {
        private SensorManager sensorManager;
        private Sensor defaultSensor;
        private View lefteye, righteye;
        private float normalSpace, x, y;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle); 
            SetContentView(Resource.Layout.Main);
            lefteye = FindViewById(Resource.Id.lefteye);
            righteye = FindViewById(Resource.Id.righteye);
            normalSpace = Resources.GetDimension(Resource.Dimension.dimen20);
            sensorManager = GetSystemService(Context.SensorService) as  SensorManager;
            defaultSensor = sensorManager.GetDefaultSensor(SensorType.Accelerometer);
            /*
                 Accelerometer = 1,//加速度
                 MagneticField = 2,//磁力
                 Orientation = 3,//方向
                 Gyroscope = 4,//陀螺仪
                 Light = 5,//光线感应
                 Pressure = 6,//压力
                 Temperature = 7,//温度
                 Proximity = 8,//接近
                Gravity = 9,//重力
                LinearAcceleration = 10,//线性加速度
                RotationVector = 11,//旋转矢量
                RelativeHumidity = 12,//湿度
                AmbientTemperature = 13,//温度
                */
        }
        protected override void OnResume()
        {
            base.OnResume();
            sensorManager.RegisterListener(this,defaultSensor,SensorDelay.Ui);
        }
        protected override void OnPause()
        {
            base.OnPause();
            sensorManager.UnregisterListener(this);
        }
        public void OnAccuracyChanged(Sensor sensor, [GeneratedEnum] SensorStatus accuracy)
        {
            //throw new NotImplementedException();
        }

        public void OnSensorChanged(SensorEvent e)
        {
            /*
          加速度传感器说明:
          加速度传感器又叫G-sensor,返回x、y、z三轴的加速度数值。
          该数值包含地心引力的影响,单位是m/s^2。
          将手机平放在桌面上,x轴默认为0,y轴默认0,z轴默认9.81。
          将手机朝下放在桌面上,z轴为-9.81。
          将手机向左倾斜,x轴为正值。
          将手机向右倾斜,x轴为负值。
          将手机向上倾斜,y轴为负值。
          将手机向下倾斜,y轴为正值。
          加速度传感器可能是最为成熟的一种mems产品,市场上的加速度传感器种类很多。
          手机中常用的加速度传感器有BOSCH(博世)的BMA系列,AMK的897X系列,ST的LIS3X系列等。
          这些传感器一般提供±2G至±16G的加速度测量范围,采用I2C或SPI接口和MCU相连,数据精度小于16bit。
        */
            if (e.Sensor.Type == SensorType.Accelerometer)
            {
                x -= 6.0f * e.Values[0];
                y += 6.0f * e.Values[1];
                //越界处理
                if (x < -normalSpace)
                {
                    x = -normalSpace;
                }
                if (x > 0)
                {
                    x = 0;
                }
                if (y > 0)
                {
                    y = 0;
                }
                if (y < -normalSpace)
                {
                    y = -normalSpace;
                }
                lefteye.TranslationY = y;
                lefteye.TranslationX = x;
                lefteye.Rotation = x;
                righteye.TranslationX = x;
                righteye.TranslationY = y;
                righteye.Rotation = x;
            }
    }
}
}

参考文章:http://blog.csdn.net/qq_28268507/article/details/74528637
代码并没有很多,下载:https://github.com/MaChuZhang/ofo-eye-demo
作者:张林
标题:几行代码实现ofo首页小黄人眼睛加速感应转动
原文地址:http://blog.csdn.net/kebi007/article/details/75035710
转载随意注明出处

目录
相关文章
|
1月前
|
物联网 大数据
墨水屏电子纸标签/电子纸价签领域如何选择无线通信方案?
很多的厂家都知道,电子标签/电子价签的全套解决方案中,无线通信方案是最核心的,选对了这个方案,整个系统就会成功一半。
|
1月前
都市天际线(游戏无法打开画面解决方案总结)
都市天际线(游戏无法打开画面解决方案总结)
111 0
|
9月前
|
存储 物联网 开发工具
开源:纯手工基于小熊派&涂鸦三明治模组快速打造一款智能宠物喂食器连载贴(一)
开源:纯手工基于小熊派&涂鸦三明治模组快速打造一款智能宠物喂食器连载贴(一)
429 0
|
9月前
|
算法 编译器
开源:智能宠物弹射喂食器连载贴之步进电机控制(二)
开源:智能宠物弹射喂食器连载贴之步进电机控制(二)
170 0
|
传感器 编解码 安全
毅力号睁开几双「眼睛」,360度全景展示它的火星新家
近日,在火星安家的「毅力号」向地球发回了一张全景图,展示了着陆点杰泽罗陨石坑周围的面貌。
154 0
毅力号睁开几双「眼睛」,360度全景展示它的火星新家
|
机器学习/深度学习 数据采集 算法
谷歌Up主自制秃头生成器张东升躺枪,而这款生发GAN让你发际线前进一公里!
最近,国产悬疑剧《隐秘的角落》火爆全网,张东升的秃头形象深入人心,B站up主利用StyleGAN自制了一款秃头生成器,只需几行代码就能完成你的秃头梦想,但是如果你想摆脱中年秃顶的危机,GAN也可以做到!
172 0
谷歌Up主自制秃头生成器张东升躺枪,而这款生发GAN让你发际线前进一公里!
|
传感器 开发工具
无人机老大发布了一款黑科技相机:能够拍到肉眼看不到的东西
无人机应用场景越来越广泛,作为无人机老大——大疆在行业专业化应用中下了不少功夫,3 月 29 号,大疆联合全球热成像技术先驱,美国菲力尔公司(FLIR SYSTEMS, Inc.)推出一款名叫:禅思 XT2 双光热成像相机的设备。
164 0
无人机老大发布了一款黑科技相机:能够拍到肉眼看不到的东西
|
机器学习/深度学习 存储 算法
借助电子标签,这款机器人能帮你找到藏在脏衣服下的钥匙!MIT研发,成功率96%
借助电子标签,这款机器人能帮你找到藏在脏衣服下的钥匙!MIT研发,成功率96%
115 0
借助电子标签,这款机器人能帮你找到藏在脏衣服下的钥匙!MIT研发,成功率96%
|
存储 人工智能 算法
如何把门禁卡做成你用不起的样子?B站up主自制迷你卡片,公司小区通刷,还带墨水屏的那种
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 这次,野生钢铁侠稚晖君带着他的硬核项目又来了。 上次自制纯手工打造AI小电视,播放量就超过300万,还登上了b站首页。
如何把门禁卡做成你用不起的样子?B站up主自制迷你卡片,公司小区通刷,还带墨水屏的那种
|
人工智能 算法 数据可视化
淘宝首页那些“辣眼睛”的图去哪了?
小叽导读:在淘宝这个平台上,消费者每天都在浏览着琳琅满目的图片,图片是消费者与商品交互的第一媒介。图片的质量会极大影响消费者的消费体验和转化效果,高质量的图片会让消费者怦然心动,流连忘返,而低质量的“辣眼睛”图片会让消费者望而却步。在淘宝首页猜你喜欢(以下简称首猜)场景下,由于图片数量太多,让人工来审核所有图片是不现实的。作为阿里技术人,我们的使命就是使用技术手段过滤掉低质量的图片,将高质量的图片和素材呈现给消费者。
3008 0
淘宝首页那些“辣眼睛”的图去哪了?