.

9.动效与动画的区别

小常发表于:2018年01月08日 15:29:27更新于:2021年05月31日 17:13:29


区别:

1.动效没有办法像动画一样精细的设置,比如缩放比例、飞入飞出的距离、透明度等等,多用于纯画面展示的页面效果。

2.动画可以通过设置出现方式来控制播放时序,动效只能通过设置延迟时间来控制

简单一句话:动画可以精细控制、动效设置更简单!


Q&A:

Q:动效和动画可以同时设置吗?如果同时设置后,会怎么执行?

不建议同一元素同时执行动画和动效,可以通过延迟时间来控制动画和动效先后执行,相对独立,各按各的来:

  • 单个元素来讲,如果动画不设置任何的延迟,动效优先于动画执行。

  • 动效若设置了延迟时间,按动效的延迟时间来

  • 动画按照动画属性面板的出现方式设置顺序来执行

当给某个元素同时设置了动画与动效时,会造成一定冲突,导致页面卡顿或元素无法出现,建议尽可能避免动画跟动效一起使用。