Javascript TweenMax недостающие кадры - PullRequest
Новая
       12

Javascript TweenMax недостающие кадры

0 голосов
/ 27 августа 2018

У меня есть некоторые проблемы с плагином 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. Означает ли это, что последовательность TngMax png будет мигать?

Спасибо за совет!

1 Ответ

0 голосов
/ 27 августа 2018

Проблема была в том, что 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>
...