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

第二帧名称错误，因此未加载，但这是另一个示例

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是一个数组，与我的图像号不同。

这是工作代码：

<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缺少框架

1 个答案: