交互动画系列之二：贝塞尔曲线

[youngwind]

动画的意义

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。动效应当在独立的场景呈现。通过动效，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。 动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

来源：http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

来源：Material Desigin

贝塞尔曲线

自然界中的动画绝大多数都不是匀速直线运动的，比如你推一个箱子：先从0快速加速到最大速度，最后在减速到0。随着硬件技术的发展，我们已经可以在计算机模拟并且呈现这样各色的曲线。 ok，现在我要用div模拟这个推箱子。

.demo {
  margin-left:0;
  trasition: all 300ms  cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.demo-active {
  margin-left:300px;
}

更多常用的贝塞尔曲线请参考这里：http://easings.net/zh-cn 如果你想自定义贝塞尔曲线，这里有个不错的在线工具：http://cubic-bezier.com

参考资料：https://isux.tencent.com/animation-factor.html

坑

1. margin-left失效

在一开始写上面那个例子的时候，我是这样写的

.demo {
  margin:0 auto;
  trasition: all 300ms  cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.demo-active {
  margin-left: 300px;
}

发现没有效果。 后来才发现是因为只写margin:0 auto的话其实margin-left值是undefined，undefined到300当然不能有动画了。 解决方案是把margin-left单独写

.demo {
  margin : 0 auto;
  margin-left: 50%;
}

参考资料：http://stackoverflow.com/questions/30587900/css-margin-left-transition-not-working

[xhlwill]

atuo 写错了

[youngwind]

@xhlwill 已更正。

[qixiaoo]

不是贝塞尔曲线吗？

[youngwind]

@code-bubble 笔误，已更正。

[hardfist]

@youngwind 目录那里还是写成了赛贝尔曲线