3. 编辑元素
进入功能可以控制进入动画的效果与触发方式。下面为部分进入动画效果预览:
从上进入,移动50px。
从下进入,移动5s。
从左进入,x轴转90°。
从右进入,延迟5s。
选中需要编辑的元素,右键点击元素,选择样式,选择进入选项卡。
在“标准进入动画效果”选择“无进入动画时”此选项可勾选,选择设置简单的进入动画效果,默认不勾选。
勾选“简单进入动画效果”后激活以下属性设置,如果填写时没有填写单位,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。
默认设置为“无进入动画”,选择一种动画效果后激活下列选项。如果填写时没有填写单位,WIDE会自动生成相应单位:
l 标准进入动画效果:选择进入动画的效果,例如:上下弹跳。
l 持续时间:动画效果持续的的时间,单位为s,例如:2s。
l 延迟启动时间:刷新页面后延迟一段的时间才开始启动动画,单位为s,例如:1s。
l 启动间隔(像素):动画效果变化幅度,单位(px),例如:100。
l 进入动画效果循环次数:刷新页面时该元素的执行动画效果的次数,例如:2。
l 触发动画触发方式:选择刷新页面后手动触发动画效果的动作,默认无触发,例如:选择“划过”。
l 触发动画类型:选择手动触发动画的动画效果,默认为“无”,例如:选择“左右晃动”。
l 立即停止(默认平滑停止):单选,选择在解除触发动作后是否立即停止动画,默认是平滑停止,例如:勾选“立即停止”。
l 开始延迟时间:在执行触发动画动作后延迟一段的时间才开始启动动画(这里必须填写时间单位s),例如:1s。
l 持续时间:动画效果持续的的时间(这里必须填写时间单位s),例如:5s。
下面为部分触发动画效果预览:
永久触发,旋转消失。
一次触发,缩小消失。
触控触发,弹入。
划过触发,悬挂。