开发文章

仿ofo首页眼睛跟随加速器移动效果

仿ofo首页眼睛跟随加速器移动效果

在最新版的ofo安卓客户端中,发现首页增加了一个好玩的动画效果,就是小黄人的眼睛会跟随用户的手机移动而移动,看起来蛮好玩的。下面来看下效果图吧:

 

总体上来说,功能基本上和官方的一模一样。遗留的细节问题:需要对不同分辨率的屏幕进行完美适配即可。

实现思路:

第一眼看到这个效果,比较疑惑的是这样的效果在安卓中是如何布局的呢,后来经过反编译下ofo的apk,发现是图层叠加的,然后进行了dimens适配而已,确认了这个,下面实现就是比较方便的了。

布局文件,以及图片资源

图片资源.png

复制内容到剪贴板
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content">  
  5.   
  6.     <FrameLayout  
  7.         android:layout_centerHorizontal="true"  
  8.         android:layout_alignParentBottom="true"  
  9.         android:layout_width="wrap_content"  
  10.         android:background="@drawable/minions_btn_scan"  
  11.         android:layout_height="wrap_content">  
  12.   
  13.         <ImageView  
  14.             android:id="@+id/lefteye"  
  15.             android:layout_gravity="left"  
  16.             android:layout_marginLeft="@dimen/dimen62"  
  17.             android:layout_marginTop="@dimen/dimen65"  
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:src="@drawable/nes" />  
  21.   
  22.         <ImageView  
  23.             android:id="@+id/righteye"  
  24.             android:layout_gravity="right"  
  25.             android:layout_marginRight="@dimen/dimen42"  
  26.             android:layout_marginTop="@dimen/dimen65"  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:src="@drawable/nes" />  
  30.   
  31.         <ImageView  
  32.             android:layout_width="wrap_content"  
  33.             android:layout_height="wrap_content"  
  34.             android:src="@drawable/minions_btn_scan_see"/>  
  35.   
  36.     </FrameLayout>  
  37.   
  38. </RelativeLayout>  

布局文件灰常简单,就是利用了dimens进行了眼睛的定位,然后后期进行适配即可,然后看代码:

