Javascript jQuery.animate（）切换到GSAP TweenMax_Javascript_Jquery Animate_Gsap

Javascript jQuery.animate（）切换到GSAP TweenMax

javascript

Javascript jQuery.animate（）切换到GSAP TweenMax,javascript,jquery-animate,gsap,Javascript,Jquery Animate,Gsap,我正在做一个项目，以不同的速度快速连续地为单个单词制作动画。我使用jQuery的.animate（）和回调创建了一些快速而肮脏的东西你可以在这里看到一个例子和下面的代码（相当大）我想知道如何将此转换为使用GSAP。下面是我目前正在做的工作，以替代jQuery的.animate（），该版本的代码笔是：正如您所看到的，我的GSAP版本不能像我的QuickjQuery版本那样正常工作你也可以在我巨大的可怕的jQuery文件中看到，我可以很容易地修改每帧的速度，这非常重要，所以我也需要能够在GS

我正在做一个项目，以不同的速度快速连续地为单个单词制作动画。我使用jQuery的

.animate（）

和回调创建了一些快速而肮脏的东西

你可以在这里看到一个例子和下面的代码（相当大）

我想知道如何将此转换为使用GSAP。下面是我目前正在做的工作，以替代jQuery的

.animate（）

，该版本的代码笔是：

正如您所看到的，我的GSAP版本不能像我的QuickjQuery版本那样正常工作

你也可以在我巨大的可怕的jQuery文件中看到，我可以很容易地修改每帧的速度，这非常重要，所以我也需要能够在GSAP版本中做到这一点

我怎么能这样做

HTML:

首先，请阅读我的一个答案，如果您以前没有听说或尝试过GSAP，请首先阅读该答案，其中包含大量链接

第二，你的代码笔在Chrome for me（45+，Macbook Pro）中不起作用，但在Firefox中起作用。我不太清楚原因是什么，但我想是关于安全的

无论如何，由于回调循环中的回调，您的jQuery的

animate（）

调用很难理解，我不确定即使我们继续使用

animate（）

，是否还有更好的方法来执行这些调用

话虽如此，使用GSAP制作所有动画的决定还是值得称赞的：）

代码笔URL可以找到，下面是最终的JavaScript的样子：

var timeline = new TimelineMax({ paused: true });
var easeOut = Power2.easeOut;
var easeIn = Power2.easeIn;
var durationRegular = 0.2;
var durationSlow = 0.8;
var durationFast = 0.1;
var pauseLocation = 5;
var pauseInterval = 2;
var container = $('#ad-container'), content = $('#ad-content');
var bannerInit = function() { showBanner(); };
var showBanner = function() {
  content.removeClass('loading');
  $('#preloader').addClass('off');
  anim();
};
var anim = function() {
  var frames = $('.frame');
  var numFrames = frames.length;
  var dataSpeed = '';
  TweenMax.set(frames, { autoAlpha: 0 });
  timeline
    .to(frames[0], 1, { autoAlpha: 1, ease: easeOut })
    .to(frames[0], durationRegular, { autoAlpha: 0, ease: easeIn });
  for (var i = 1; i < numFrames; i += 1) {
    dataSpeed = $(frames[i]).data('speed');
    var duration = durationRegular;
    if (dataSpeed === 'slowPace') {
      duration = durationSlow;
    } else if (dataSpeed === 'fastPace') {
      duration = durationFast;
    }
    timeline
      .to(frames[i], duration, { autoAlpha: 1, ease: easeOut })
      .to(frames[i], duration, { autoAlpha: 0, ease: easeIn });
  }
  timeline.play();
  timeline.addPause(pauseLocation, onTimelinePaused);
};
var onTimelinePaused = function() {
  TweenMax.delayedCall(pauseInterval, function() {
    timeline.resume();
  });
};
//
bannerInit();

