这是一个演示JavaScript计时器+单独图像方法的代码片段。
代码片段:
http://jsfiddle.net/ZVFu8/2/
基本思路是创建一个包含图像名称的数组。
var img_name_arr = [];
var img_name_root = "anim-";
var img_name_ext = ".gif";
var num_images = 12;
// init arr of img names assuming frames are named [root]+i+[extension]
for (i = 0; i<=num_images; i++) {
img_name_arr.push(img_name_root + i + img_name_ext);
}
关于动画,使用 setInterval()。在 JavaScript 中,间隔定期执行。您可以指定要执行的代码和应该运行代码的间隔(以毫秒为单位)。
每次调用间隔时,您可以通过将图像标记的“src”属性设置为 image_name 数组中的下一个索引来显示新图像。
anim_interval = setInterval(function() {
$("#player").attr("src", s + img_name_arr[(anim_frame++ % num_images)+1] );
}, frame_interval);
根据动画的长度和每个图像文件的大小,可能需要通过预加载这些图像来进行优化。在动画开始之前,您可以为每个图像创建一个img标签并将其隐藏。然后,您不会更改“src”属性以更改图像,而是实际上会隐藏当前图像并在先前图像的位置上取消隐藏下一个图像。
如果您希望在本地运行此代码,请使用以下完整代码:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a id="anim_control" href="">Start</a>
<img id="player" src="" />
<script>
var s = "http://" + atob("YmVucmlkb3V0LmNvbQ==") + "/";
var img_name_arr = [];
var img_name_root = "anim-";
var img_name_ext = ".gif";
var num_images = 12;
var framerate = 1;
var frame_interval = 1000/framerate;
$(function(){
for (i = 0; i <= num_images; i++) {
img_name_arr.push(img_name_root + i + img_name_ext);
}
var anim_interval = null;
var playing = false;
var anim_frame = 0;
$("#anim_control").on("click", function(e) {
e.preventDefault();
if (playing == true) {
playing = false;
$(this).html("Start");
clearInterval(anim_interval);
} else {
playing = true;
$(this).html("Stop");
anim_interval = setInterval(function() {
$("#player").attr("src", s + img_name_arr[(anim_frame++ % num_images)+1] );
}, frame_interval);
}
});
});
</script>
<style>
#player {
width: 320px;
height: 240px;
border: 1px solid #000;
}
</style>