UI动效教程freestyle（一）——吆吆吆，先别急着做酷炫动效，打牢基础很必要

如今扁平化设计已近占据设计风格主流，想要在种类繁多、设计风格同质化严重的APP市场脱颖而出的话，就需要运用动效设计进行用户体验的进一步提升，当然我们不是肤浅的为了动效而动效。一个好的产品都是7分交互3分视觉，而动效是依附于交互存在的，是为交互服务的，产品中的动效是为了提高交互效率，提升用户体验的，而且未来动效设计也是设计潮流与趋势。（讲话言简意赅，字数多了你们读的也烦，如果针对某一点有问题，可以私聊）

对于新手我们如何学习呢？

一、如何学习——多看（APP案例、网站、书籍）

学习动效很重要的一点是要多看，多收集一些案例，看的多了想法就有了，

尤其学习设计，很多优秀案例其实就在我们身边，平时玩APP遇到好的动效可以收集一下（手机自带录屏的话更好），

推荐一款专门录制GIF的软件——LICEcap ，MAC电脑端录制手机屏幕的一款软件（最后有文件包下载）

推荐的网站：

1、beyondkinetic.com

2、mvsm.com

3、motionographer.com

4、cubstudio.com

推荐的书籍：

《原动画基础教程动画人的生存手册》

《点石成金》

《交互设计精髓》

二、掌握最基础的动效理论

掌握必要理论是做动效的前提，之前看网络上很多新手学了几天AE就做了很多酷炫、装范儿的动效，这种没有理论支撑的动效是不符合物理世界的运动规律的，牛逼但然并卵，所以新手要先了解动效理论

动效其实来源于动画设计，动画设计历史就久远了，动画界最牛叉的迪斯尼团队根据多年的工作经验，总结了这八个要素，满足这些，可以让我们的动画更有趣、逼真、提高效率、更......(反正就是好，听大师的没错)，一句话总结，动画不等于动效，但是动效一定符合动画规律

1、时间间距（动画要掌握好节奏）——时间不仅影响一个观众对于物体运动速度的感知，同时也影响观众对于运动物体重量的感知

2、缓入缓出——真实的世界中不存在匀速直线运动物体，所以物体运动的速度变化曲线肯定不能一直是条直线

3、预备动作（预备动作时间长——速度之后变快；预备动作时间短——速度之后变慢）

4、动作跟随（模拟现实）

5、挤压和拉伸（注意保持对象体积不变）物体快速运动产生型变，可以让观众感受到物体的材质，夸张物体的运动速度

6、夸张手法，夸大物理世界的运动规律，给观众更冲击直观的感受

7、二次动作——强化主动作

8、连续打帧和对应打帧——精确把握时间

补充：跟多规律请观察自然世界

三、用什么软件制作动效呢？

还是那句话，软件只是工具，重要的是想法和眼界，主流经典软件是AE，在动效界的地位就像PS一样，当然还有Principle(轻量化、速度快)、Flinto、Hype3、pixate，

四、关于AE动效的几个快捷键和常用的功能

1、显示/隐藏辅助对象——cmd+shif+H

2、solo模式：单独显示图层

3、B键和N键可以控制预览区域

4、单独调出关键帧：P（位置）T（透明度）S(缩放)

5，调出第二个关键帧：SHIF+P/T/S

5、缓入缓从（Fn+F9）

6、“整理文件”功能的运用

如果我们将项目文件从一台电脑拷贝到另一台电脑，在另一台电脑上打开发现项目中的很多文件都丢失了，这个是因为我们在拷贝的时候没有一起把项目文件中用到的素材一同拷贝上，这个功能正是解决这个问题，帮你把项目文件和素材一起整理到一个文件夹（最后弹出选项一定选择“全部”）

五、动效的注意事项

1、同类型文件可以同时选中一起打帧

2、做动效帧速率不得低于25帧，大多数我们都用到30帧

3、AE中矢量图层基于路径起作用，也就是所AE是图层作用是由下到上，这一点与PS恰恰相反（so路径图层一般在最下方）

4、关于中心点，分清楚视觉中心点与物理中心点，在做动画时要用视觉中心点，而不是物理中心点

5、关于速度曲线（正向操作，先快后慢，负向操作，反之）

正向操作就是确定、添加等等功能，负向操作比如删除、移除、忽略等等

6.动效中，同类型物体运动规律应该一致

7、时间反向关键帧的作用

六、关于工作交接：

1、向产品经理展示设计稿时用视频或者GIF，给开发时给他连续的静帧（l）

2、如何导出静帧

案例分析

1、这是我做的一个案例，运用了撕纸效果和Z轴，撕纸在AE很简单的一个特效，当然在开发中这种效果显然开发成本太高，我只是作为练习，另外我运用了Z轴，让后面的图层沉下去，展现了层级关系

2、运用了动作跟随和预备动作

3、这个案例运用了挤压和拉伸

你的点赞是我不断更新的动力