Javascript TweenMax 缺失帧

Question

我在使用 TweenMax 插件显示动画 png 序列时遇到了一些问题。

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script >var imgIndex={i:1}, I=0 , img=document.getElementById('myImg');
var imgSrc = "{{ asset('img/animation/v5/anim/Comp 2_00') }}";

TweenMax.to(imgIndex,5,{i:299,roundProps:'i',repeat:-1,repeatDelay:1,ease:Linear.easeNone,onUpdate:function(){
    var num = '00';
    if(I!==imgIndex.i){
        if(I<9) num = '00'+imgIndex.i;
        else if(I<99) num = '0'+imgIndex.i
        else num = imgIndex.i
        img.setAttribute("src", imgSrc+num+'.png');
        I=imgIndex.i;
        console.log(imgSrc+num+'.png');
    };
}});


//# sourceURL=pen.js
</script>

第一个问题是有时某些框架的名称错误，因此无法正确加载。如您所见，我已经使用 console.log() 进行了调试测试，以查看正在加载哪些图像：

http://g8pool/img/animation/v5/anim/Comp 2_002.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00003.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00006.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00007.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00008.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00009.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00010.png

第2帧名字错了，所以没有加载，这里再举个例子

http://g8pool/img/animation/v5/anim/Comp 2_003.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00005.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00007.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_000010.png

这里第3帧和第10帧的名字是错误的，但是我第一个例子中的第10帧是正确的。为什么会这样？

第二个问题是console.log()没有输出从0到299的每一帧。这是否意味着TweenMax png序列会闪烁？

多谢指教！

Answer 1

问题出在 imgIndex 是一个数组，并且没有保存与 I 相同的图像编号。

这是工作代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script >var imgIndex={i:1}, I=0 , img=document.getElementById('myImg');
var imgSrc = "{{ asset('img/animation/v5/anim/Comp 2_00') }}";

TweenMax.to(imgIndex,12,{i:299,roundProps:'i',repeat:-1,repeatDelay:0,ease:Linear.easeNone,onUpdate:function(){
    var num = '00';
    if(I!==imgIndex.i){
        if(I<10) num = '00'+I;
        else if(I<100 && I>9) num = '0'+I
        else num = I
        img.setAttribute("src", imgSrc+num+'.png');
        I=imgIndex.i;
    };
}});

//# sourceURL=pen.js
</script>

Javascript TweenMax 缺失帧

Javascript TweenMax missing frames

javascript

animation

gsap