复制内容到剪贴板
  1. package com.ofo_eye;  
  2.   
  3. import android.content.Context;  
  4. import android.hardware.Sensor;  
  5. import android.hardware.SensorEvent;  
  6. import android.hardware.SensorEventListener;  
  7. import android.hardware.SensorManager;  
  8. import android.support.v7.app.AppCompatActivity;  
  9. import android.os.Bundle;  
  10. import android.view.View;  
  11.   
  12. public class MainActivity extends AppCompatActivity {  
  13.   
  14.     public static final String TAG = MainActivity.class.getSimpleName();  
  15.   
  16.     private SensorManager sensorManager;  
  17.     private Sensor defaultSensor;  
  18.   
  19.     private View lefteye,righteye;  
  20.     private float normalSpace ;  
  21.   
  22.     @Override  
  23.     protected void onCreate(Bundle savedInstanceState) {  
  24.         super.onCreate(savedInstanceState);  
  25.   
  26.         setContentView(R.layout.activity_main);  
  27.   
  28.         lefteye = findViewById(R.id.lefteye);  
  29.         righteye = findViewById(R.id.righteye);  
  30.   
  31.         normalSpace = getResources().getDimension(R.dimen.dimen20);  
  32.   
  33.         sensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);  
  34.         defaultSensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);  
  35.   
  36.         //完美做法,需要对dimens进行不同屏幕的适配即可  
  37.   
  38.        /* 
  39.         传感器类型说明如下: 
  40.         #define SENSOR_TYPE_ACCELEROMETER 1 //加速度 
  41.         #define SENSOR_TYPE_MAGNETIC_FIELD 2 //磁力 
  42.         #define SENSOR_TYPE_ORIENTATION 3 //方向 
  43.         #define SENSOR_TYPE_GYROSCOPE 4 //陀螺仪 
  44.         #define SENSOR_TYPE_LIGHT 5 //光线感应 
  45.         #define SENSOR_TYPE_PRESSURE 6 //压力 
  46.         #define SENSOR_TYPE_TEMPERATURE 7 //温度 
  47.         #define SENSOR_TYPE_PROXIMITY 8 //接近 
  48.         #define SENSOR_TYPE_GRAVITY 9 //重力 
  49.         #define SENSOR_TYPE_LINEAR_ACCELERATION 10//线性加速度 
  50.         #define SENSOR_TYPE_ROTATION_VECTOR 11//旋转矢量 
  51.         */  
  52.     }  
  53.   
  54.     @Override  
  55.     protected void onResume() {  
  56.         super.onResume();  
  57.         sensorManager.registerListener(listerner, defaultSensor, SensorManager.SENSOR_DELAY_UI);  
  58.         /* 
  59.          第三个参数如下: 
  60.          * get sensor data as fast as possible 
  61.          public static final int SENSOR_DELAY_FASTEST = 0; 
  62.          * rate suitable for games 
  63.          public static final int SENSOR_DELAY_GAME = 1; 
  64.          * rate suitable for the user interface 
  65.          public static final int SENSOR_DELAY_UI = 2; 
  66.          * rate (default) suitable for screen orientation changes 
  67.          public static final int SENSOR_DELAY_NORMAL = 3; 
  68.          */  
  69.     }  
  70.   
  71.     @Override  
  72.     protected void onPause() {  
  73.         super.onPause();  
  74.         sensorManager.unregisterListener(listerner);  
  75.     }  
  76.   
  77.     private SensorEventListener listerner = new SensorEventListener(){  
  78.   
  79.         private float x,y;  
  80.   
  81.         @Override  
  82.         public void onSensorChanged(SensorEvent event) {  
  83.   
  84.             /* 
  85.             加速度传感器说明: 
  86.             加速度传感器又叫G-sensor,返回x、y、z三轴的加速度数值。 
  87.             该数值包含地心引力的影响,单位是m/s^2。 
  88.             将手机平放在桌面上,x轴默认为0,y轴默认0,z轴默认9.81。 
  89.             将手机朝下放在桌面上,z轴为-9.81。 
  90.             将手机向左倾斜,x轴为正值。 
  91.             将手机向右倾斜,x轴为负值。 
  92.             将手机向上倾斜,y轴为负值。 
  93.             将手机向下倾斜,y轴为正值。 
  94.             加速度传感器可能是最为成熟的一种mems产品,市场上的加速度传感器种类很多。 
  95.             手机中常用的加速度传感器有BOSCH(博世)的BMA系列,AMK的897X系列,ST的LIS3X系列等。 
  96.             这些传感器一般提供±2G至±16G的加速度测量范围,采用I2C或SPI接口和MCU相连,数据精度小于16bit。 
  97.             */  
  98.   
  99.             if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER){  
  100.   
  101.                 x -= 7.0f * event.values[0];  
  102.                 y += 7.0f * event.values[1];  
  103.   
  104.                 //越界处理  
  105.                 if(x < -normalSpace ){  
  106.                     x = -normalSpace;  
  107.                 }  
  108.                 if(x > 0){  
  109.                     x = 0;  
  110.                 }  
  111.                 if(y > 0){  
  112.                     y = 0;  
  113.                 }  
  114.                 if(y < -normalSpace){  
  115.                     y = -normalSpace;  
  116.                 }  
  117.   
  118.                 lefteye.setTranslationY(y);  
  119.                 lefteye.setTranslationX(x);  
  120.                 lefteye.setRotation(x);  
  121.                 righteye.setTranslationX(x);  
  122.                 righteye.setTranslationY(y);  
  123.                 righteye.setRotation(x);  
  124.             }  
  125.         }  
  126.   
  127.         @Override  
  128.         public void onAccuracyChanged(Sensor sensor, int accuracy) {  
  129.   
  130.         }  
  131.     };  
  132. }  

 

代码并没有很多,需要的同学可以下载github Demo体验和学习.Github 地址

https://github.com/andmizi/ofo_eye

感谢 kimiier 支持 磐实编程网 原文地址:
blog.csdn.net/qq_28268507/article/details/74528637

文章信息

发布时间:2017-07-14

作者:kimiier

发布者:aquwcw

浏览次数: