.

5.触发动效 / 动画

U老师发表于:2016年07月16日 21:35:17更新于:2019年04月24日 15:11:02

一、案例效果

00159b661302596ac62f87b4d86dbdd

当点击“放大出现”四个字时,上方的“icon图片”放大出现


二、功能设置

可以用两种方式来实现这个效果。

方式一:触发动效

1.因为icon只有当点击“放大出现“时才会显示,所以要将它设置为初始隐藏

001578a3e2c6c6ffa707fb092c93062

2.给“放大出现”设置触发器-点击时

001578a3cc0928aa2c38b55c6a95d04

3.选择触发器行为-触发动效

001578a3d1c1a441117ee87305624e4

4.选择要触发的元素“icon”,之后在设定动效处选择“放大”

001578a3ea598a13337d7aef45cd768

5.设置动效参数,持续时间

001578a3abdb24bd1f4247650931b37

最后点击✅保存,触发动效的设置完成。


方式二:触发动画

1.这种方式不同于触发动效,我们需要先给icon添加一个“放大出现”动画

001578a3fa292fbb57f979b89b6c50c


2.因为要点击“放大出现”后动画才出现,所以触发状态是“等待触发器触发”

001578a40106ed775e28bb878792f6c

3.给“放大出现”设置触发器——“点击时”的触发器。跟触发动效的触发器一样,只不过这里选择的是“播放动画”

001578a40cc0cd0ec47576a9b8793b0


4.注意,画布上如果没有添加动画的元素,这里就会为空,所以之前一定要先给元素添加动画。


5.最后点击✅保存,触发动画的设置完成。


回复(2)