zoukankan      html  css  js  c++  java
  • 【android】移植IOS视图响应陀螺仪交互行为

    IOS有个很有趣味的特性:背景图片可以响应陀螺仪方向的变化,去改变X、Y轴上的值,从而让整个界面看着充满着灵性。具体步骤是:解锁苹果产品,在IOS7以上,摆动手势,观察桌面背景图片的变化。

    刚好,我们的产品现在遇到了一个场景:标题栏以下,占据40%空间的是一张png图片,背景是一片星空,如果不给点交互,感觉太死板了

    这时候想,如果把IOS这个特性移植到本场景中,作用对象是背景那个星空,那多美啊~

    二话不说,跪求美工大哥把png图片的前景和背景分离,拿到两张图片,开搞~

    实现之后的效果产品大哥也觉得很赞,就把这套方案共享出来了,调用很简单,一共三句:声明、注册、解注册。

    本模块工作原理:监听加速器里的陀螺仪传感器,获取其在x、y轴上的偏移数据,换算成一个垂直、水平上的位移值,赋值给视图的x、y属性。

    先来看下效果,比较渣,建议下载APK demo体验;源码地址:http://git.oschina.net/yso/IOSParallelView

    一句话讲解陀螺仪xyz方向:以portrait屏幕方向为例,手机的左下角为原点,x轴:水平方向,越右越大;y轴:垂直方向,越高越大;z轴:屏幕对着你的方向,越近越大;

    下面来说下具体的实现步骤:

    准备工作

    1:设置一个视图响应陀螺仪事件,最大移动的距离为30dp(举个例子);

    2:设置视图宽高为:原始宽高 +2倍的30dp(用于左移和右移到极限都能看到图片)

    3:把图片往屏幕的左上角扯30dp距离,(通过设置 x、y为-30dp)

    ps:因此,我们设置x、y的范围是-60dp(再往左上角扯30dp)~0dp(往右下角扯了60dp)

    接下来开始响应陀螺仪事件了

    1:将陀螺仪在x、y轴上的数据拿到,互换x、y参数位置,传递给调用方

     //为什么要互换 x,y;是因为陀螺仪在y轴上的左右倾斜数据,最终会反应在图片在水平位置上的变化;同理x轴上下倾斜反应在垂直位置上的变化
     //为调用端统一坐标,我们在这里就做了调换,调用端按照正常的坐标系使用即可

    2:调用端60dp* 拿到偏移数据*修正常量(0.02f挺好),变成在水平、垂直上的偏移量(我们规定为-30dp~30dp,总不能无限偏移吧。。)

    3:将结果减去30dp(为什么-30dp是因为我们x、y初始就是-30dp,不是0),赋值在视图的x、y属性上。

    4:没了。

    调用超级简单,贴上代码

    初始化里传入Context、要移动的视图、单向移动的最大距离;

    在onResume里面注册传感器事件,开始监听陀螺仪

    在onPause里面注销传感器事件

    public class MainActivity extends AppCompatActivity {
        ParallelViewHelper parallelViewHelper;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            parallelViewHelper = new ParallelViewHelper(this, findViewById(R.id.main_image_background));
        }
    
        @Override
        protected void onResume() {
            super.onResume();
            parallelViewHelper.start();
        }
    
        @Override
        protected void onPause() {
            super.onPause();
            parallelViewHelper.stop();
        }
    }

    已知问题:

    不能响应屏幕改变事件、不能在横屏上工作。因为现在的APK大部分都定死了方向为portrait,我就不做这方面的优化了。

    解决思路:响应activity的onConfigChange事件,拿到屏幕旋转方向。

    或者创建一个监听系统方向变化的类OrientationEventListener,在事件中拿到屏幕旋转的角度。

    老规矩有啥建议欢迎一起交流~

  • 相关阅读:
    cli create ssl certkey
    开启HSTS让浏览器强制跳转HTTPS访问
    Down State Flush Feature
    tasklist、taskkill命令使用
    findstr 命令使用
    【批处理学习笔记】第十一课:常用DOS命令(1)
    【批处理学习笔记】第十课:批处理符号(3)
    【批处理学习笔记】第九课:批处理符号(2)
    【批处理学习笔记】第八课:批处理符号(1)
    【批处理学习笔记】第七课:简单的批处理命令(6)
  • 原文地址:https://www.cnblogs.com/kimmy/p/5034150.html
Copyright © 2011-2022 走看看