var timeline=new TimelineMax（{暂停：true}）；
var easeOut=Power2.easeOut；
var easeIn=功率2.easeIn；
var durationRegular=0.2；
var durationSlow=0.8；
var durationFast=0.1；
var pauseLocation=5；
var pauseInterval=2；
var container=$（'广告容器'），content=$（'广告内容'）；
var bannerInit=函数（）{showBanner（）；}；
var showBanner=函数（）{
content.removeClass（“加载”）；
$（'#preload'）.addClass（'off'）；
动漫（）；
};
var anim=函数（）{
var frames=$（'.frame'）；
var numFrames=frames.length；
var数据速度=“”；
TweenMax.set（帧，{autoAlpha:0}）；
时间线
.to（帧[0]，1，{autoAlpha:1，ease:easeOut}）
.to（frames[0]，durationRegular，{autoAlpha:0，ease:easeIn}）；
对于（变量i=1；i


此处使用的GSAP的主要功能称为，相关文档可在中找到
正在使用的其他显著特征包括：

的方法
和TimelineMax的方法
TimelineMax的方法

autoAlpha
属性，可在中找到
Power2
easings，可在文档的部分找到

如果您有任何疑问，请告诉我。
您的笔似乎不工作？您好，刚刚检查过，两种笔都正常工作。我刚刚粘贴的第二个链接不起作用，因为这是我试图与GSAP一起使用的链接。嗯，但我只看到一个白色屏幕，里面什么都没有？我在控制台中也看到一些错误，主要是关于http://cdn.flashtalking.com/frameworks/js/api/2/9/html5API.js
，http://s.codepen.io/boomerang/cbcde0fd5f9f9934a2dd57c38b184ed71443188911467/style.css
和http://s.codepen.io/boomerang/cbcde0fd5f9f9934a2dd57c38b184ed71443188911467/script.js
files.Hi，刚刚做了一些更改，现在console.log中没有任何错误。请你再查一下好吗？我认为需要加载的是html5API，以便发挥横幅的功能，但这是我无法在这里加载的资产。让我看看我是否能解决这个问题。
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'>
        <script>
            var clickTag="";
        </script>
    </head>
    <body>
        <div id="ad-container">
             <div id="preloader">
                <!-- show something while the assets load -->
                <div id="preloader"></div>
             </div>
             <div id="ad-content" class="loading">
                <div id="para-1">
                    <div id="frame1" data-speed="regPace" class="frame left">
                        <p>ANALYSING</p>
                    </div>
                    <div id="frame2" data-speed="regPace" class="frame left">
                        <p>complex</p>
                    </div>
                    <div id="frame3" data-speed="regPace" class="frame left">
                        <p>data</p>
                    </div>
                    <div id="frame4" data-speed="regPace" class="frame left">
                        <p>is</p>
                    </div>
                    <div id="frame5" data-speed="regPace" class="frame left">
                        <p>challenging.</p>
                    </div>
                    <div id="frame6" data-speed="regPace" class="frame left">
                        <p>Especially</p>
                    </div>
                    <div id="frame7" data-speed="regPace" class="frame left">
                        <p>here</p>
                    </div>
                    <div id="frame8" data-speed="regPace" class="frame left">
                        <p>at</p>
                    </div>
                    <div id="frame9" data-speed="slowPace" class="frame left">
                        <p>GCHQ.</p>
                    </div>
                    <div id="frame10" data-speed="regPace" class="frame left">
                        <p>Sometimes</p>
                    </div>
                    <div id="frame11" data-speed="regPace" class="frame left">
                        <p>you</p>
                    </div>
                    <div id="frame12" data-speed="regPace" class="frame left">
                        <p>have</p>
                    </div>
                    <div id="frame13" data-speed="regPace" class="frame left">
                        <p>to</p>
                    </div>
                    <div id="frame14" data-speed="regPace" class="frame left">
                        <p>act</p>
                    </div>
                    <div id="frame15" data-speed="regPace" class="frame left">
                        <p>quickly</p>
                    </div>
                    <div id="frame16" data-speed="regPace" class="frame left">
                        <p>but</p>
                    </div>
                    <div id="frame17" data-speed="regPace" class="frame left">
                        <p>accurately.</p>
                    </div>
                    <div id="frame18" data-speed="regPace" class="frame left">
                        <p>at</p>
                    </div>
                    <div id="frame19" data-speed="regPace" class="frame left">
                        <p>other</p>
                    </div>
                    <div id="frame20" data-speed="regPace" class="frame left">
                        <p>times,</p>
                    </div>
                    <div id="frame21" data-speed="regPace" class="frame left">
                        <p>you</p>
                    </div>
                    <div id="frame22" data-speed="regPace" class="frame left">
                        <p>get</p>
                    </div>
                    <div id="frame23" data-speed="regPace" class="frame left">
                        <p>to</p>
                    </div>
                    <div id="frame24" data-speed="regPace" class="frame left">
                        <p>spend</p>
                    </div>
                    <div id="frame25" data-speed="regPace" class="frame left">
                        <p>a</p>
                    </div>
                    <div id="frame26" data-speed="regPace" class="frame left">
                        <p>bit</p>
                    </div>
                    <div id="frame27" data-speed="regPace" class="frame left">
                        <p>more</p>
                    </div>
                    <div id="frame28" data-speed="regPace" class="frame left">
                        <p>time</p>
                    </div>
                    <div id="frame29" data-speed="regPace" class="frame left">
                        <p>on</p>
                    </div>
                    <div id="frame30" data-speed="regPace" class="frame left">
                        <p>things.</p>
                    </div>
                    <div id="frame31" data-speed="regPace" class="frame right">
                        <p>Sometimes</p>
                    </div>
                    <div id="frame32" data-speed="regPace" class="frame right">
                        <p>you</p>
                    </div>
                    <div id="frame33" data-speed="regPace" class="frame right">
                        <p>start</p>
                    </div>
                    <div id="frame34" data-speed="regPace" class="frame right">
                        <p>to</p>
                    </div>
                    <div id="frame35" data-speed="regPace" class="frame right">
                        <p>follow</p>
                    </div>
                    <div id="frame36" data-speed="regPace" class="frame right">
                        <p>a</p>
                    </div>
                    <div id="frame37" data-speed="regPace" class="frame right">
                        <p>line</p>
                    </div>
                    <div id="frame38" data-speed="regPace" class="frame right">
                        <p>of</p>
                    </div>
                    <div id="frame39" data-speed="regPace" class="frame right">
                        <p>thought</p>
                    </div>
                    <div id="frame40" data-speed="regPace" class="frame left">
                        <p>and</p>
                    </div>
                    <div id="frame41" data-speed="regPace" class="frame left">
                        <p>it</p>
                    </div>
                    <div id="frame42" data-speed="regPace" class="frame left">
                        <p>leads</p>
                    </div>
                    <div id="frame43" data-speed="regPace" class="frame left">
                        <p>to</p>
                    </div>
                    <div id="frame44" data-speed="regPace" class="frame left">
                        <p>a</p>
                    </div>
                    <div id="frame45" data-speed="regPace" class="frame left">
                        <p>dead</p>
                    </div>
                    <div id="frame46" data-speed="regPace" class="frame left">
                        <p>end.</p>
                    </div>
                </div>
                <!--<div id="frame1">  
                    <h1>Banner content</h1>                         
                </div>
                <div id="frame2" class="off">
                    <h1>Banner content 2</h1>
                </div>-->
            </div>
        </div>
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>-->
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>-->
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>-->
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/AttrPlugin.min.js"></script>-->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <!--<script src="lib/zepto.min.js"></script>-->
        <script src="script.js"></script>
        <script src="http://cdn.flashtalking.com/frameworks/js/api/2/9/html5API.js"></script>
        <script type="text/javascript">
            container = myFT.$("#ad-container");
            myFT.applyClickTag(container, 1);
        </script>
    </body>
</html>

$( document ).ready(function() {
var regPace = 400;
var fastPace = 200;
var slowPace = 700;
var pause = 1600;

var container = $('#ad-container'),
    content = $('#ad-content'),
    /*f1 = $('#frame1'),
    f2 = $('#frame2'),*/

    /*clickHandler = (function() {

    container.on( "click", function(event) {
            window.open( clickTag, "_blank" );
        });

    })(),*/

    ////////////////// READY ///////////////////

    bannerInit = function(){

        /// preload assets

        showBanner();
    },

    ////////////////// GET SET ///////////////////

    showBanner = function() {

        content.removeClass('loading');

        $('#preloader').addClass('off');

        anim();

    },

    ////////////////// GO ///////////////////

    anim = function(){


        // your animation stuff // GSAP or whatever

        /*$('#para-1 div').each(function(index,element){

            //var that = $(this);
            var speed = $(this).data('speed');
            if (speed == 'regPace') { pace = regPace};
            if (speed == 'fastPace') { pace = fastPace};
            if (speed == 'slowPace') { pace = slowPace};


            setTimeout(function(){ 

            console.log('the speed for '+index+': '+pace);

                $(element).animate({"opacity":"1",},0);

                $(element).delay(pace).animate({"opacity":"0",},0);
            },index * pace);
        });*/
        /*function doThis(){
            console.log('Paragraph 1 complete');    
        }
        doThis();*/

        $('#frame1').animate({"opacity":"1",},0,function(){

            $('#frame1').delay(regPace).animate({"opacity":"0",},0);
            $('#frame2').delay(regPace).animate({"opacity":"1",},0,function(){

                $('#frame2').delay(regPace).animate({"opacity":"0",},0);
                $('#frame3').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame3').delay(regPace).animate({"opacity":"0",},0);
                $('#frame4').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame4').delay(regPace).animate({"opacity":"0",},0);
                $('#frame5').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame5').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame6').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame6').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame7').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame7').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame8').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame8').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame9').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame9').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame10').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame10').delay(fastPace).animate({"opacity":"0",},0);
            $('#frame11').delay(fastPace).animate({"opacity":"1",},0,function(){

                $('#frame11').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame12').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame12').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame13').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame13').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame14').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame14').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame15').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame15').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame16').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame16').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame17').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame17').delay(fastPace).animate({"opacity":"0",},0);
                $('#frame18').delay(fastPace).animate({"opacity":"1",},0,function(){

                    $('#frame18').delay(regPace).animate({"opacity":"0",},0);
                $('#frame19').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame19').delay(regPace).animate({"opacity":"0",},0);
            $('#frame20').delay(regPace).animate({"opacity":"1",},0,function(){

                $('#frame20').delay(regPace).animate({"opacity":"0",},0);
                $('#frame21').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame21').delay(regPace).animate({"opacity":"0",},0);
                $('#frame22').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame22').delay(regPace).animate({"opacity":"0",},0);
                $('#frame23').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame23').delay(regPace).animate({"opacity":"0",},0);
                $('#frame24').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame24').delay(regPace).animate({"opacity":"0",},0);
                $('#frame25').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame25').delay(regPace).animate({"opacity":"0",},0);
                $('#frame26').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame26').delay(slowPace).animate({"opacity":"0",},0);
                $('#frame27').delay(slowPace).animate({"opacity":"1",},0,function(){

                    $('#frame27').delay(slowPace).animate({"opacity":"0",},0);
                $('#frame28').delay(slowPace).animate({"opacity":"1",},0,function(){

                    $('#frame28').delay(slowPace).animate({"opacity":"0",},0);
            $('#frame29').delay(slowPace).animate({"opacity":"1",},0,function(){

                $('#frame29').delay(slowPace).animate({"opacity":"0",},0);
                $('#frame30').delay(slowPace).animate({"opacity":"1",},0,function(){

                    $('#frame30').delay(pause).animate({"opacity":"0",},0);
                $('#frame31').delay(pause).animate({"opacity":"1",},0,function(){

                    $('#frame31').delay(regPace).animate({"opacity":"0",},0);
                $('#frame32').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame32').delay(regPace).animate({"opacity":"0",},0);
                $('#frame33').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame33').delay(regPace).animate({"opacity":"0",},0);
                $('#frame34').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame34').delay(regPace).animate({"opacity":"0",},0);
                $('#frame35').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame35').delay(regPace).animate({"opacity":"0",},0);
                $('#frame36').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame36').delay(regPace).animate({"opacity":"0",},0);
                $('#frame37').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame37').delay(regPace).animate({"opacity":"0",},0);
                $('#frame38').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame38').delay(regPace).animate({"opacity":"0",},0);
                $('#frame39').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame39').delay(regPace).animate({"opacity":"0",},0);
            $('#frame40').delay(regPace).animate({"opacity":"1",},0,function(){

                $('#frame40').delay(regPace).animate({"opacity":"0",},0);
                $('#frame41').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame41').delay(regPace).animate({"opacity":"0",},0);
                $('#frame42').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame42').delay(regPace).animate({"opacity":"0",},0);
                $('#frame43').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame43').delay(regPace).animate({"opacity":"0",},0);
                $('#frame44').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame44').delay(regPace).animate({"opacity":"0",},0);
                $('#frame45').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame45').delay(regPace).animate({"opacity":"0",},0);
                $('#frame46').delay(regPace).animate({"opacity":"1",},0,function(){

                    $('#frame46').delay(regPace).animate({"opacity":"0",},0);


});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});

        /*$('#frame1').show(2000,function(){
            $(this).hide(0);
            $('#frame2').show(2000,function(){
                $(this).hide(0);
                $('#frame3').show();
            });
            console.log('jello');
        });*/

     }; //// END ANIM /////

     bannerInit();


});

var timeline = new TimelineMax({ paused: true });
var easeOut = Power2.easeOut;
var easeIn = Power2.easeIn;
var durationRegular = 0.2;
var durationSlow = 0.8;
var durationFast = 0.1;
var pauseLocation = 5;
var pauseInterval = 2;
var container = $('#ad-container'), content = $('#ad-content');
var bannerInit = function() { showBanner(); };
var showBanner = function() {
  content.removeClass('loading');
  $('#preloader').addClass('off');
  anim();
};
var anim = function() {
  var frames = $('.frame');
  var numFrames = frames.length;
  var dataSpeed = '';
  TweenMax.set(frames, { autoAlpha: 0 });
  timeline
    .to(frames[0], 1, { autoAlpha: 1, ease: easeOut })
    .to(frames[0], durationRegular, { autoAlpha: 0, ease: easeIn });
  for (var i = 1; i < numFrames; i += 1) {
    dataSpeed = $(frames[i]).data('speed');
    var duration = durationRegular;
    if (dataSpeed === 'slowPace') {
      duration = durationSlow;
    } else if (dataSpeed === 'fastPace') {
      duration = durationFast;
    }
    timeline
      .to(frames[i], duration, { autoAlpha: 1, ease: easeOut })
      .to(frames[i], duration, { autoAlpha: 0, ease: easeIn });
  }
  timeline.play();
  timeline.addPause(pauseLocation, onTimelinePaused);
};
var onTimelinePaused = function() {
  TweenMax.delayedCall(pauseInterval, function() {
    timeline.resume();
  });
};
//
bannerInit();