产品经理想做动效,可是你的需求写清楚了么？

1、想做动效，可是你的需求写清楚了么?精美的动画对于提升产品体验有很大帮助，如促进用户理解功能，缓解用户情绪，调动用户积极心理，为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了，不少人已经开始越来越重视动效在产品中的应用了，还没有看过的同学不用急，谷歌官方的动效指南讲解得很详细，建议只看这个就够了，配合一些动画理解起来更容易。你已经有了大致的想法，那么怎么让研发哥哥们实现呢？demo又改怎么做呢？可别说让研发下一个app照着做。一、工具的选取目前的动效设计工具非常多，建议使用主流的工具，不仅教程多，后期更新也更方便。我用过主流的有以下几种，各有不同，需要针对彼此的优缺点使用。1. flin

2、to这个比较适合做页面跳转，比如从点击一个按钮从一个页面跳转到另一个页面，实际项目中很少用，比较适合一些小项目，上手比较容易。2. principle相当于一个轻量级的AEE,调节动画非常方面，同步sketcottie可以将AE做的动画转为代码，有兴趣的同学可以保持关注。对于动效软件的选择，看个人的爱好了，新手比较推荐flinto和principle。二、设计时的注意点别以为demO故好了就结束了，接下来才是最麻烦的一步，如何让研发哥哥们实现你的动效。你可别拿着demo就直接丢给研发哥哥了，运动时间，淡化的百分比，运动的形式，这些可别让研发看着你的demo猜。在写动效需求文档的时候，有这么几个

3、注意点：1 .运动模式虽然研发会更喜欢匀速直线运动（毕竟做起来简单），但是让人愉悦的动效应该是模拟现实的，会有对应的减速和加速运动，这一点参考谷歌的动效指南就好，使用系统自带的参数就好，不要再去调整加速曲线了。2 .运动时间要注意研发的单位一般是毫秒，所以你就尽量别写0.03秒这种了3 .动画的实现类这里就要说到代码层了，不能理解的没关系，看看就好。iOS的动回可以被分为两大类：系统提供的关键帧动画实现方式：用户指定关键信息，系统实现动画过程，对用户而言操作起来会简单些。逐帧动画实现方式：周期性的调用绘制方法，绘制每帧的动画对象。系统操作方法简单，但用户操作的工作量就会大一些。著名的faceo

4、ok的pop动画框架，就是使用CADisplayLink这种逐帧绘制的方式实现的如果绘制过程过于复杂，不能在屏幕刷新一帧的时间内完成，可以考虑改为每隔一帧绘制，相当于是30FPS的刷新率。不然可能会使动画不连贯，有卡顿感。采用关键帧的方式来实现动画，要讲的内容相对逐帧的方式就多的多了。动画过程实际是一个时间的函数，横坐标是时间的变化值，纵坐标是动画属性的变化量。那么我们就可以在一个直角坐标系中，通过作图来画出这个函数。比如匀速运动的图形，就是一条通过原点的直线。所以这类的功能就是画出一条曲线，来表示时间和属性变化之间的关系。而画图的方法，是使用的是画贝叶斯曲线的方法。系统提供了几个常用的函数，

5、比如kCAMediaTimingFunctionLinear就是匀速运动；kCAMediaTimingFunctionEaseInEaseOut就是一般系统动画的默认值，渐入渐出，即在动画开始和结束的时候速度稍慢些。Android的动画类Andoid:interpolatorInterpolator被用来修饰动画效果，定义动画的变化率，可以使存在的动效果accelerated（力口速），decelerated（减速），repeated（重复），bounced（弹跳）等。android中的文档内容如下:AccelerateDeceleratelnterpolator:在动画开始与结束的地方速率改

6、变较慢，在中间的时候加Acceleratelnterpolator:在动画开始的地方速率改变比较慢，然后开始加速Anticipatelnterpolator:开始的时候向后然后向前甩AnticipateOversator:开始的时候向后然后向前甩一定值后返回最后的值Bounceinterpolator:动画结束的时候弹起Cycleinterpolator:动画循环播特定的次数，速率改变沿着正弦曲线Deceleratelnterpolator:在动画开始的地方快然后慢Linearlnterpolator:以常量速率改变Oversator：向前甩一定值后再回到原来位置如果android定义的int

7、erpolators不符合你的效果也可以自定义interpolators三、具体范例如图，一个点击分享按钮后，各个分享图标依次减速入场的动画的需求如说明:1 .优化直播间分享面板，增加特效2 .当用户点击分享按钮时（*包括传统直播间主播面板的分享按钮和上方分享按钮，手机直播间的分享按钮*）,从下方弹出分享面板，逐个弹出分享icon,并淡入显示分享奖励。3 .用户关闭分享面板时，分享icon从右到左依次下落淡化消失相关参数：1 .分享面板减速弹出，运动时间225ms2 .分享icon从左到右依次弹出，运动时间225m&带有奖励图标的，当对应分享icon弹出后，分享图标淡入显示（时间225

8、m§,第二个图标比第一个迟100ms开始运动eg：如图第一个为qq图标，当用户点击分享按钮，分享面板弹出后，qq图标开始弹出（时间225m§,100ms后第二个图标（qq空间）弹出，当qq图标完全弹出时，淡入显示分享奖励图标，时间225ms3 .分享icon从右往左依次收回，分享面板收回，所有运动的时间减少30毫秒，如分享面板收回时间195ms分享icon收回时间195m&andorid端动画曲线采用系统自带：AccelerateDeceleratelnterpolator（在动画开始与结束的地方速率改变比较慢，在中间的时候加速）iOS端动画采用系统自带：kCAMediaTimingFunctionEaselnEaseOut（在动画开始和结束的时候速度稍慢些)具体效果可参考附件视频四、Android和iOS可能的区别1 .在研发哥哥写完代码后，检查的时候你会发现a