使用GSAP TimelineMax时遇到问题

时间：2018-09-17 11:41:12

标签： animation svg gsap tweenmax

我正在尝试使用GSAP的功能，但是我不知道如何使用时间表，我是所有这些的新手，将不胜感激。

我要在代码中尝试做的事情-每次v形银色svg从其初始位置向后平移，文本就会更改为另一个文本，类似的情况会再次发生。

这是我的代码笔链接： https://codepen.io/goprime/pen/VGEYeZ

和代码：

HTML：

<div class="we3dx-content">


                    <svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="354.38 38.613 1134.424 968.338" width="1134.424" height="968.338">  
                        <g><path d=" M 822 104 L 1025 475 L 909 714" fill="none" vector-effect="non-scaling-stroke" stroke-width="5" stroke="rgb(185,185,185)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>


                        <rect x="510.697" y="42.215" width="820.272" height="963.909" transform="matrix(1,0,0,1,0,0)" fill="rgb(205,206,190)"/>
                        <rect x="510.697" y="445.327" width="382.189" height="200.673" transform="matrix(1,0,0,1,0,0)" fill="rgb(205,206,190)"/>

                        <g style="opacity:0.5;"><g opacity="0.5"><path d=" M 1202.79 163.563 L 894.504 783.653 L 1003.494 783.653 L 1327.35 159.571 L 1202.79 163.563 Z" fill="rgb(255,255,255)"/></g></g><g opacity="0.8"><path d=" M 1335.92 696.887 C 1335.92 696.224 1335.953 695.567 1336 694.914 L 1011.666 40 L 819.767 40 L 1322.143 1008.338 L 1335.92 1008.338 L 1335.92 696.887 Z " fill="rgb(255,255,255)"/></g>

                        <g class="we3dx-block-1"><g transform="matrix(1,0,0,1,612.348,109.701)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">HEALTH &amp; PHARMA</text></g><g transform="matrix(1,0,0,1,611.348,364.701)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">CONSUMER PRODUCTS &amp; RETAIL</text></g><g transform="matrix(1,0,0,1,611.348,173.201)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">BANKING &amp; FINANCE</text></g><g transform="matrix(1,0,0,1,611.348,236.759)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">MEDIA &amp; ENTERTAINMENT</text></g><g transform="matrix(1,0,0,1,611.348,299.702)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">SOFTWARES &amp; UTILITIES</text></g></g>


                        <g opacity="0.5">
                        </g>

                        <g>



                        <g id="we3dx-block-2"><g><text transform="matrix(1,0,0,1,0,172.2)" style="font-family:'Raleway';font-weight:400;font-size:75px;font-style:normal;fill:#000000;stroke:none;">VISUAL</text></g><g transform="matrix(1,0,0,1,462.91,480.256)"><text transform="matrix(1,0,0,1,0,70.5)" style="font-family:'Raleway';font-weight:400;font-size:75px;font-style:normal;fill:#000000;stroke:none;">BRANDING</text></g><g transform="matrix(1,0,0,1,920.501,588.884)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">MARKETING</text></g><g transform="matrix(1,0,0,1,920.5,504.507)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">DIGITAL</text></g><g transform="matrix(1,0,0,1,920.501,314.552)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">MANAGEMENT</text></g><g transform="matrix(1,0,0,1,920.502,405.798)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">CONSULTANTS</text></g></g>

                        <g class="we3dx-block-1"><g transform="matrix(1,0,0,1,736.227,443.71)"><text transform="matrix(1,0,0,1,0,172.2)" style="font-family:'Raleway';font-weight:400;font-size:175px;font-style:normal;fill:#000000;stroke:none;">IT</text></g><g transform="matrix(1,0,0,1,354.846,482.347)"><text transform="matrix(1,0,0,1,0.06,59.04)" style="font-family:'Raleway';font-weight:400;font-size:60px;font-style:normal;fill:#000000;stroke:none;">CONSULTANCY</text></g><g transform="matrix(1,0,0,1,354.846,558.428)"><text transform="matrix(1,0,0,1,0,59.04)" style="font-family:'Raleway';font-weight:400;font-size:60px;font-style:normal;fill:#000000;stroke:none;">OUTSOURCING</text></g></g>

                        <g id="we3dx-block-3"><g transform="matrix(1,0,0,1,543.707,366.635)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">RAPID /</text></g><g transform="matrix(1,0,0,1,543.707,456.635)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">PROTOTYPE</text></g><g transform="matrix(1,0,0,1,543.706,559.686)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">3D - PRINT</text></g><g><g transform="matrix(1,0,0,1,1089,333)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">FDM</text></g><g transform="matrix(1,0,0,1,1089,424.054)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">SLA</text></g><g transform="matrix(1,0,0,1,1089,517.14)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">SLS</text></g><g transform="matrix(1,0,0,1,1089,611.121)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">CNC</text></g></g></g>



                        <rect id="we3dx-big-right" x="514" y="449" height="200" width="450" fill="rgb(205,206,190)">
                        </g>

                        <rect id="we3dxbox-topright" transform="rotate(-26)" width="700.697" height="800" x="28" y="80" fill="rgb(205,206,190)"/>
                        <path id="bar-we3dx" d=" M 912.482 701.99 L 1020.772 476.554 L 826.228 104" fill="none" vector-effect="non-scaling-stroke" stroke-width="7" stroke="rgb(165,165,160)" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="10"/>

                        <!-- Top right box -->
                        <rect id="we3dx-small-left" x="354.846" y="449.663" width="155" height="200.673" transform="matrix(1,0,0,1,0,0)" fill="red"/>
                        <rect x="169" y="37.215" width="346.697" height="967.123" transform="matrix(1,0,0,1,0,0)" fill="rgb(242,242,242)" />


                    </svg>

                </div>

