Question

网页上的动画是怎么做出来的UI需要做什么

Answer 1

概念：
做视觉感受顺畅的动画，不管是角色动画还是动态图像，最重要的两点就是「节奏Timing」和「幅度Spacing」。
此图摘自《原动画基础教程》
要做好这两点，最基础和普适的练习莫过于「小球弹跳」了。
详细的就不写了，网上到处是，最直接的请看版的《原动画基础教程》。
这一节就行：原动画基础教程（2）
更具体一点的技巧：
要动画看上去舒服，说白了就是要「接近人的视觉经验」。
通常上自然界柔和动作的表现为「两头慢，中间快（慢入和慢出）」。
两头的堆积会显得这个动画更有「生命感」，也是最基础的手段。
在锤子ROM的UI中普遍使用了这种动画手段（比如时钟切换时候的指针到位动画，是最明显的）。
动画曲线是两头平缓的S型.。
当然，如果你要做其他效果，可以使用不同的曲线，会使动画更有变化。
然后，自然界越有力量的动作，会有越强的「反馈」。在动画中称其为「逆向缓冲」。
这种方法可以增强动画的「力量感」。锤子ROM中，解锁后图标弹出的效果就是这样。
角色动画中一般会使用与动作相反的小动作作为大动作的预备来突出这个效果，不过鉴于UI对时间的要求有限，并不建议你这么做。
「拉伸」和「挤压」。这两者都是为了使动画获取「弹性」。
学过物理的都知道，尽管有些时候肉眼察觉不出，物体受力的时候都会产生形变。
同时，由于「视觉残留原理」，高速运动物体会显得「模糊」并且「拉长」了。这也是拉伸的另一个用处，会在时间不变的情况下，视觉感受上物体动的更快了，增加动画的「速度感」。这比较好理解，就不做例子了。上面那个球坠落的过程中也有拉长，同样会产生这种效果。
另外，如果几个动画同时进行，稍稍错开几个动画之间的时间，会显得动画更有「层次感」。这个也很好理解。同样可以看一下锤子ROM解锁后的弹出动画，所有图标并不是同时放大的。

剩余的例如在颜色，大小，形态，明暗，透明度上的变化，都可以使动画看上不那么「素」。这个还是要自己多尝试比较好，比较考验一个人对审美的综合能力。