|
分享一个网上看到的TweenMax逐帧动画小demo
地址：http://contactu.cn/2015/test_frame/
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>测试逐帧动画</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/gsap/latest/TweenMax.min.js"></script>
<script>
$(function(){
var images = [
"http://contactu.cn/2015/test_frame/img/example_imagesequence_01.png",
"http://contactu.cn/2015/test_frame/img/example_imagesequence_02.png",
"http://contactu.cn/2015/test_frame/img/example_imagesequence_03.png",
"http://contactu.cn/2015/test_frame/img/example_imagesequence_04.png",
"http://contactu.cn/2015/test_frame/img/example_imagesequence_05.png",
"http://contactu.cn/2015/test_frame/img/example_imagesequence_06.png",
"http://contactu.cn/2015/test_frame/img/example_imagesequence_07.png"
];
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};
TweenMax.to(obj, 0.5,
{
curImg: images.length - 1, // 以图片数为目标值
roundProps: "curImg", // 仅产生整数
repeat: -1, // 循环次数，-1为反复循环
immediateRender: true, // 首张图片自动渲染
ease: Linear.easeNone, // 无缓动
onUpdate: function () {
$("#myimg").attr("src", images[obj.curImg]); // 改变图片src属性
}
}
);
});
</script>
</head>
<body style="text-align: center;">
<img id="myimg" style="margin: auto;" src="http://contactu.cn/2015/test_frame/img/example_imagesequence_01.png">
</body>
</html>
|