[Ctrl+A to select all Note: If you need to introduce external Js, you need to refresh to execute]
Use window.setInterval animation function, every 10 milliseconds The animation will be executed once; and set are matched with the clearInterval function, which is used to end the animation. Every setInterval will return a value similar to the thread id; var interval =setInterval(function(){ element.style.left =parseFloat(element.style.left) +(n) + 'px'; },10); Use clearInterval (interval) to end animation playback. interval = setInterval(function(){ if(parseFloat(element.style.left) >500) clearInterval(interval) element.style.left =parseFloat(element.style.left) +2 +'px'; },10); When it exceeds 500px, the animation will will stop and the element will no longer move.
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute]
But the above animation is relatively stiff, and then we There is another kind of timeline animation. Look at the example: var element = document.getElementById('test1'); var start = +new Date,dur=1000,finish = start+dur; interval = setInterval(function( ){ var time = +new Date, pos = time > finish ? 1 : (time-start)/dur; element.style.left = (100*pos)+"px" ; if(time>finish) { clearInterval(interval); } },10); start is the start time of the target animation ( +new Date is actually new Date( ).getTime() ) dur is the total time required for animation execution finish is the end time of the target animation pos = time > finish ? 1 : (time-start)/dur; // You can think of pos as frequency, a time ratio (100*pos), 100 represents the distance, if the distance is 500px, set it to 500*pos; time>finish: If it exceeds the time, stop the animation!
[Ctrl+A to select all Note: If you need to introduce external Js, you need to refresh to execute]
Very good, we already know a simple animation here How to write the effect. Let’s look at how to write a small complete animation component:
var parse = function(prop){ var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,''); return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; } var p = parseFloat(prop) 意思是 : 500px => 500; q = prop.replace(/^[-d.]+/,''); 500px => px; return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; 意思是 如果取的是颜色值(因为带有#号)，返回{ v: q, f: color, u: ''} u 代表代为,f是一个color函数(后面会讲到); var s = function(str, p, c){ return str.substr(p,c||1); }
The s function is used to intercept the string and return the final result. The color function uniformly returns the color value in the form of "rgb(x,x,x)". The normalize function returns a json object. , the object contains the name and value of the css attribute to be executed by the element while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v); Tear apart a line of code and see how it works while(i--){ //A = sign is used here, and the assignment operation is performed first. If it does not exist, the if will not pass, killing two birds with one stone: ) if(v = css[props[i]]){ rules[props[i]] = parse(v); //Assign to new object, } } In the interpolate function, return (source+(target-source)*pos).toFixed(3); toFixed is to solve the decimal problem, such as 0.000000001; will become 1e-9; which is not the result we want, pass toFixed can be solved, toFixed (n), where n represents the number of decimal places to retain el.currentStyle? el.currentStyle: getComputedStyle(el, null); This is actually compatible with multiple browsers, one line of code to get the element Specific reference: JS gets the final style [getStyle] Flower’s 4 parameters el target object, style is the final style, opts, is the parameter options including (dur time, easing function, callbak run after the end), The fourth after is the last callbak executed; opts.easing can use various easing algorithms to change the motion state of elements; such as
This actually makes the internal function free and exposes an interface only through this call. Otherwise, external functions cannot access the flower in anonymous correspondence; Look at the calling example : )
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
