你是不是曾在面对一个充满动效的界面时感叹其设计的技巧，超多案例参考！" src="/uploads/images/145.jpg"/>

动效按钮， 吸睛必备

在众许多功能中，支付按钮无疑是用户最为关注的焦点。为了让这玩意儿关键功能的按钮更加引人注目，设计师们往往会运用夸张的动效来吸引用户的注意力。正如迪士尼动画的12条原则一样，这些个经典指导性原则是设计师们非...不可掌握的。

迪士尼动画的12条原则，是由Ollie Johnston和Frank Thomas在他们著名的书籍《迪士尼动画：12条原则》中提出的。这本书在豆瓣上得到了9.3分的高大评分，是设计界必读的经典之作。

循环加载， 动感十足

在循环加载的动效中，用普通的缓动曲线兴许会显得有些呆板。这时我们能尝试用有力调型的缓动曲线，让动效更加生动好玩。

• 交互动效画板：1192张设计师收藏采集的相关图片素材材料，让你在寻找灵感时得心应手。
• 花瓣网：设计师寻找灵感的天堂，超许多案例等你来找到。
• 炫酷的概念手艺动效：设计师Gleb Kuznetsov的动效作品欣赏， APP设计简洁，令人眼前一亮。

元素缩放， 对比鲜明

当一个元素的缩放比例从0%到100%时我们能通过对比常规运动和弹性运动的效果，来选择更适合的动效。

• 弹簧运动：生活中的弹簧，一边固定，另一边用手拉伸后放开，它会经历许多次来回弹动后才静止。这种运动过程能延伸到我们的动效设计中。
• 弹动次数：弹动次数不宜太许多，轻巧松造成反馈不及时的问题。一般设置三次弹动，口诀：上下上、巨大细小巨大。

图形变来变去，路径沉组

图形变来变去动效在界面中也是能用到的。路径沉组是我运用的一种方法。困难点在于元素的连贯性和流畅性，许多练就优良了。

• 动态细小动画：动效工具素材界面/UIUI动效UI-动效/loading/缺省AE动效网页D视频广告/UI动效动效动效B-图标动效图标动效动效采集动画动效花草树影清理—ps时候轴加载页面动效细小练习

元素错位，层次分明

为了丰有钱动画效果和层次感，我常用的技巧就是元素错位运动，能是方向的错位，也能是时候上的错位。

• 金山知识库官网的头图动效：运用方向错位原则，元素朝不同方向运动，营造地方纵深厚感。
• 弹性运动：离不开生活场景， 一个柔柔软的细小球，下落碰到地面会产生挤压，弹起时候会产生拉伸，看起来很Q弹。
• 点赞动效：结合生活场景，设计出一些有创意性的动画。巨大拇指点赞，我们习惯先收起巨大拇指，然后再点赞；有个细节，我们手也是会跟着运动的。结合这玩意儿运动过程设计点赞动效，我们再加一点修饰来加有力点赞感知，俏皮的效果就出来了。

动效与生活， 创意无限

动效是设计师的一个基本上发力点，界面里加入动效，能许多些趣味性和引导性。从业务层面来看， 设计师先说说要积累这方面的技能经验，到了实际项目中才有发挥的地方，较巨大程度地给业务赋能。

• 工具栏图标：利用细小球形变运动原理，能做出一些差异化的设计。
• 断线图标设计：近期我输出了一些UI动效练习，也尝试了断线图标的设计风格，看看吧。

通过本文的介绍，相信你已经掌握了让动效既高大级又耐看的6巨大技巧。在今后的设计中，不妨尝试运用这些个技巧，让你的作品更具吸引力。一边，也要不断积累经验，搞优良自己的设计水平。

---