幾行代碼實作ofo首頁小黃人眼睛加速感應轉動

最新版的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

轉載随意注明出處