How to realize the retarding effect of html5
This article mainly introduces "how to achieve html5 ease effect". In daily operation, I believe many people have doubts about how to achieve html5 ease effect. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve html5 ease effect". Next, please follow the editor to study!
Ease type:
Linear: no moderation effect
Quadratic: ease of quadratic power (t ^ 2)
Cubic: the ease of the cubic power (t ^ 3)
Quartic: the ease of the fourth power (t ^ 4)
Quintic: the ease of the fifth power (t ^ 5)
Sinusoidal: ease of sine curve (sin (t))
Exponential: ease of exponential curve (2 ^ t)
Circular: ease of circular curves (sqrt (1-t ^ 2))
Elastic: sinusoidal relaxation with exponential decay
Cubic retardation beyond the range ((slugg1) t ^ 3-st ^ 2)
Rebound retardation of exponential decay
There are three ways to ease each type:
EaseIn: slow first and then fast
EaseOut: first fast and then slow
EaseInOut: first slow, then fast, then slow
Encapsulated ease function:
/ / Tween.js
/ / t: current time (current time)
/ / b: beginning value (initial value)
/ / c: change in value (variation)
/ / d: duration (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) * (tmer2) + b
}
EaseInOut: function (t, b, c, d) {
If ((t / = d / 2) < 1) return c / 2 * t * t + b
Return-c / 2 * ((--t) * (tMel 2)-1) + b
}
}
At this point, the study on "how to achieve the slow effect of html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
