Nowadays, many pages have some animation effects. Appropriate animation effects can improve the beauty of the page to a certain extent, and animations with prompt effects can enhance the usability of the page.
There are two ways to implement page animation. One is to indirectly operate the CSS style by operating JavaScript and update every once in a while; the other is to directly define the animation through CSS. The second method was widely adopted after CSS3 matured. In this article, we discuss the principles and implementation of the first approach.
JavaScript animation implementation principleFirst of all, we need to know two important concepts, animation time process and animation effect process. The animation time process refers to the completion of the animation in terms of time, which is a number between [0, 1]. Assume that the animation starts at timestamp t1 and ends at
t2, and the current timestamp is
t, then the current time progress of the animation is
(t-t1)/(t2-t1). If you can't understand it, I suggest you draw it with pen and paper. Understanding this concept is crucial to understanding this article.
attribute value being animated. Suppose we want to change the CSS left attribute of the
#el<a href="http://www.php.cn/wiki/907.html" target="_blank"> element from </a>100px
to 200px
. It has already changed When it reaches 130px
, the current effect process of the animation is 130px - 100px = 30px
. Assume that the animation time process and animation effect process are both linear. So if you know the animation time process, you can definitely get the animation effect process.
According to this explanation, we can quickly write a linear animation.
(function() { var begin, // 开始动画的时间 el, start, end, duration; var INTERVAL = 13; function now() { return (new Date).getTime(); } /** * 执行一步动画(更新属性) */ function _animLeft() { var pos = (now() - begin) / duration; if (pos >= 1.0) { return false; } return !!(el.style.left = start + (end - start) * pos); } /** * 对一个DOM执行动画,left从_start到_end,执行时间为 * _duration毫秒。 * * @param {object} _el 要执行动画的DOM节点 * @param {integer} _start left的起始值 * @param {integer} _end left的最终值 * @param {integer} _duration 动画执行时间 */ function animLeft(_el, _start, _end, _duration) { stopped = false; begin = now(); el = _el; start = _start; end = _end; duration = _duration || 1000; var step = function() { if (_animLeft()) { setTimeout(step, INTERVAL); } }; setTimeout(step, 0); } window.animLeft = animLeft; })(); animLeft( document.getElementById('el'), 100, 200 )
JSBin
easing
As mentioned above, we know that controlling the time process of animation is equivalent to controlling the effect process of animation. As the time progresses in the real world, the time progress of the animation will follow, thereby controlling the effect progress of the animation. Then, we can control the animation process by modifying the mapping relationship between the real world time process and the animation time process. If you are confused, it doesn’t matter, please look at the picture below:
This is the mapping relationship between the real-world time process and the animation process in linear animation. Next, we transform it
This curve is actually the image of the
functiony = x * x. It can be seen that the definition domain and value range of the two curves have not changed. The slope of the curve is the speed of the animation. Next, we overlap the two pictures for comparison.
When the real world time reaches
x0, the animation process should originally proceed to y0
, after the transformation , only proceeds to y1
. In the end, all rivers return to the sea, and the two lines meet at point (1, 1). Here, y = x * x
is the easing function (easing function)
. Let’s modify the above example to make the animation non-linear.
function ease(time) { return time * time; } /** * 执行一步动画(更新属性) */ function _animLeft() { var pos = (now() - begin) / duration; if (pos >= 1.0) { return false; } pos = ease(pos); return !!(el.style.left = (start + (end - start) * pos) + "px"); }
JSBin
We can see such a function in the code of
jQuery. jQuery.easing = {
linear: function( p ) {
return p;
},
swing: function( p ) {
return 0.5 - Math.cos( p * Math.PI ) / 2;
}
};
jQuery.easing.myEasing = function( p ) { return ... }
Summary
The above is the detailed content of Detailed introduction to implementing JavaScript animations. For more information, please follow other related articles on the PHP Chinese website!