.

产品说明手册

基础组件

高级组件

高级交互进阶

应用插件

账号付费

模板应用说明

FAQ

通知公告

教育/培训

Coolsite360建站相关

4.动画效果详解

WU • 发表于：2015年03月20日 14:26:52 • 更新于：2017年12月21日 18:55:22

经常有派友问，动画效果什么意思。说实话，那么长一串还全是英文，确实让人一头雾水

image.png


常用动画效果

1.Back1.gif

2.Bounce

2.gif 

3.Elastic

3.gif

4.Circ

4.gif

5.Sine

5.gif

6.SlowMo

6.gif


静态图解释：横轴是时间，纵轴是位移

blob.png

用动图来解释或许更为生动：

001567b643525da05e97a07de06b7f7

001567b64423e81a28cfa834563985f

001567bc420199361fb0dd80a5c2b35



001567b673aa4bdff879250f4e65bcb



001567b67351c103ad72d2846635fbd



001567b6730bedd9a1607dd6072162b



001567b672538f87b7c4381885b6a9d



001567b6721f3a23c7131e1ddd3b42d



001567b671e6ae8f77f0328f8a57da3



001567b6712a467633908f7f82b5643



001567b6709712d83c082bf8a241bfe



001567b6705815f69df945ba6e72c81



001567b66fd44741ef6133ada0a4207



001567b66f6d752aab0a587ca789495



001567b66f2beddcb1a9c07a2c04b8f



001567b66deeb1dccee627c8b4081cb



001567b66dc69b4410124eca47f5fb6



001567b66d6dde934cfe92364ede278



001567b6600efe32024f9895e010f87



001567b65fc7af240dd8b6c1d7e6c04



001567b65f8918c1f80cac1f54c2b5a



001567b65f0c6874773c70e16fcfe12



001567b65ed14c59f6adbfcbdf17243


easeInOutBack.gif




001567b65e4ce31a13da6ddb4a99a55



001567b65e22f7c5f3e5a5c18c808f7



001567b65df0b95282c43412e0e844f



001567b65d864722aeca6903cde2306



001567b65d56788c9fd7dea2021369e



001567b65d25a1ba9e62206cd2e0975


感谢大家的总结---鼓掌~


上一篇：动画时序设置

下一篇：触发动画动效

回复(4)