CSS：

#we3dx-block-2{
  opacity:0;
}

#we3dx-block-3{
  opacity:0;
  transform:translateX(-15%);
}

JS：

we3dxAnimation();


function we3dxAnimation(){

      var box = document.querySelector("#we3dx-big-right");
      var bar = document.querySelector("#bar-we3dx");
      var topBox =document.querySelector("#we3dxbox-topright");

      var txt = document.querySelectorAll(".we3dx-block-1");
      var txt2 = document.querySelector("#we3dx-block-2");
      var txt3 =  document.querySelector("#we3dx-block-3");
      var box2 = document.querySelector("#we3dx-small-left");

        tween = TweenMax.to(bar, 3,{ transform:"translateX(-510px)", repeat:10, yoyo:true, repeatDelay:1.7, ease:Linear.easeNone });
        tween = TweenMax.to(topBox, 3.2,{width: "0", repeat:10 ,yoyo:true,delay:0.2, repeatDelay:1.5, ease:Linear.easeNone});

        tween = TweenMax.to(box, 2, {width:"0", repeat:10, yoyo:true,delay:0.5, repeatDelay:2.7, ease:Linear.easeNone});
        tween = TweenMax.to(box2, 3,{ width:"0", repeat:10, yoyo:true, delay:0.9, repeatDelay:1.7, ease:Linear.easeNone });


      var animation = new TimelineMax({repeat:10});

      animation.add(t);

      animation.add(TweenLite.to(txt2, 1, {opacity:"1", repeat:10, delay:8, yoyo:true, ease:Linear.easeNone}));
      animation.add(TweenLite.to(txt2, 1, {opacity:"0", repeat:10, delay:8.1, yoyo:true, ease:Linear.easeNone}));
      animation.add(TweenLite.to(txt3, 1, {opacity:"1", repeat:10, delay:0.5, yoyo:true, ease:Linear.easeNone}));
      animation.add(TweenLite.to(txt3, 1, {opacity:"0", repeat:10, delay:6, yoyo:true, ease:Linear.easeNone}));

      function t(){
        for(let r=0; r<=1; r++){
          tween = TweenLite.to(txt[r], 1, {opacity:"0", repeat:10, yoyo:true, delay:7.5, ease:Linear.easeNone});
          tween = TweenLite.to(txt[r], 1, {opacity:"1", repeat:10, yoyo:true, delay:28, ease:Linear.easeNone});
        }
      }
}

现在它可以在第一次迭代中很好地工作，但是一旦动画重新启动，时间就会被打乱，我只是无法弄清楚我在做什么错，希望我能够解释这个问题，在此先感谢希望你们有美好的一天！

1 个答案:

答案 0 :(得分：0)

如果不将所有动画放在时间轴中，则将无法同步所有内容。 我认为您使用了太多不同的补间。 另外，您有时使用笔译，有时使用宽度来显示文本。

我将其更改为

x:"-=510"

我叉了你的笔。 您只需在我评论的位置//更改文字即可//更改文字

Codepen

此外，我认为您可以从改进的SVG中受益。

无论如何，让我知道是否有一些不清楚的地方，我经常使用TimelineMax做复杂的SVG动画，我应该能够提供帮助。

相关问题
最新问题