几行代码实现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
转载随意注明出处

目录
相关文章
|
供应链 安全 物联网
探寻未来科技前沿:新兴技术趋势与应用场景
当今世界正处于科技创新的黄金时代,新兴技术如区块链、物联网、虚拟现实等正日益改变着我们的生活方式和商业模式。本文将深入探讨这些新兴技术的发展趋势及其在不同领域的应用场景,为读者揭示未来科技的发展方向。
344 27
|
3天前
|
云安全 监控 安全
|
1天前
|
存储 机器学习/深度学习 人工智能
打破硬件壁垒!煎饺App:强悍AI语音工具,为何是豆包AI手机平替?
直接上干货!3000 字以上长文,细节拉满,把核心功能、使用技巧和实测结论全给大家摆明白,读完你就知道这款 “安卓机通用 AI 语音工具"——煎饺App它为何能打破硬件壁垒?它接下来,咱们就深度拆解煎饺 App—— 先给大家扒清楚它的使用逻辑,附上“操作演示”和“🚀快速上手不踩坑 : 4 条核心操作干货(必看)”,跟着走零基础也能快速上手;后续再用真实实测数据,正面硬刚煎饺 App的语音助手口令效果——创建京东「牛奶自动下单神器」口令 ,从修改口令、识别准确率到场景实用性,逐一测试不掺水,最后,再和豆包 AI 手机语音助手的普通版——豆包App对比测试下,简单地谈谈煎饺App的能力边界在哪?
|
8天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1063 5
|
10天前
|
机器学习/深度学习 人工智能 数据可视化
1秒生图!6B参数如何“以小博大”生成超真实图像?
Z-Image是6B参数开源图像生成模型,仅需16GB显存即可生成媲美百亿级模型的超真实图像,支持中英双语文本渲染与智能编辑,登顶Hugging Face趋势榜,首日下载破50万。
711 42
|
14天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
1144 41
|
14天前
|
人工智能 前端开发 算法
大厂CIO独家分享:AI如何重塑开发者未来十年
在 AI 时代,若你还在紧盯代码量、执着于全栈工程师的招聘,或者仅凭技术贡献率来评判价值,执着于业务提效的比例而忽略产研价值,你很可能已经被所谓的“常识”困住了脚步。
881 72
大厂CIO独家分享:AI如何重塑开发者未来十年
|
2天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
|
1天前
|
人工智能 JSON 前端开发
为什么你的API文档总是被吐槽?用这份"契约指令"终结前后端战争
本文针对前后端协作中"文档过时、不准确"的痛点,提供了一套实战验证的AI指令。通过强制结构化输入和自检机制,让AI自动生成包含完整参数、JSON示例和多语言代码的标准API契约文档,彻底解决接口沟通难题。
162 111

热门文章

最新文章