css弹性动画

通过css让生硬的动画变得更加自然

下面我们会通过javaScript和css分别实现

效果图：

我们知道没一个物体运动都有一个运动轨迹，例如上面的小球是模拟的弹簧运动从而让动画更加自然，而上图的运动轨迹图

如下： （easeOutElastic）

我们就可以根据这个动画曲线得到他每个时间点的位置就形成了动画

常用的运动曲线

https://easings.net/ 好像是要安全上网才可以访问

我们随便点击一个（easeOutElastic）进去

注意：参数x表示运行的进度

我们会得到这样的一个公式，我们就可以通过这个公式加上scss完成一个动画

源码

ps：安装scss和mathsass（sass扩展函数这样就可以支持pow和sin这样类似的函数），vue-cli

解析：

在sass中

• $代表变量，
• #{}代表里面是表达式
• @for $i from 0 through 100 循环
• transform: translate3d(elasticAniFn($i / 100), 0, 0); 这个是移动的位置，使用translate3d:防止回流,重绘

JS的实现方法

https://github.com/zhangxinxu/Tween

 各大动画的js代码

解析

requestAnimationFrame：他会根据当前浏览器的最适合的帧率（时间点去完成动画），就是上一个动画完成下一个动画就会跟上。因为requestAnimationFrame和跟setTimeout非常类似，他们在js的任务队列的执行方式都是上一个队列执行完，才执行下一个，也就是上一个帧执行完才执行下一个，保证动画的连续性 具体区别：js的执行阶段

效果：

• https://cubic-bezier.com/#.1,.68,.17,.85 网址关于贝塞尔曲线设置的网址，创建一些自定义的动画函数(cubic-bezier(n,n,n,n))
•  http://jeremyckahn.github.io/stylie/ 网址可以直接导出代码