陀螺仪
陀螺仪是通过感应手机等设备的运动系统(Device Motion),动态设置图层位移的一种动画方式。通过给不同的图层设置不同的倍率或方向,就可以制造出一种视差移动(透视)效果。
陀螺仪如何设置
陀螺仪测量的是设备的倾斜和旋转,X 轴(水平轴)是与设备宽度平行的轴,Y 轴(垂直轴)是与设备高度平行的轴,可以通过名称将参数配置与目标元素进行绑定:
name | 目标元素的名称,用于绑定陀螺仪参数与目标元素 |
xMin | 陀螺仪沿 X 轴位移的最小值 |
xMax | 陀螺仪沿 X 轴位移的最大值 |
yMin | 陀螺仪沿 Y 轴位移的最小值 |
yMax | 陀螺仪沿 Y 轴位移的最大值 |
hMin | 陀螺仪绕 X 轴旋转角度最小值 |
hMax | 陀螺仪绕 X 轴旋转角度最大值 |
vMin | 陀螺仪绕 Y 轴旋转角度最小值 |
vMax | 陀螺仪绕 Y 轴旋转角度最大值 |
以下图为例,将全部动画元素分为三层:前层、中层、后层,分别赋予运动方向、速率、旋转来实视差移动效果。
- 后层:方向跟随移动
- 中层:固定,不移动
- 前层:正向跟随移动
1. 层级设置
首先添加一个渲染插件,类型选择陀螺仪。
然后,添加三个空节点作为父级,分别命名为前层、中层、后层,如图中箭头所示。
将对应的动画元素,分别绑定到这三个父级空节点。不需编辑父节点动画。
然后在陀螺仪的属性面板中,输入各层的名称。点击底部的+号,可添加新的目标元素。
目标元素之间的名称不可重名,否则无法区分。
接下来,分别设置这三层的陀螺仪运动的速率与方向。
2. 后层——反向跟随移动
后层是放置背景素材的层级。这一层级的素材在在用户转动手机的过程中背景图会发生位移。若要反向,只需将数值修改为负数即可。
3. 中层——不移动
中层放置不移动的素材。这一层级的素材在用户转动手机的过程中不会改变在屏幕上的绝对位置。若不需要移动,不设置到陀螺仪的目标元素也可以。
4. 前层——正向跟随移动
前层放置前景层的素材。这一层的素材在用户转动手机的过程中会和背景层反方向移动。如果在 Galacean Effects 上贴边放置,会出现移动过程中移出屏幕的现象。
设备模拟器
为了更好地预览陀螺仪效果,编辑器提供了设备模拟器。
选中渲染插件(陀螺仪),开启右侧参数面板中的设备模拟器。即出现模拟器,用户可拖拽旋转。
由于动画需处于播放状态才能看到效果,因此拖拽设备模拟器时,需播放合成。
也可以在 X 轴、Y 轴的输入框录入数值设置角度。
移动参数限制
- 水平方向上转动最大角度:60
- 竖直方向默认起始角度:45,允许用于最大转动角度:60