今天的文章既有设计师@Akane_Lee，也有工程师同学。在动画效果大行其道的今天，想要做出很炫酷的动画效果，应该如何与工程师沟通，才能不做也能很好的配合呢？让工程师自己直接告诉你。在谈如何与RD合作制作UIAnimation之前，先来看看RplusChen推荐的这篇文章StopGratuitousUIAnimation。（这篇文章是个人笔记，我用Hype3直接出Prototype和JS，避免了和一堆值的大混战，但是“我为什么这样做”的部分还是需要理解）Hype，动态神器神器，零基础入门教程系列：《Sketch神助攻！无代码做动效神器Hype3入门教程》《无代码动效神器！教你用HYPE3做APP原型的基础过场（附神器）》?设计师要为RD制作动效，需要几类资料。感谢邱正贤、林猫眼、谢梦哲的分享。综合三种意见，整理出以下6点：Startstate,endstatechangeattributes(width,height,XYcoordinates,XYZaxisrotationangle,transparency,color...)时间脚本（从多少ms到如何manymstodowhichattributetochange)Gradientfunction(Ex.ease-in)Operationbehavior(stopandchangetouseroperation,ignore,etc.)参考例子1.Startstate,endstate动态效果开始和结束时间状态。即，动画开始前和动画结束后屏幕的样子。2.更改属性写过标注文件的设计师都知道，一个元件需要标注其大小、距离、色码、透明度等，如果是文字，则必须标注字体、字位、行高等。被添加。在动画领域，除了X轴和Y轴之外，在3D空间中还增加了Z轴。所有需要创建动态效果的组件都必须标有这些值。请注意，它是一个值，而不是“感觉”。RD编程不能靠感觉。百度搜索用户体验中心H5实现炫酷水滴效果。文中有一个非常吓人+凶猛的“水滴”数值演示（抖）。天马行空的设计摆在眼前，我只好含着泪去做——百度前端工程师的内心独白。设计师高兴地把想象中的动效丢给了RD。RD只有经过如此复杂的计算才能实现。如果有专门做动画的工作就好了。这是他的工作，但往往不是梦想。RD只是没有时间解决错误。哪有那么大的功夫对付锦上添花？)3.在时间脚本的哪个时间点，某个组件的属性发生变化。也是关键帧的概念，有“变化属性”，一个分量从时间点A到时间点B的值变化是多少。如果每个分量的变化时间不一样，就会有很多要处理的不同“时间流逝”和“属性变化”。4.梯度函数可以理解为“运动的加减速”。根据Disney的12AnimationPrinciples，第6项是Slowinandslowout，MaterialDesign有一整章解释曲线的必要性，并有很多动画示例。当然，这对设计师来说是非常困难的。Easingfunctioncheatsheet可以参考这个网址，和RD一起讨论组件动作的路径。5、操作行为“触发条件”，用户的操作会不会影响动画？游戏类会特别注意这部分。6.设计师可以展示动画、模拟视频、原型等供参考，难度不大。难点肯定是如何标记上面提到的5个值。如果这些属性状态值没有写清楚，那就要看RD通灵了。RD感谢谢梦哲在FB上公开分享实战经验，已获得转载许可。看完本文你就知道为什么RD会练满通灵Lv.99了。全文如下：其实动画有两种：一般的2D动画（平移、旋转、透明……）特殊的或者3D的动画（翻页、Mac丢进垃圾桶……）后者只能口头或视频交流，开发成本高。我遇到的情况是：有专业的设计团队，专业的特效库团队，再加上完成所有工作的软件开发团队。前者有一定的规律可循，因为工程师在开发的时候，系统已经提供了相关的操作方法，只要给出一些相关的参数即可：动画对象的参数变化（如坐标、透明度、旋转角度）动画继续的时间动画的加减速曲线，f(x)=y表示对象参数在时间点x为y。这就是上面其他人提到的。前两点很容易量化，但团队对ux的感觉仅从动画时长就能看出：用户认为多少秒的动画是可以接受的？动画是否可以中断或改变状态（向左滑动一半停止，或改为向右滑动）？或者，是否需要此动画？我遇到的新手设计师或工程师最常见的事情是将动画时间定义为0.6到1秒。如果没有特殊设计，我一般会说“太长”，要求改成0.3到0.5秒。。。这个很长，点到最后就好了。第三点的等式很有趣。设计师根本不知道如何描述这部分。即使是工程师，在这个素质差距这么大的时代，也不是每个人都能写出f(x)=y的方程。但是仍然有一些有用的工具可用，例如这个网页：http://matthewlein.com/ceaser/您可以拉正方形来改变曲线，然后按下那些按钮来查看实时效果。当然，正如上面提到的其他人，这个等式是现成的，可以应用，比如逐渐减少（web工程师喜欢说ease-out，android会说DecelerateInterpolator，因为每个平台用的词不一样，除非它只涉及到一个平台上与工程师的特定交流，否则我觉得用通俗的语言“逐渐减少”来形容交流比较好。至少PM能看懂）。一般来说，有这样的描述是好的，但如果要求更高的质量，就需要更精确的描述。褪色这个词就像黄色一样，是一个非常不精确的概念。如果黄色比较精准的话，可能是浅黄或者香蕉黄，但是如果很精准的话，一定要用colorcode来描述，不然你的香蕉黄和我的一样。香蕉黄色可能会有所不同。减速也是如此。ease-out和DecelerateInterpolator一样吗？有兴趣的可以研究一下，最准确的描述一定是数学方程式。在开发一个要求比较高的手机app项目时，我直接模仿了上面网页的概念，在手机端做了一个外观类似的app，来和设计者交流。当他们拉动手指时，公式中使用的参数就会出来，效果可以直接在手机上看到。
