html5缓动效果怎么实现

这篇文章主要介绍“html5缓动效果怎么实现”，在日常操作中，相信很多人在html5缓动效果怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5缓动效果怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　缓动类型：

　　Linear：无缓动效果

　　Quadratic：二次方的缓动(t^2)

　　Cubic：三次方的缓动(t^3)

　　Quartic：四次方的缓动(t^4)

　　Quintic：五次方的缓动(t^5)

　　Sinusoidal：正弦曲线的缓动(sin(t))

　　Exponential：指数曲线的缓动(2^t)

　　Circular：圆形曲线的缓动(sqrt(1-t^2))

　　Elastic：指数衰减的正弦曲线缓动

　　超过范围的三次方缓动((s+1)t^3 – st^2)

　　指数衰减的反弹缓动

　　每种类型都有三种缓动方式：

　　easeIn：先慢后快

　　easeOut：先快后慢

　　easeInOut：先慢后快然后再慢

　　封装的缓动函数：

　　//Tween.js

　　//t: current time(当前时间)；

　　//b: beginning value(初始值)；

　　//c: change in value(变化量)；

　　// d: duration(持续时间)。

　　//you can visit '' to get effect

　　var Tween = {

　　Linear: function(t, b, c, d) { return c*t/d + b; },

　　Quad: {

　　easeIn: function(t, b, c, d) {

　　return c * (t /= d) * t + b;

　　},

　　easeOut: function(t, b, c, d) {

　　return -c *(t /= d)*(t-2) + b;

　　},

　　easeInOut: function(t, b, c, d) {

　　if ((t /= d / 2) < 1) return c / 2 * t * t + b;

　　return -c / 2 * ((--t) * (t-2) - 1) + b;

　　}

　　}

到此，关于“html5缓动效果怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！