初始值
操作系统 | Alpha | Beta | Gamma |
Android | 90（右转90度趋向0，左转增加） | 0（面向用户转增加，背向转减小） | 0（右转增加，左转减小） |
iOS | 0（右转从360减小，左转增加） | 0（面向用户转增加，背向转减小） | 0（右转增加，左转减小） |
根据掘金文章理解动效实现原理，总共分以下几步：
- 写一个背景图容器，用background-image声明背景图 url；
- 再于容器里写一个角色图，给图片一个浮动效果；
- 通过声明鼠标监听事件拿到指针的 X、Y 坐标
- 利用这两个值，改变： transform 属性，可以倾斜元素 backgroundPosition 属性，可以平移元素
- 让背景图和角色图倾斜、移动的程度不同，营造视差样式，实现类裸眼 3D 效果；
前置阶段就不重复实现了，照着原文代码示例敲就OK，我这里写一下我的实现方法。
- 主要声明了一个陀螺仪Class、一个平滑方法Class。
- 通过设置监听方法，实时获取陀螺仪指标变化，更新State值。
- 最终触发更新角色图和背景图 CSS 逻辑。
最终效果
其中第三段代码主要声明了一个陀螺仪Class、一个平滑方法Class。实现逻辑就是通过监听陀螺仪指标变化实时更新state值，触发更新角色图和背景图 CSS 逻辑。可以把代码 copy 到本地调试着玩玩:github.com/Trade-Offf/…
