项目背景：
店加是一个便利店老板采购进货的平台。在分类列表页面，用户会进行批量加购操作。购买N个相同的商品，用户有两种方式：一种是先找到要买的商品添加到购物车，再到购物车列表中调整每个商品的数量N；另一种是找到每个商品后，加购N次。
现有的加购界面反馈是Toast提示，当用户快速加购商品或者是网络状况不好时，反馈不是很明确，特别是第二种操作喜光的用户难以感知点击过“加购”按钮的商品是否已经成功加购到购物车中。新的动效目的就是传达给用户更加明确的操作结果。
动效意义：
动效设计有两个主要的意义，一个是凸显产品的主要内容，引导用户的注意力；一个是帮助用户理解界面，降低认知门槛。本次的动效设计主要意义是降低用户的认知门槛，经过分析和调研，我们归纳了三个设计方向：
1. 区分加购成功和失败的界面反馈形式，用差异化的方式强化用户感知
2. 体现前端和服务器的数据交互过程，并尽力表现出系统的快速响应能力和流畅性；在极端情况下能很好的补位，减轻系统卡顿和等待的感觉。
3. 合理借鉴成熟平台已有的反馈效果，比如淘宝网站上商品飞入购物车的效果。
设计思路：
根据上述梳理的三个要点，进一步深化分析，我们讨论出了以下方案：
1. 现有的加购成功和失败的反馈方式都是toast，存在进一步优化的空间。加购成功时，使用界面动效；加购失败时，细化为明确原因的失败和系统原因的失败。对于明确原因的失败，比如操作每个用户限定的购买数量使用弹窗的形式；对于系统原因比如服务器超时未响应，则使用toast提示。
2. 对于用户与前端的交互，界面可以表现出点击效果，比如按钮颜色或者大小的变化。对于前端于后台的交互，界面可以变现出“进度”的效果，比如环形的进度条或条形的进度条。进度条又可以分为两种，一种是可以计算出当前进度的。比如下载，可以根据当前的下载速度和文件大小实时显示出当前进度。另一种是不知道何时结束的，比如网络的连接和数据的加载，只能使用循环的动画表明系统正在处理中。
3. 购物车位于底部标签栏中，商品从列表中按钮位置飞入购物车，可以模拟现实中物体坠落的过程。商品沿着抛物线从按钮位置加速移动到购物车，使整个动效更为自然。
原型实现：
为了直观地把设计思路传达给项目组人员，我们需要进一步制作动效原型并反复调试出满意的效果。动效原型的软件有很多种，各有特点，选择一款适合自己和当前项目且可以表达出设计思路的就可以了。我先使用Origami Studio制作出了一小段的视频便于动效的展示。后使用Axture制作出可交互的高保真原型，便于动效的拆解和描述，把相关参数和实现思路提供给前端开发参考，最终能更好的在产品上实现。
制作动效的主线思路有四个步骤：触发事件、影响对象、影响属性、动效结果。以本次加购动效为例可以拆分为两个动效，“加载”和“飞入”动效。
“加载”动效的触发事件为用户点击加购按钮，影响对象是购物车按钮和加载图片，影响的属性有购物车按钮的大小和加载图片的透明度和旋转角度，动效的结果是购物车放大1.2倍且显示加载图片循环旋转。
“飞入”动效触发事件是服务器成功响应事件，影响对象是商品缩略图，影响属性是商品缩略图的透明度和位置。动效的结果是商品缩略图显示后从按钮位置沿抛物线移动到购物车位置后隐藏。
值得注意的是，“加载”动效有一个对应的“停止加载”动效。它的触发对象是服务器响应或服务器超时未响应，其他三个步骤与“加载”相反。
除了这四个步骤之外，动效的另一个要点就是缓动曲线的选择和时间的控制，缓动曲线可以概括为三种EaseIn(加速曲线)、EaseOut(减速曲线)、EaseInOut(先加速后减速)。当然这三种类型有很多其他的变化，且在不同的前端实现上有不同的描述，但都可以参考贝塞尔曲线，有兴趣的同学可以自行搜索相关内容。时间的控制上，以毫秒为单位，一般运动距离大或动效复杂的在四五百毫秒左右，距离短或简单的动效在两百毫秒左右。具体的数值需要反复根据实际效果调整。
为了详细地向开发传达这一过程，我绘制了流程图：
界面元素的层级关系，可以给开发一些灵感：
整个过程比较遗憾的是由于原型工具的局限性（或是我没有完全掌握？），没有实现商品沿抛物线运动的效果，而以直线代替。欢迎大家有更好的想法可以一起交流探讨。按照抛物线的方程：y=ax2+bx+c ,确定了两个点：加购按钮的位置（0，y1）,购物车的位置（x1,0）的位置是可以计算出商品缩略图的运动轨迹的，给定特定的时间和缓动曲线（EaseIn），理论上可以很好地模拟物体受重力影响的运动效果。各位懂前端技术的朋友们可以交流下具体的实现逻辑。
最后附上Origami原文件和Axture原文件、预览文件，大家一起学习交流。预览原型/Axture源文件/Origami源文件
