仿·自如APP裸眼3D效果——Flutter版

介绍

前天看了《自如客APP裸眼3D效果的实现》的效果，以为这个交互很棒也很好玩，遂用Flutter实现了一个。

巧妇难为无米之炊，因没有设计稿，因此相较于自如的能够说很丑。 (●'◡'●)
复制代码

实现

如《自如客APP裸眼3D效果的实现》 中介绍的，总体构成为3层:

底层、中层、上层
复制代码

在转动手机时，中层保持不动，底层和上层作相反运动。 咱们先集成插件sensors:

sensors: ^2.0.3
https://pub.flutter-io.cn/packages/sensors/install
复制代码

以后经过StreamSubscription监听插件的AccelerometerEvent事件，其携带3个值，分别是:x, y, z 。

这里介绍一下此处三个值的意思，它们分别表明三个轴的重力感应，以下:

三个轴得取值范围是同样的: [-10 , 10]，方向朝天为正，反之为负。

以后，咱们借助stack 和 position就能够实现这个交互效果了。

值得注意

这里须要注意的是，sensor传递的值是经过event channel，并且值变动的时间窗口较大，粗暴地在收到event后，刷新页面效果并很差。

所以，介于传感器值的范围，和时间窗口的问题，这里建议将x和y的值作略微扩大，并经过AnimatedPositioned进行位移动画。也就是说，用动画时间合理的填充空窗期，并衔接先后值的变化。相似以下：

由于没有设计图，具体位置只能摸索，因此值的设置看起来有点琐碎，见谅。
复制代码

///值仅做参考，具体要根据设计稿和页面环境灵活配置
///监听
_streamSubscription =
    accelerometerEvents.listen((AccelerometerEvent event) async {
      setState(() {
        x = event.x * 2.5;
        y = event.y * 1.8;
      });
    });
    
///主要布局
Stack(
  alignment: Alignment.center,
  children: [
    AnimatedPositioned(
        top: y - 40,
        right: x - 10,
        duration: Duration(milliseconds: duration),
        child: _bottom()),
    Positioned(
        child: _middle()),
    AnimatedPositioned(
        bottom: y - 10 ,
        left: x + size.width / 3,
        duration: Duration(milliseconds: duration),
        child: _top()),
  ],
)
复制代码

经过这种方式，H5应该也能实现不错的效果。不过在实际应用中，考虑的因素仍是比较多的，如：弱网、机型、兜底方案等等。至此文章就结束了，谢谢阅读。

Demo代码书写随意，且还有不少值得优化的地方，欢迎评论区讨论。
复制代码

Demo代码

地址

进入路径： 首页 —— 实验室DEMO —— 裸眼3D

裸眼3D demo代码

其余文章

Flutter——原生View的Touch事件分发流程

Flutter 仿网易云音乐App

Flutter版 仿.知乎列表的视差效果

Flutter——实现网易云音乐的渐进式卡片切换

Flutter 仿同花顺自选股列表