zoukankan      html  css  js  c++  java
  • H5动画

    1.参考:http://blog.csdn.net/whqet/article/details/42911059?readlog

    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

    //兼容性处理
    (function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz', '-o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
    window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function() {
    callback();
    },
    timeToCall);
    lastTime = currTime + timeToCall;
    return id;
    };

    if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
    };
    })();


    //业务代码
    (function() {
    var degrees = 0;
    var div1 = document.getElementById("div1");

    function update() {
    div1.style.transform = "rotate(" + (degrees++) + "deg)";
    requestAnimationFrame(update);
    }
    requestAnimationFrame(update);

    var deg = 0;
    var id;
    var div2 = document.getElementById("div2");
    div2.addEventListener('click', function() {
    var self = this;
    requestAnimationFrame(function change() {
    console.log(deg);
    self.style.transform = 'rotate(' + (deg++) + 'deg)';
    id = requestAnimationFrame(change);
    });
    });
    document.getElementById('stop').onclick = function() {
    cancelAnimationFrame(id);
    };

    })();

  • 相关阅读:
    yii 验证码功能的实现
    关于php优化 你必须知道的一些事情
    php实现两分法查找
    Python封装的访问MySQL数据库的类及DEMO
    新学习的Python的代码(while循环)
    基于位运算符的IP和数值转换
    JS数组操作常用方法
    JS输出日历
    PHP程序输出日历
    PHP中计算时间差(上周,上月,去年,昨天等)
  • 原文地址:https://www.cnblogs.com/itdev/p/7791845.html
Copyright © 2011-2022 走看看