How to realize uniform Animation effect with javascript
Editor to share with you how javascript to achieve uniform animation effects, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
The idea of realization is:
1. The timing function setInterval () is mainly used to realize the animation effect.
2. You can encapsulate the animation into a function, so that it can be called by multiple elements without having to repeat it.
3. Animation function receives parameters-element object, target offset, callback function
Add a timing function to the ① function, give the timing function a name, and then clear the timing function to use the timing function name
The handler in the ② timing function:
a. Set the offset of the element object to change uniformly with a fixed value of movement per step---eg: obj.style.left = obj.offsetLeft + 5 + 'px'
b. Determine whether the offset reaches the target value, and if so, stop the animation.
ClearInterval (obj.timer)
And judge whether there is a callback function when the animation stops, and execute the callback function if there is a callback function.
4. Add a clear timer function at the front of the animation function to clear the previous animation influence-clearInterval (obj.timer)
Sometimes you need to click the button, trigger the animation, if you don't add a clear, click the button repeatedly, the animation effect will be superimposed, faster and faster.
5. Animation functions can also be encapsulated in js files for reference.
Tip: the above is just a method, different animation effects according to the need to adjust the implementation method
Code example: uniform animation .box {position: relative; width: 1000px; margin-top: 20px;} .xiaohuli {position: absolute; top: 0; left: 0; width: 150px; height: 150px } .pikaqiu {position: absolute; top: 150px; left: 0; width: 200px; height: 150px;} Click Mobile Fox Click Mobile Pikachu
Var btn1 = document.querySelector ('.btn1'); var btn2 = document.querySelector ('.btn2'); var xiaohuli = document.querySelector ('.xiaohuli'); var pikaqiu = document.querySelector ('.pikaqiu'); btn1.addEventListener ('click', function () {animate (xiaohuli, 300);}) btn2.addEventListener (' click', function () {animate (pikaqiu) }) / / Animation function obj animation object, target target left offset, callback callback function function animate (obj, target, callback) {clearInterval (obj.timer); obj.timer = setInterval (function () {obj.style.left = obj.offsetLeft + 5 + 'px') If (obj.offsetLeft > = target) {/ / stop animation clearInterval (obj.timer); / / if there is a callback function, execute the callback function if (callback) {callback () }, 30);}
Page effect:
These are all the contents of the article "how to achieve uniform Animation in javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
