Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.