[英]jQuery .animate() switch to GSAP TweenMax
我正在做一個項目,該項目以不同的速度快速連續地對單個單詞進行動畫處理。 我已經使用jQuery的.animate()
和回調程序制作了一些快速而骯臟的東西來制作此動畫。
您也可以在Codepen和下面的代碼上看到一個示例(相當大)。
我想知道如何將其轉換為使用GSAP 。 以下是我目前正在替代jQuery的.animate()
並且該版本的Codepen也位於此處 :
TweenMax.staggerFromTo('.frame', 1, { opacity: 0, delay: 1 }, { opacity: 1, delay: 1 }, 1);
如您所見,我的GSAP版本無法像我的快速jQuery版本一樣正常工作。
您還可以看到,在我巨大的jQuery可怕文件中,我可以輕松地修改每個幀的速度,這一點非常重要,因此我也需要能夠使用GSAP版本來做到這一點。
我該怎么辦?
HTML:
<!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>
JavaScript:
$( 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();
});
首先,請閱讀我的答案之一,如果您以前從未聽說過或嘗試過GSAP ,則可以通過大量鏈接向您介紹 GSAP 。
其次,您的Codepen不適用於Chrome(45 +,Macbook Pro),但適用於Firefox。 我不確定是什么原因,但我想是關於安全性的。
無論如何,由於callbacks-inin-callbacks循環:),您的jQuery的animate()
調用很難理解:即使我們繼續使用animate()
,我也不知道是否會有更好的方法來實現它們。 animate()
。
話雖如此,使用GSAP制作所有動畫的決定必須受到鼓掌:)
可以在此處找到Codepen 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();
這里使用的GSAP的主要功能稱為TimelineMax ,可以在此處找到其文檔。
其他值得注意的功能是:
.set()
方法。 .play()
和.resume()
TimelineMax的方法。 .addPause()
TimelineMax的方法。 autoAlpha
屬性。 Power2
緩動 。 如果您有疑問,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.