Mobile end animation --requestAnimationFrame

window.requestAnimationFrame() Tells the browser - you want to do a movie, and requires the browser calls the specified callback function updates the animation before the next redraw. The execution method need to pass a callback function as an argument before the callback function will redraw once in the browser

Note: If you want to continue to update the next frame animation before the next redraw browser, then the callback function itself must be called againwindow.requestAnimationFrame()

When you're ready to update the animation you should call this method. This will cause the browser to call you pass to the method of animation function (ie, your callback function) before the next redraw the next. Callback number of executions are usually 60 times per second, but in most browsers follow the W3C recommendations, the callback number of executions generally refresh frequency to match the browser screen. In order to improve performance and battery life, so in most browsers, when requestAnimationFrame() running in the background tab or hidden <iframe> in time, requestAnimationFrame() be suspended calls to improve performance and battery life.

The callback function will be passed DOMHighResTimeStampparameter DOMHighResTimeStampindicates the current is requestAnimationFrame() time to sort callback function is triggered. In the same frame, a plurality of callback functions, each of them will receive a same time stamp, even during operation of the load on a calculation of the callback function has been consumed for some time. The timestamp is a decimal number, in milliseconds, the minimum accuracy of 1ms (1000μs).

语法：window.requestAnimationFrame(callback);

参数：callbackUpdate function (ie, the above mentioned callback function) animation frames invoked before the next redraw. The callback function is passed the DOMHighResTimeStampargument that the performance.now()same return value, which indicates requestAnimationFrame() the beginning of time to perform the callback function.

Returns: an long integer, the request ID, callback list unique identifier. Is a non-zero value, no other meaning. You can pass this value to window.cancelAnimationFrame() to cancel the callback function.

Example 1:

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

Example Two:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>2.2 移动端动画</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /*position: absolute;
            transition: left margin-left 1s;*/
            /*transition: transform 1s;*/
        }
    </style>
</head>
<body>
    <button id="btn">start</button>
    <div id="box" class="box"></div>

    <script>
        // var boxEl = document.getElementById('box'),
        //     btnEl = document.getElementById('btn');
        // var dest = window.innerWidth - 100;

        // btnEl.addEventListener('click', function () {
        //     move(boxEl, dest);
        // }, false);

        // function move(el, position) {
        //     el.style.transform = 'translate3d(' + position +'px, 0, 0)';
        // }

        var requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            function (fn) {
                setTimeout(fn, 16);
            };
        var boxEl = document.getElementById('box'),
            btnEl = document.getElementById('btn');
        var dest = window.innerWidth - 100,
            speed = 10,
            position = 0;

        btnEl.addEventListener('click', function () {
            requestAnimationFrame(step);
        }, false);

        function move(el, position) {
            el.style.transform = 'translate3d(' + position +'px, 0, 0)';
        }

        function step() {
            if (position < dest) {
                position += speed;
                move(boxEl, position);
                requestAnimationFrame(step);
            } else {
                position = dest;
                move(boxEl, position);
            }
        }

    </script>
</body>
</html>

Js achieve the best animation is requestAnimationFrame:

requestAnimationFrame than setTimeout, setInterval there are two main advantages:
1, all DOM operations in each frame will requestAnimationFrame together to complete or return in a redrawn, and redrawn or return time interval immediately follows browser refresh rate, in general, the frequency of 60 frames per second.
2, hidden or invisible elements, requestAnimationFrame will not be redrawn or reflux, which of course means less of the cpu, gpu and memory usage.

Example Three:

var dis =0;
function animation(){
  requestAnimationFrame(function(){
      div.style.left = ++dis;
      if(disx<50) animation();
  })  
}
animation();

Mobile end animation --requestAnimationFrame

Guess you like