简介:
在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>