JS中利用定时器实现帧动画

一叶子苹果

已于 2023-03-08 20:01:48 修改

阅读量446

点赞数

文章标签： html 前端 Powered by 金山文档

于 2023-03-08 19:50:13 首次发布

本文链接：https://blog.csdn.net/qq_51278252/article/details/129409234

版权

简介：

在js中可以利用定时器实现简单的帧动画播放，类似于一种电影效果通过缩短多张图片转换的时间间隔，达到一种动画效果，本案例实现的是三组图片不同的切换。

定时器介绍：

以setInterval（function（），100）为例，function（）是一个匿名函数，在里面可以添加具体的操作内容，在本案例中帧动画的图片切换就是在它里面完成的。100是图片切换的时间间隔，以毫秒（ms）为单位。注意：function（）和100之间用逗号隔开。

代码案例：

首先把每一组动画理解为一个对象，每个对象都有名字和图片数量两个元素，在将这些对象全部存入数组中。每一个按钮点击时传递的参数对应的都是数组中的元素下标，index会接收参数，arr[index]会根据下标index找到相应的元素，并将其赋值给obj，obj会再根据关键字name和count找到文件名name和图片数量count。

<body>
        <!--图片路径 -->
        <img src="img/eat/eat_0.jpg" id="img" width="200px">
        <!-- onclick调用函数并传参-->
        <button type="button" onclick="start(0)">扔</button>
        <button type="button" onclick="start(1)">吃</button>
        <button type="button" onclick="start(2)">敲</button>
        
        <script type="text/javascript">
            //创建数组，分别存储图片文件夹名和图片数量
            var arr = [
                {name: "pie", count: 24},  //扔的对象
                {name: "eat", count: 40},
                {name: "cymbal", count: 13}
            ];
            
            var t = null;
            function start(index){
                var obj = arr[index];  // 定义一个变量obj，接收数组元素
                /* 进行判断，如果t为null，则可以继续进行下一步，反之则不行
                    目的是防止按钮被连续点击时，函数被重复调用，图片播放混乱
                 */
                if (t == null){
                    var i = 1;
                    // 创建定时器
                    t = setInterval( function (){
                        // 改变图片路径
                        img.src = "img/" + obj.name + "/" + obj.name + "_" + i + ".jpg";
                        i++;
                        /* 一组图片播放完后清除定时器
                            并让t值为空
                         */
                        if( i == obj.count){
                            clearInterval(t);
                            t = null;
                        }
                    } , 100);
                }
            }
        </script>
    </body>