美文网首页
动画的循环

动画的循环

作者: 洛洛kkkkkk | 来源:发表于2017-04-20 19:30 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #kk{
                box-shadow: 0 0 10px 0 sandybrown;
            }
        </style>
    </head>
    <body>
        <canvas id="kk" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("kk");
        var context = myCanvas.getContext("2d");
        
        var num = 0 ;
//      setInterval(function () {
//          num++;
//          console.log(num);
//      },30)
        //fps = 1000/30
        //每隔30MS必须执行下一次,不管上一次是否执行完成
        //不在浏览时,FPS会变缓
        
        
        //递归函数:函数里面调用自己
//      function animate () {
//          num++;
//          console.log(num);
//          if(num>1000){
//              return;
//          }
//          setTimeout(animate,30);
//      }
//      animate();

        function animate () {
            num++;
            console.log(num);
            if(num>1000){
                return;
            }
            window.requestAnimationFrame(animate);
        }
        animate();
        //切换到别的,循环停止
        
        
    </script>
</html>

相关文章

  • 动画的循环

  • 图形化编程《循环:迈步动画》教学设计

    图形化编程《循环:迈步动画》教学设计 教学内容:图形化编程《循环:迈步动画》 教学目标: 理解程序的循环结构; 使...

  • 2021-10-09

    图形化编程《循环:迈步动画》教学设计 教学内容:图形化编程《循环:迈步动画》 教学目标: 理解程序的循环结构; 使...

  • For循环线程与JQ动画结合的问题

    For循环线程与JQ动画结合的问题前言:最近做了一组数字翻滚动画,期间采用jq的animate动画和for循环,对...

  • 技能179-循环动画简单,但切换总要点两次咋办-布衣公子

    使用PPT制作的动画作品中,常会用到各种小的循环动画(如漂浮效果、星光闪烁和心跳效果等),这些PPT循环动画是如何...

  • 15-Jquery动画

    animate({宽高}) 动画 swing 动画效果 linear 匀速动画 可以运用回调函数 循环: eac...

  • 实现一个秒针效果

    分别设置动画名称、动画持续时间、动画播放函数、动画循环、旋转基准点 .item{ background: blac...

  • jQuery动画、循环

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • canvas 动画循环

    动画循环 动画的绘制就是一个重复的过程,其原理就是重复的绘制和清除,就如同下面这张图形 1、循环的方式 主要有三种...

  • 随记

    //是横向大小不同的瀑布流动画 搜索动画时有很多侧边栏的效果 无限循环滚动卡片动画-CyclicCardhttp:...

网友评论

      本文标题:动画的循环

      本文链接:https://www.haomeiwen.com/subject/tfalzttx.html