AOS.init({
disable: mobile });
disable: window.innerWidth < 1024
disable: function () { var maxWidth = 1024; return window.innerWidth < maxWidth;
}
你可能不明白为什么过渡和动画在这篇文章中分成了不同的部分,让我解释一下,虽然它们很相似,但也有不同的地方。过渡就是从一个状态向另一个状态插入值。我们可以做很多复杂的事情,但是很简单。从起始状态,到结束状态,再回来。
动画有点不同,你可以在一个声明中设置多个状态。比如,你可以在动画 50% 的位置设置一个关键帧,然后在 70% 的位置设置一个完全不同的状态,等等。你可以通过设置延迟属性实现很复杂的运动。动画也可以实现过渡的功能,只需要从头到尾插入状态,但是过渡无法像动画一样插入多个值。
主要包含了:
-
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:指数衰减的正弦曲线缓动;
-
Back:超过范围的三次方缓动((s+1)*t^3 – s*t^2);
-
Bounce:指数衰减的反弹缓动。