进入

进入功能可以控制进入动画的效果与触发方式。下面为部分进入动画效果预览:

从上进入,移动50px。

从下进入,移动5s。

从左进入,x轴转90°。

从右进入,延迟5s。

上下弹跳,持续5s。

闪烁,延迟5s。

脉动,启动间隔5px。

左右伸缩,循环5次。

1. 选择进入

选中需要编辑的元素,右键点击元素,选择样式,选择进入选项卡。

2. 简单进入动画效果

在“标准进入动画效果”选择“无进入动画时”此选项可勾选,选择设置简单的进入动画效果,默认不勾选。

勾选“简单进入动画效果”后激活以下属性设置,如果填写时没有填写单位,WIDE会自动生成相应单位:

l  进入方向:元素进入的方向,默认为“无”,例如:选择“上”。

l  移动像素:进入时,移动的距离(单位:px),例如:100。

l  移动时间:进入时移动的时间(单位:s),例如:2。

l  X轴转角(度):元素开始动画前偏离X轴的角度(单位:deg),默认为0,例如:45。

l  Y轴转角(度):元素开始动画前偏离Y轴的角度(单位:deg),默认为0,例如:45。

l  Z轴转角(度):元素开始动画前偏离Z轴的角度(单位:deg),默认为0,例如:45。

l  缩放比例:元素开始动画前缩放的比例,默认为100%,例如:50%。

l  延迟时间:进入动画延迟一段的时间才开始启动动画,默认为0s,例如:2s。

l  显示比例:元素开始动画前的显示的比例,默认为100%,例如50%。

l  不透明:元素执行进入动画时的透明度,可选填0-1之间的数值,默认为1,即完全不透明,例如:0.4。

3. 标准进入动画效果

默认设置为“无进入动画”,选择一种动画效果后激活下列选项。如果填写时没有填写单位,WIDE会自动生成相应单位:

l  标准进入动画效果:选择进入动画的效果,例如:上下弹跳。

l  持续时间:动画效果持续的的时间,单位为s,例如:2s。

l  延迟启动时间:刷新页面后延迟一段的时间才开始启动动画,单位为s,例如:1s。

l  启动间隔(像素):动画效果变化幅度,单位(px),例如:100。

l  进入动画效果循环次数:刷新页面时该元素的执行动画效果的次数,例如:2。

4. 动画触发方式

l  触发动画触发方式:选择刷新页面后手动触发动画效果的动作,默认无触发,例如:选择“划过”。​

l  触发动画类型:选择手动触发动画的动画效果,默认为“无”,例如:选择“左右晃动”。

l  立即停止(默认平滑停止):单选,选择在解除触发动作后是否立即停止动画,默认是平滑停止,例如:勾选“立即停止”。

l  开始延迟时间:在执行触发动画动作后延迟一段的时间才开始启动动画(这里必须填写时间单位s),例如:1s。

l  持续时间:动画效果持续的的时间(这里必须填写时间单位s),例如:5s。

下面为部分触发动画效果预览:

永久触发,旋转消失。

一次触发,缩小消失。

触控触发,弹入。

划过触发,悬挂。