JS动画 easeOut, easeIn

第一次接触动画, 动画有很多种类型, 线形, 先快后慢, 先慢后快, 弹球...类似的. 要想知道各种类型的效果可以参考:

http://api.jqueryui.com/easings/

可以选择这么多种动画:

点击Start The Race就可以对比各个动画的效果了.

其实要实现动画也非常简单, 比如easeExpoOut (先快后慢) 就是高中所学的指数函数

  • return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);

画出来就是这个效果, x取值范围是0-1, y也是0-1.

如果想前面更快, 可以自己调整pow(2, 将2变成10, 或更大, 这个曲线就会更陡峭