zoukankan      html  css  js  c++  java
  • 使用window.requestAnimationFrame制作动画

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>使用window.requestAnimationFrame制作动画</title>
        <style type="text/css">
            .m-test{ 100px;height: 100px;background-color: red;}
        </style>
    </head>
    
    <body>
        <div class="m-test" id="m-test"></div>
        <script type="text/javascript">
        var start = null;
        var element = document.getElementById('m-test');
        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);
        </script>
    </body>
    
    </html>
  • 相关阅读:
    线程
    进程2
    进程
    socketserver
    黏包
    初始网络编程
    模块
    super
    mro c3算法
    日志固定格式
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924804.html
Copyright © 2011-2022 走看看