为了动画SVG文件，我开始深入了解GSAP。我为SVG文件中的不同元素创建了几个Tween。 一切都很好，并且正如预期的那样动画。
由于我在SVG中有很多元素可以动画，所以我开始添加TimelineLite来控制整个事物。
此时，我的脚本文件看起来像这样：
首先，我宣布了我想要制作动画的所有元素：
this.phone = document.querySelector('#gsap-phone-svg');
this.body = document.querySelectorAll('.gsap-phone-body');
this.body.shadow = this.phone.querySelectorAll('.gsap-phone-body-shadow');
this.body.mask = this.phone.querySelectorAll('.gsap-phone-body-mask');
this.layer = this.phone.querySelectorAll('.gsap-phone-layer');
this.screen = this.phone.querySelectorAll('.gsap-phone-screen');
this.screen.clipPath = this.phone.querySelectorAll('.gsap-phone-screen-clipPath');
.
.
.
// many more following here
我创建了一个Object来保存我的Tweens：
const tweens = {};
// creating tweens
tweens.body = TweenMax.to(this.body, this.animDur/2,{
y: this.maxExpand/6*-1,
ease: this.ease
});
.
.
.
// many more following here
最后，我将所有补间添加到临时数组中，之后我将其传递给新的TimelineLite（）：
const tl = new TimelineLite();
tl.add(tweensArray, 0, "start", 0.05);
到目前为止似乎是逻辑，我想......现在这里是关键。你可能已经注意到我有20多个元素左右要动画。这就是为什么为每个元素添加一个补间本身变得非常混乱。我还希望整个主时间轴都是重复的。这里的问题是，我希望在动画＆＃34; in-animation＆＃34;中为我的所有补间提供不同的缓动。而不是＆＃34; out-animation＆＃34;，以及我想在＆＃34; out-animation＆＃34;上没有错位。
所有这些小问题让我想到了另一种解决方案来管理我的补间和时间表的创建。
我脑海中最方便的解决方案是在对象中存储有关我的动画元素和时间轴的所有信息：
const animation = {
settings : {
duration: 1.5,
expansion: 1,
easeIn: Elastic.easeOut.config(1, 0.5),
easeOut: Power2.easeInOut
},
timelines : {
main : {
delay : 0,
paused : true,
align : 'start',
stagger : 0.05,
},
test : {
delay: 0,
paused : true,
align : 'start',
stagger : 0.5
}
},
items : {
phone : {
id : '#gsap-phone-svg',
start : { },
end : { },
timeline : 'test',
},
body : {
class : '.gsap-phone-body',
start : {
y : 0,
},
end : {
y : -21,
},
timeline : 'test',
},
layer : {
class : '.gsap-phone-layer',
start : {
y : 0,
},
end : {
y : -62.5,
},
timeline : 'main',
},
radar : {
class : '.gsap-phone-radar',
start : {
y : 0,
},
end : {
y : -25,
},
timeline : 'main',
},
radarBase : {
class : '.gsap-phone-radar-base',
start: {
y : 0,
},
end : {
y: -16,
},
timeline : 'test',
},
ringOne : {
class : '.gsap-phone-radar-ring-1',
start : {
y : 0,
},
end : {
y: -25,
},
timeline : 'test',
},
ringTwo : {
class : '.gsap-phone-radar-ring-2',
start : {
y : 0,
},
end : {
y: -41,
},
timeline : 'main',
},
ringThree : {
class : '.gsap-phone-radar-ring-3',
start : {
y : 0,
},
end : {
y: -62.5,
},
timeline : 'main',
},
cancel : {
class : '.gsap-phone-cancel',
start : {
y : 0,
},
end : {
y: -50,
},
timeline : 'main',
},
submit : {
class : '.gsap-phone-submit',
start : {
y : 0,
},
end : {
y: -100,
},
timeline : 'main',
}
}
};
比我写的＆＃34; createTweens＆＃34;返回GSAP Tweens的方法
/* create tweens */
function createTweens(anim){
const el = anim.items;
const settings = anim.settings;
const duration = settings.duration;
const easeIn = settings.easeIn;
const easeOut = settings.easeOut;
const tweensIn = [];
const tweensOut = [];
let tempTween = null;
for (const key in el){
const curEl = el[key];
const selector = curEl.class || el[key].id;
const startPoint = curEl.start || '';
const endPoint = curEl.end || '';
const timeline = curEl.timeline || '';
const nodes = document.querySelectorAll(selector);
nodes.forEach(object => {
tweensIn.push(getTween(object, endPoint, duration, easeIn, `${timeline}-in`));
tweensOut.push(getTween(object, startPoint, duration, easeOut, `${timeline}-out`));
});
}
function getTween(tw, twValues, twDur, twEase, tl){
const vars = twValues;
vars.paused = false;
vars.ease = twEase;
tempTween = TweenMax.to(tw, twDur/2, vars);
tempTween.data = {
timelineName : tl
};
return tempTween;
}
return tweensIn.concat(tweensOut);
}
和另一个返回时间轴的函数：
/* create timelines */
function createTimelines(anim, tweens){
const el = anim.timelines;
const timelines = {};
// timelines.mainIn = new TimelineLite();
// timelines.mainOut = new TimelineLite();
const tweensForTimelines = {};
for(const key in el){
const delay = el[key].delay;
const paused = el[key].paused;
const align = el[key].align;
const stagger = el[key].stagger;
const vars = {};
vars.paused = paused;
timelines[`${key}-in`] = new TimelineLite(vars);
timelines[`${key}-in`].delay = delay;
timelines[`${key}-in`].align = align;
timelines[`${key}-in`].stagger = stagger;
timelines[`${key}-out`] = new TimelineLite(vars);
timelines[`${key}-out`].delay = delay;
timelines[`${key}-out`].align = align;
timelines[`${key}-out`].stagger = stagger;
tweensForTimelines[`${key}-in`] = [];
tweensForTimelines[`${key}-out`] = [];
}
if(Object.keys(tweensForTimelines).length !== 0){
for(let i = 0; i < tweens.length; i++){
const curTween = tweens[i];
const tlTarget = curTween.data.timelineName;
tweensForTimelines[tlTarget].push(curTween);
}
}
for(const key in timelines){
try{
timelines[key].add(tweensForTimelines[key], timelines[key].delay, timelines[key].align, timelines[key].stagger);
console.log(TweenMax.getTweensOf(timelines[key]));
timelines[key].data = tweensForTimelines[key];
} catch(e){
}
}
return timelines;
}
如果我执行以下代码，它将播放我的＆＃34; main-in＆＃34;时间轴。
const tweens = createTweens(animation);
const timelines = createTimelines(animation, tweens);
timelines['main-in'].play();
到目前为止，这实际上是有效的。但是如果我尝试添加＆＃34; main-in＆＃34;新时间表的时间表，不再有效。
const anotherTimeline = new TimelineLite();
anotherTimeline.add(timelines['main-in']);
anotherTimeline.play();
为了调试这个，我试过
TweenMax.getTweensOf(anotherTimeline);
但是所有这些返回的是一个空数组。然后我记录了我的＆＃34; main-in＆＃34;时间表：
console.log(TweenMax.getTweensOf(timelines['main-in']));
还返回一个空的数组，这对我来说非常困惑，因为即使这个时间轴似乎是空的，它也会播放我的动画片＃34;于：
timelines['main-in'].play()
我真的被困在这里，非常感谢更高级用户的帮助，或者只是对此有所了解的任何人。我希望你们能跟着我......万一没有，看看提供的codepen ..
提前致谢！
答案 0 :(得分：1)
我没有时间解析你的所有代码并制作完整的替代品，但它确实让我觉得有点过度设计，但我也意识到我的大脑可能只是以不同的方式工作而且它是＆＃39 ;风格选择（不是好坏）。
我发现最直观，最易读和最灵活的方法是将动画分成多个块，这些块放入函数中，每个函数都会吐出可以在主时间轴中嵌套的TimelineLite / Max或TweenLite / Max（如果你这样选择）。
有点像：
function phoneIntro() {
var tl = new TimelineLite();
tl.to(...)
.to(...);
return tl;
}
function flipPhone() {
var tl = new TimelineLite();
tl.to(...);
return tl;
}
var master = new TimelineMax({repeat:-1});
master.add(phoneIntro(), 0)
.add(flipPhone(), "-=1"); //overlap by 1 second
...
当然，如果您有很多元素可以使用相同类型的动画，那么这种模块化方法也非常有用，因为您可以输入您需要的任何变量。为你做的工作并吐回动画。
function buildStep(element, duration, x, y) {
return TweenMax.to(element, duration, {x:x, y:y, rotation:30});
}
希望您在创建一些模块化的功能时能够变得更加灵活，您只需要提供所需的任何功能。这整个方法可以让您更快地编辑动画（并尝试计时等），因为在代码中找到您的位置非常简单。 ＆＃34;我想让介绍延长2秒......＆＃34;只需找到phoneIntro（）函数并调整其中的内容。完成。由于您在主TimelineMax中将相关时间串在一起，因此您对第一个模块化块所做的更改会自动推迟后续事物的计时，并且它只是很好地流过。没有弄乱20个不同的延迟。
此外，TweenLite.getTweensOf（anotherTimeline）返回空数组的原因是因为该方法找到该对象的补间 。就像，从字面上看，如果你正在补间时间轴本身（也许是它的进展），它将返回该补间。听起来你假设它得到某个时间轴实例的补间 INSIDE （它没有）。但是，如果这是您所追求的，那么它就像anotherTimeline.getChildren（）一样简单。
我希望这至少有一点帮助。您可以在http://greensock.com/forums的论坛中发帖提问，这里有一个很棒的GSAP专业人士社区。这是一个很棒的学习场所，即使你从未发过一个问题：）
快乐的补间！