一、案例效果
《陀螺仪案例演示》【可点击拷贝】
This is Zadig （非Epub360平台作品）
2016 SPACE FANTASY（设计：怪熊叔叔）
（部分机型可能无法完整体验）
《光棍节大作战 》（设计师：茶茶）
二、场景应用
陀螺仪除了在游戏中有广泛应用，在产品互动展示领域也大有作为。
三、案例中部分效果素材
文末附件下载素材，非商用，仅供学习使用。
四、陀螺仪基本原理
1.陀螺仪最关键的核心数值
陀螺仪的角度变化情况，从实际手持手机的情况来说：
X轴：一般在 0° ～ 90°（代表手机横向切割线，也就是代表手机上下倾斜角度）
Y轴：一般在-90° ～ 90°（代表手机竖向切割线，也就是代表手机左右倾斜角度）
Z轴：可以是 0° ～ 360°（代表手机水平后，旋转的角度）
五、组件用法
基本用法
1.点击高级组件中的陀螺仪组件，添加到页面。
2.陀螺仪组件的设置本身很简单：
轴向类型：包括 X / Y / Z三个轴向，每个组件限定感知一个轴向的变化
起始范围：可以限定感知角度变化范围
角度变化触发器：这里需要配合触发 “设置元素属性” 使用
3.我们现在以一个小球图片的运动为例，帮助大家学习陀螺仪的用法。如：下图中，想让一个元素从A点运动到B点，那么手机在X轴上要向下旋转移动10个像素，在Y轴上要向右旋转移动15个像素。
即：在A点的X坐标和Y坐标上增加一定的值才能到达B点，需要X坐标+X轴的移动值，Y坐标要+Y轴的移动值。
4.具体做法：怎么去获取这个元素的X，Y坐标值呢？借助另外一个陀螺仪。页面中添加2个陀螺仪，分别命名为，陀螺仪X轴，陀螺仪Y轴。
5.页面中添加一个用于控制的元素，我放置的是一个小球图片。选中【陀螺仪X轴】设置以X轴为旋转轴，起始角度范围我们用默认的，为了方便查看陀螺仪的变化，我们勾选画布中显示，记得把陀螺仪挪到画布可见区域内，方便感受效果。
6.选中【陀螺仪Y轴】，选择类型为y轴旋转角度，其他的默认。
7.选中【陀螺仪X轴】，给它设置角度变化时的触发器，让小球在手机以X轴为轴旋转变化时，控制小球运动。借助设置元素属性的触发行为，让小球的X、Y坐标增加对应的值。
8.这时用手机去预览，就可以测试到小球运动到效果了，但是会发现小球滚着滚着就不知道跑到哪里去了，需要我们限制一个范围，不要让它跑太远，最好是在我们视觉可见的范围之内。
9.这样一个小球在指定范围内运动的效果就实现了，快去测试看看吧。
10.总结陀螺仪的设置x轴和y轴同理，不要和x坐标和y坐标混淆。
陀螺仪对应设置元素x坐标@陀螺仪，其实就是用了陀螺仪的一个数值范围，那么x坐标你的需求范围就可以按照实际的陀螺仪值做公式赋值了，具体的值以你的实际素材坐标为准。
感谢茶茶的热情分享，怎么样，了解了Epub360陀螺仪设置原理没？是不是比较简单呢？下面再分享一个免费模板，请前往桌面端复制学习->>Epub360陀螺仪功能演示
最后留个小问题：在陀螺仪的设置中，怎样控制物体运动速度呢？
高级用法
参考案例《光棍大作战》分析
1.需要实现的效果：希望画面能够通过陀螺仪变化在一定范围内进行移动，并且能够进行点击触发。
2.考虑画面超出了屏幕尺寸，并且有的需要点击隐藏触发，考虑画面是一个整体，分为背景和点击层，如果让它能够整体去移动，在layer层制作是最好。
3.回到page页面，插入layer容器，会看到画面layer已经呈现在page页面中。
陀螺仪的设置关键是依照你实际的素材和你实际的需求来设定元素对应的x、y坐标移动范围。
4.因为本案例的作品尺寸比较特殊计算相对复杂，参考下面图解，就能很快的理解陀螺仪的制作实用。
六、相关Q&A
拓展阅读：