845 lines
36 KiB
JavaScript
845 lines
36 KiB
JavaScript
/*!
|
|
* VERSION: 2.1.0
|
|
* DATE: 2019-02-15
|
|
* UPDATES AND DOCS AT: http://greensock.com
|
|
*
|
|
* @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
|
|
* This work is subject to the terms at http://greensock.com/standard-license or for
|
|
* Club GreenSock members, the software agreement that was issued with your membership.
|
|
*
|
|
* @author: Jack Doyle, jack@greensock.com
|
|
*/
|
|
/* eslint-disable */
|
|
|
|
import TweenLite, { _gsScope, globals, Animation, SimpleTimeline } from "./TweenLite.js";
|
|
|
|
_gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function() {
|
|
|
|
var TimelineLite = function(vars) {
|
|
SimpleTimeline.call(this, vars);
|
|
var self = this,
|
|
v = self.vars,
|
|
val, p;
|
|
self._labels = {};
|
|
self.autoRemoveChildren = !!v.autoRemoveChildren;
|
|
self.smoothChildTiming = !!v.smoothChildTiming;
|
|
self._sortChildren = true;
|
|
self._onUpdate = v.onUpdate;
|
|
for (p in v) {
|
|
val = v[p];
|
|
if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) {
|
|
v[p] = self._swapSelfInParams(val);
|
|
}
|
|
}
|
|
if (_isArray(v.tweens)) {
|
|
self.add(v.tweens, 0, v.align, v.stagger);
|
|
}
|
|
},
|
|
_tinyNum = 0.00000001,
|
|
TweenLiteInternals = TweenLite._internals,
|
|
_internals = TimelineLite._internals = {},
|
|
_isSelector = TweenLiteInternals.isSelector,
|
|
_isArray = TweenLiteInternals.isArray,
|
|
_lazyTweens = TweenLiteInternals.lazyTweens,
|
|
_lazyRender = TweenLiteInternals.lazyRender,
|
|
_globals = _gsScope._gsDefine.globals,
|
|
_copy = function(vars) {
|
|
var copy = {}, p;
|
|
for (p in vars) {
|
|
copy[p] = vars[p];
|
|
}
|
|
return copy;
|
|
},
|
|
_applyCycle = function(vars, targets, i) {
|
|
var alt = vars.cycle,
|
|
p, val;
|
|
for (p in alt) {
|
|
val = alt[p];
|
|
vars[p] = (typeof(val) === "function") ? val(i, targets[i], targets) : val[i % val.length];
|
|
}
|
|
delete vars.cycle;
|
|
},
|
|
_pauseCallback = _internals.pauseCallback = function() {},
|
|
_slice = function(a) { //don't use [].slice because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll()
|
|
var b = [],
|
|
l = a.length,
|
|
i;
|
|
for (i = 0; i !== l; b.push(a[i++]));
|
|
return b;
|
|
},
|
|
_defaultImmediateRender = function(tl, toVars, fromVars, defaultFalse) { //default to immediateRender:true unless otherwise set in toVars, fromVars or if defaultFalse is passed in as true
|
|
var ir = "immediateRender";
|
|
if (!(ir in toVars)) {
|
|
toVars[ir] = !(tl._paused || (fromVars && fromVars[ir] === false) || defaultFalse);
|
|
}
|
|
return toVars;
|
|
},
|
|
//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
|
|
_distribute = function(v) {
|
|
if (typeof(v) === "function") {
|
|
return v;
|
|
}
|
|
var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
|
|
ease = vars.ease,
|
|
from = vars.from || 0,
|
|
base = vars.base || 0,
|
|
cache = {},
|
|
isFromKeyword = isNaN(from),
|
|
axis = vars.axis,
|
|
ratio = {center:0.5, end:1}[from] || 0;
|
|
return function(i, target, a) {
|
|
var l = (a || vars).length,
|
|
distances = cache[l],
|
|
originX, originY, x, y, d, j, max, min, wrap;
|
|
if (!distances) {
|
|
wrap = (vars.grid === "auto") ? 0 : (vars.grid || [Infinity])[0];
|
|
if (!wrap) {
|
|
max = -Infinity;
|
|
while (max < (max = a[wrap++].getBoundingClientRect().left) && wrap < l) { }
|
|
wrap--;
|
|
}
|
|
distances = cache[l] = [];
|
|
originX = isFromKeyword ? (Math.min(wrap, l) * ratio) - 0.5 : from % wrap;
|
|
originY = isFromKeyword ? l * ratio / wrap - 0.5 : (from / wrap) | 0;
|
|
max = 0;
|
|
min = Infinity;
|
|
for (j = 0; j < l; j++) {
|
|
x = (j % wrap) - originX;
|
|
y = originY - ((j / wrap) | 0);
|
|
distances[j] = d = !axis ? Math.sqrt(x * x + y * y) : Math.abs((axis === "y") ? y : x);
|
|
if (d > max) {
|
|
max = d;
|
|
}
|
|
if (d < min) {
|
|
min = d;
|
|
}
|
|
}
|
|
distances.max = max - min;
|
|
distances.min = min;
|
|
distances.v = vars.n ? l * (v || 0) : vars.amount;
|
|
}
|
|
l = (distances[i] - distances.min) / distances.max;
|
|
return base + (ease ? ease.getRatio(l) : l) * distances.v;
|
|
};
|
|
},
|
|
p = TimelineLite.prototype = new SimpleTimeline();
|
|
|
|
TimelineLite.version = "2.1.0";
|
|
TimelineLite.distribute = _distribute;
|
|
p.constructor = TimelineLite;
|
|
p.kill()._gc = p._forcingPlayhead = p._hasPause = false;
|
|
|
|
/* might use later...
|
|
//translates a local time inside an animation to the corresponding time on the root/global timeline, factoring in all nesting and timeScales.
|
|
function localToGlobal(time, animation) {
|
|
while (animation) {
|
|
time = (time / animation._timeScale) + animation._startTime;
|
|
animation = animation.timeline;
|
|
}
|
|
return time;
|
|
}
|
|
|
|
//translates the supplied time on the root/global timeline into the corresponding local time inside a particular animation, factoring in all nesting and timeScales
|
|
function globalToLocal(time, animation) {
|
|
var scale = 1;
|
|
time -= localToGlobal(0, animation);
|
|
while (animation) {
|
|
scale *= animation._timeScale;
|
|
animation = animation.timeline;
|
|
}
|
|
return time * scale;
|
|
}
|
|
*/
|
|
|
|
p.to = function(target, duration, vars, position) {
|
|
var Engine = (vars.repeat && _globals.TweenMax) || TweenLite;
|
|
return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position);
|
|
};
|
|
|
|
p.from = function(target, duration, vars, position) {
|
|
return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, _defaultImmediateRender(this, vars)), position);
|
|
};
|
|
|
|
p.fromTo = function(target, duration, fromVars, toVars, position) {
|
|
var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite;
|
|
toVars = _defaultImmediateRender(this, toVars, fromVars);
|
|
return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position);
|
|
};
|
|
|
|
p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
|
|
var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, callbackScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}),
|
|
staggerFunc = _distribute(vars.stagger || stagger),
|
|
startAt = vars.startAt,
|
|
cycle = vars.cycle,
|
|
copy, i;
|
|
if (typeof(targets) === "string") {
|
|
targets = TweenLite.selector(targets) || targets;
|
|
}
|
|
targets = targets || [];
|
|
if (_isSelector(targets)) { //if the targets object is a selector, translate it into an array.
|
|
targets = _slice(targets);
|
|
}
|
|
for (i = 0; i < targets.length; i++) {
|
|
copy = _copy(vars);
|
|
if (startAt) {
|
|
copy.startAt = _copy(startAt);
|
|
if (startAt.cycle) {
|
|
_applyCycle(copy.startAt, targets, i);
|
|
}
|
|
}
|
|
if (cycle) {
|
|
_applyCycle(copy, targets, i);
|
|
if (copy.duration != null) {
|
|
duration = copy.duration;
|
|
delete copy.duration;
|
|
}
|
|
}
|
|
tl.to(targets[i], duration, copy, staggerFunc(i, targets[i], targets));
|
|
}
|
|
return this.add(tl, position);
|
|
};
|
|
|
|
p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
|
|
vars.runBackwards = true;
|
|
return this.staggerTo(targets, duration, _defaultImmediateRender(this, vars), stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope);
|
|
};
|
|
|
|
p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
|
|
toVars.startAt = fromVars;
|
|
return this.staggerTo(targets, duration, _defaultImmediateRender(this, toVars, fromVars), stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope);
|
|
};
|
|
|
|
p.call = function(callback, params, scope, position) {
|
|
return this.add( TweenLite.delayedCall(0, callback, params, scope), position);
|
|
};
|
|
|
|
p.set = function(target, vars, position) {
|
|
return this.add( new TweenLite(target, 0, _defaultImmediateRender(this, vars, null, true)), position);
|
|
};
|
|
|
|
TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) {
|
|
vars = vars || {};
|
|
if (vars.smoothChildTiming == null) {
|
|
vars.smoothChildTiming = true;
|
|
}
|
|
var tl = new TimelineLite(vars),
|
|
root = tl._timeline,
|
|
hasNegativeStart, time, tween, next;
|
|
if (ignoreDelayedCalls == null) {
|
|
ignoreDelayedCalls = true;
|
|
}
|
|
root._remove(tl, true);
|
|
tl._startTime = 0;
|
|
tl._rawPrevTime = tl._time = tl._totalTime = root._time;
|
|
tween = root._first;
|
|
while (tween) {
|
|
next = tween._next;
|
|
if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) {
|
|
time = tween._startTime - tween._delay;
|
|
if (time < 0) {
|
|
hasNegativeStart = 1;
|
|
}
|
|
tl.add(tween, time);
|
|
}
|
|
tween = next;
|
|
}
|
|
root.add(tl, 0);
|
|
if (hasNegativeStart) { //calling totalDuration() will force the adjustment necessary to shift the children forward so none of them start before zero, and moves the timeline backwards the same amount, so the playhead is still aligned where it should be globally, but the timeline doesn't have illegal children that start before zero.
|
|
tl.totalDuration();
|
|
}
|
|
return tl;
|
|
};
|
|
|
|
p.add = function(value, position, align, stagger) {
|
|
var self = this,
|
|
curTime, l, i, child, tl, beforeRawTime;
|
|
if (typeof(position) !== "number") {
|
|
position = self._parseTimeOrLabel(position, 0, true, value);
|
|
}
|
|
if (!(value instanceof Animation)) {
|
|
if ((value instanceof Array) || (value && value.push && _isArray(value))) {
|
|
align = align || "normal";
|
|
stagger = stagger || 0;
|
|
curTime = position;
|
|
l = value.length;
|
|
for (i = 0; i < l; i++) {
|
|
if (_isArray(child = value[i])) {
|
|
child = new TimelineLite({tweens:child});
|
|
}
|
|
self.add(child, curTime);
|
|
if (typeof(child) !== "string" && typeof(child) !== "function") {
|
|
if (align === "sequence") {
|
|
curTime = child._startTime + (child.totalDuration() / child._timeScale);
|
|
} else if (align === "start") {
|
|
child._startTime -= child.delay();
|
|
}
|
|
}
|
|
curTime += stagger;
|
|
}
|
|
return self._uncache(true);
|
|
} else if (typeof(value) === "string") {
|
|
return self.addLabel(value, position);
|
|
} else if (typeof(value) === "function") {
|
|
value = TweenLite.delayedCall(0, value);
|
|
} else {
|
|
throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string.");
|
|
}
|
|
}
|
|
|
|
SimpleTimeline.prototype.add.call(self, value, position);
|
|
|
|
if (value._time || (!value._duration && value._initted)) { //in case, for example, the _startTime is moved on a tween that has already rendered. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning.
|
|
curTime = (self.rawTime() - value._startTime) * value._timeScale;
|
|
if (!value._duration || Math.abs(Math.max(0, Math.min(value.totalDuration(), curTime))) - value._totalTime > 0.00001) {
|
|
value.render(curTime, false, false);
|
|
}
|
|
}
|
|
|
|
//if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.
|
|
if (self._gc || self._time === self._duration) if (!self._paused) if (self._duration < self.duration()) {
|
|
//in case any of the ancestors had completed but should now be enabled...
|
|
tl = self;
|
|
beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect.
|
|
while (tl._timeline) {
|
|
if (beforeRawTime && tl._timeline.smoothChildTiming) {
|
|
tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it.
|
|
} else if (tl._gc) {
|
|
tl._enabled(true, false);
|
|
}
|
|
tl = tl._timeline;
|
|
}
|
|
}
|
|
|
|
return self;
|
|
};
|
|
|
|
p.remove = function(value) {
|
|
if (value instanceof Animation) {
|
|
this._remove(value, false);
|
|
var tl = value._timeline = value.vars.useFrames ? Animation._rootFramesTimeline : Animation._rootTimeline; //now that it's removed, default it to the root timeline so that if it gets played again, it doesn't jump back into this timeline.
|
|
value._startTime = (value._paused ? value._pauseTime : tl._time) - ((!value._reversed ? value._totalTime : value.totalDuration() - value._totalTime) / value._timeScale); //ensure that if it gets played again, the timing is correct.
|
|
return this;
|
|
} else if (value instanceof Array || (value && value.push && _isArray(value))) {
|
|
var i = value.length;
|
|
while (--i > -1) {
|
|
this.remove(value[i]);
|
|
}
|
|
return this;
|
|
} else if (typeof(value) === "string") {
|
|
return this.removeLabel(value);
|
|
}
|
|
return this.kill(null, value);
|
|
};
|
|
|
|
p._remove = function(tween, skipDisable) {
|
|
SimpleTimeline.prototype._remove.call(this, tween, skipDisable);
|
|
var last = this._last;
|
|
if (!last) {
|
|
this._time = this._totalTime = this._duration = this._totalDuration = 0;
|
|
} else if (this._time > this.duration()) {
|
|
this._time = this._duration;
|
|
this._totalTime = this._totalDuration;
|
|
}
|
|
return this;
|
|
};
|
|
|
|
p.append = function(value, offsetOrLabel) {
|
|
return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value));
|
|
};
|
|
|
|
p.insert = p.insertMultiple = function(value, position, align, stagger) {
|
|
return this.add(value, position || 0, align, stagger);
|
|
};
|
|
|
|
p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) {
|
|
return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger);
|
|
};
|
|
|
|
p.addLabel = function(label, position) {
|
|
this._labels[label] = this._parseTimeOrLabel(position);
|
|
return this;
|
|
};
|
|
|
|
p.addPause = function(position, callback, params, scope) {
|
|
var t = TweenLite.delayedCall(0, _pauseCallback, params, scope || this);
|
|
t.vars.onComplete = t.vars.onReverseComplete = callback;
|
|
t.data = "isPause";
|
|
this._hasPause = true;
|
|
return this.add(t, position);
|
|
};
|
|
|
|
p.removeLabel = function(label) {
|
|
delete this._labels[label];
|
|
return this;
|
|
};
|
|
|
|
p.getLabelTime = function(label) {
|
|
return (this._labels[label] != null) ? this._labels[label] : -1;
|
|
};
|
|
|
|
p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) {
|
|
var clippedDuration, i;
|
|
//if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration().
|
|
if (ignore instanceof Animation && ignore.timeline === this) {
|
|
this.remove(ignore);
|
|
} else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) {
|
|
i = ignore.length;
|
|
while (--i > -1) {
|
|
if (ignore[i] instanceof Animation && ignore[i].timeline === this) {
|
|
this.remove(ignore[i]);
|
|
}
|
|
}
|
|
}
|
|
clippedDuration = (typeof(timeOrLabel) === "number" && !offsetOrLabel) ? 0 : (this.duration() > 99999999999) ? this.recent().endTime(false) : this._duration; //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.
|
|
if (typeof(offsetOrLabel) === "string") {
|
|
return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - clippedDuration : 0, appendIfAbsent);
|
|
}
|
|
offsetOrLabel = offsetOrLabel || 0;
|
|
if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).
|
|
i = timeOrLabel.indexOf("=");
|
|
if (i === -1) {
|
|
if (this._labels[timeOrLabel] == null) {
|
|
return appendIfAbsent ? (this._labels[timeOrLabel] = clippedDuration + offsetOrLabel) : offsetOrLabel;
|
|
}
|
|
return this._labels[timeOrLabel] + offsetOrLabel;
|
|
}
|
|
offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1));
|
|
timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : clippedDuration;
|
|
} else if (timeOrLabel == null) {
|
|
timeOrLabel = clippedDuration;
|
|
}
|
|
return Number(timeOrLabel) + offsetOrLabel;
|
|
};
|
|
|
|
p.seek = function(position, suppressEvents) {
|
|
return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false));
|
|
};
|
|
|
|
p.stop = function() {
|
|
return this.paused(true);
|
|
};
|
|
|
|
p.gotoAndPlay = function(position, suppressEvents) {
|
|
return this.play(position, suppressEvents);
|
|
};
|
|
|
|
p.gotoAndStop = function(position, suppressEvents) {
|
|
return this.pause(position, suppressEvents);
|
|
};
|
|
|
|
p.render = function(time, suppressEvents, force) {
|
|
if (this._gc) {
|
|
this._enabled(true, false);
|
|
}
|
|
var self = this,
|
|
prevTime = self._time,
|
|
totalDur = (!self._dirty) ? self._totalDuration : self.totalDuration(),
|
|
prevStart = self._startTime,
|
|
prevTimeScale = self._timeScale,
|
|
prevPaused = self._paused,
|
|
tween, isComplete, next, callback, internalForce, pauseTween, curTime, pauseTime;
|
|
if (prevTime !== self._time) { //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
|
|
time += self._time - prevTime;
|
|
}
|
|
if (time >= totalDur - _tinyNum && time >= 0) { //to work around occasional floating point math artifacts.
|
|
self._totalTime = self._time = totalDur;
|
|
if (!self._reversed) if (!self._hasPausedChild()) {
|
|
isComplete = true;
|
|
callback = "onComplete";
|
|
internalForce = !!self._timeline.autoRemoveChildren; //otherwise, if the animation is unpaused/activated after it's already finished, it doesn't get removed from the parent timeline.
|
|
if (self._duration === 0) if ((time <= 0 && time >= -_tinyNum) || self._rawPrevTime < 0 || self._rawPrevTime === _tinyNum) if (self._rawPrevTime !== time && self._first) {
|
|
internalForce = true;
|
|
if (self._rawPrevTime > _tinyNum) {
|
|
callback = "onReverseComplete";
|
|
}
|
|
}
|
|
}
|
|
self._rawPrevTime = (self._duration || !suppressEvents || time || self._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
|
|
time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7.
|
|
|
|
} else if (time < _tinyNum) { //to work around occasional floating point math artifacts, round super small values to 0.
|
|
self._totalTime = self._time = 0;
|
|
if (time > -_tinyNum) {
|
|
time = 0;
|
|
}
|
|
if (prevTime !== 0 || (self._duration === 0 && self._rawPrevTime !== _tinyNum && (self._rawPrevTime > 0 || (time < 0 && self._rawPrevTime >= 0)))) {
|
|
callback = "onReverseComplete";
|
|
isComplete = self._reversed;
|
|
}
|
|
if (time < 0) {
|
|
self._active = false;
|
|
if (self._timeline.autoRemoveChildren && self._reversed) { //ensures proper GC if a timeline is resumed after it's finished reversing.
|
|
internalForce = isComplete = true;
|
|
callback = "onReverseComplete";
|
|
} else if (self._rawPrevTime >= 0 && self._first) { //when going back beyond the start, force a render so that zero-duration tweens that sit at the very beginning render their start values properly. Otherwise, if the parent timeline's playhead lands exactly at this timeline's startTime, and then moves backwards, the zero-duration tweens at the beginning would still be at their end state.
|
|
internalForce = true;
|
|
}
|
|
self._rawPrevTime = time;
|
|
} else {
|
|
self._rawPrevTime = (self._duration || !suppressEvents || time || self._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
|
|
if (time === 0 && isComplete) { //if there's a zero-duration tween at the very beginning of a timeline and the playhead lands EXACTLY at time 0, that tween will correctly render its end values, but we need to keep the timeline alive for one more render so that the beginning values render properly as the parent's playhead keeps moving beyond the begining. Imagine obj.x starts at 0 and then we do tl.set(obj, {x:100}).to(obj, 1, {x:200}) and then later we tl.reverse()...the goal is to have obj.x revert to 0. If the playhead happens to land on exactly 0, without this chunk of code, it'd complete the timeline and remove it from the rendering queue (not good).
|
|
tween = self._first;
|
|
while (tween && tween._startTime === 0) {
|
|
if (!tween._duration) {
|
|
isComplete = false;
|
|
}
|
|
tween = tween._next;
|
|
}
|
|
}
|
|
time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline)
|
|
if (!self._initted) {
|
|
internalForce = true;
|
|
}
|
|
}
|
|
|
|
} else {
|
|
|
|
if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
|
|
if (time >= prevTime) {
|
|
tween = self._first;
|
|
while (tween && tween._startTime <= time && !pauseTween) {
|
|
if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
|
|
pauseTween = tween;
|
|
}
|
|
tween = tween._next;
|
|
}
|
|
} else {
|
|
tween = self._last;
|
|
while (tween && tween._startTime >= time && !pauseTween) {
|
|
if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
|
|
pauseTween = tween;
|
|
}
|
|
tween = tween._prev;
|
|
}
|
|
}
|
|
if (pauseTween) {
|
|
self._time = self._totalTime = time = pauseTween._startTime;
|
|
pauseTime = self._startTime + (time / self._timeScale);
|
|
}
|
|
}
|
|
|
|
self._totalTime = self._time = self._rawPrevTime = time;
|
|
}
|
|
if ((self._time === prevTime || !self._first) && !force && !internalForce && !pauseTween) {
|
|
return;
|
|
} else if (!self._initted) {
|
|
self._initted = true;
|
|
}
|
|
|
|
if (!self._active) if (!self._paused && self._time !== prevTime && time > 0) {
|
|
self._active = true; //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example.
|
|
}
|
|
|
|
if (prevTime === 0) if (self.vars.onStart) if (self._time !== 0 || !self._duration) if (!suppressEvents) {
|
|
self._callback("onStart");
|
|
}
|
|
|
|
curTime = self._time;
|
|
if (curTime >= prevTime) {
|
|
tween = self._first;
|
|
while (tween) {
|
|
next = tween._next; //record it here because the value could change after rendering...
|
|
if (curTime !== self._time || (self._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
|
|
break;
|
|
} else if (tween._active || (tween._startTime <= curTime && !tween._paused && !tween._gc)) {
|
|
if (pauseTween === tween) {
|
|
self.pause();
|
|
self._pauseTime = pauseTime; //so that when we resume(), it's starting from exactly the right spot (the pause() method uses the rawTime for the parent, but that may be a bit too far ahead)
|
|
}
|
|
if (!tween._reversed) {
|
|
tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
|
|
} else {
|
|
tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
|
|
}
|
|
}
|
|
tween = next;
|
|
}
|
|
} else {
|
|
tween = self._last;
|
|
while (tween) {
|
|
next = tween._prev; //record it here because the value could change after rendering...
|
|
if (curTime !== self._time || (self._paused && !prevPaused)) { //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
|
|
break;
|
|
} else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) {
|
|
if (pauseTween === tween) {
|
|
pauseTween = tween._prev; //the linked list is organized by _startTime, thus it's possible that a tween could start BEFORE the pause and end after it, in which case it would be positioned before the pause tween in the linked list, but we should render it before we pause() the timeline and cease rendering. This is only a concern when going in reverse.
|
|
while (pauseTween && pauseTween.endTime() > self._time) {
|
|
pauseTween.render( (pauseTween._reversed ? pauseTween.totalDuration() - ((time - pauseTween._startTime) * pauseTween._timeScale) : (time - pauseTween._startTime) * pauseTween._timeScale), suppressEvents, force);
|
|
pauseTween = pauseTween._prev;
|
|
}
|
|
pauseTween = null;
|
|
self.pause();
|
|
self._pauseTime = pauseTime; //so that when we resume(), it's starting from exactly the right spot (the pause() method uses the rawTime for the parent, but that may be a bit too far ahead)
|
|
}
|
|
if (!tween._reversed) {
|
|
tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
|
|
} else {
|
|
tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
|
|
}
|
|
}
|
|
tween = next;
|
|
}
|
|
}
|
|
|
|
if (self._onUpdate) if (!suppressEvents) {
|
|
if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.
|
|
_lazyRender();
|
|
}
|
|
self._callback("onUpdate");
|
|
}
|
|
|
|
if (callback) if (!self._gc) if (prevStart === self._startTime || prevTimeScale !== self._timeScale) if (self._time === 0 || totalDur >= self.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate
|
|
if (isComplete) {
|
|
if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onComplete on a timeline that reports/checks tweened values.
|
|
_lazyRender();
|
|
}
|
|
if (self._timeline.autoRemoveChildren) {
|
|
self._enabled(false, false);
|
|
}
|
|
self._active = false;
|
|
}
|
|
if (!suppressEvents && self.vars[callback]) {
|
|
self._callback(callback);
|
|
}
|
|
}
|
|
};
|
|
|
|
p._hasPausedChild = function() {
|
|
var tween = this._first;
|
|
while (tween) {
|
|
if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) {
|
|
return true;
|
|
}
|
|
tween = tween._next;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) {
|
|
ignoreBeforeTime = ignoreBeforeTime || -9999999999;
|
|
var a = [],
|
|
tween = this._first,
|
|
cnt = 0;
|
|
while (tween) {
|
|
if (tween._startTime < ignoreBeforeTime) {
|
|
//do nothing
|
|
} else if (tween instanceof TweenLite) {
|
|
if (tweens !== false) {
|
|
a[cnt++] = tween;
|
|
}
|
|
} else {
|
|
if (timelines !== false) {
|
|
a[cnt++] = tween;
|
|
}
|
|
if (nested !== false) {
|
|
a = a.concat(tween.getChildren(true, tweens, timelines));
|
|
cnt = a.length;
|
|
}
|
|
}
|
|
tween = tween._next;
|
|
}
|
|
return a;
|
|
};
|
|
|
|
p.getTweensOf = function(target, nested) {
|
|
var disabled = this._gc,
|
|
a = [],
|
|
cnt = 0,
|
|
tweens, i;
|
|
if (disabled) {
|
|
this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here.
|
|
}
|
|
tweens = TweenLite.getTweensOf(target);
|
|
i = tweens.length;
|
|
while (--i > -1) {
|
|
if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) {
|
|
a[cnt++] = tweens[i];
|
|
}
|
|
}
|
|
if (disabled) {
|
|
this._enabled(false, true);
|
|
}
|
|
return a;
|
|
};
|
|
|
|
p.recent = function() {
|
|
return this._recent;
|
|
};
|
|
|
|
p._contains = function(tween) {
|
|
var tl = tween.timeline;
|
|
while (tl) {
|
|
if (tl === this) {
|
|
return true;
|
|
}
|
|
tl = tl.timeline;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) {
|
|
ignoreBeforeTime = ignoreBeforeTime || 0;
|
|
var tween = this._first,
|
|
labels = this._labels,
|
|
p;
|
|
while (tween) {
|
|
if (tween._startTime >= ignoreBeforeTime) {
|
|
tween._startTime += amount;
|
|
}
|
|
tween = tween._next;
|
|
}
|
|
if (adjustLabels) {
|
|
for (p in labels) {
|
|
if (labels[p] >= ignoreBeforeTime) {
|
|
labels[p] += amount;
|
|
}
|
|
}
|
|
}
|
|
return this._uncache(true);
|
|
};
|
|
|
|
p._kill = function(vars, target) {
|
|
if (!vars && !target) {
|
|
return this._enabled(false, false);
|
|
}
|
|
var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target),
|
|
i = tweens.length,
|
|
changed = false;
|
|
while (--i > -1) {
|
|
if (tweens[i]._kill(vars, target)) {
|
|
changed = true;
|
|
}
|
|
}
|
|
return changed;
|
|
};
|
|
|
|
p.clear = function(labels) {
|
|
var tweens = this.getChildren(false, true, true),
|
|
i = tweens.length;
|
|
this._time = this._totalTime = 0;
|
|
while (--i > -1) {
|
|
tweens[i]._enabled(false, false);
|
|
}
|
|
if (labels !== false) {
|
|
this._labels = {};
|
|
}
|
|
return this._uncache(true);
|
|
};
|
|
|
|
p.invalidate = function() {
|
|
var tween = this._first;
|
|
while (tween) {
|
|
tween.invalidate();
|
|
tween = tween._next;
|
|
}
|
|
return Animation.prototype.invalidate.call(this);;
|
|
};
|
|
|
|
p._enabled = function(enabled, ignoreTimeline) {
|
|
if (enabled === this._gc) {
|
|
var tween = this._first;
|
|
while (tween) {
|
|
tween._enabled(enabled, true);
|
|
tween = tween._next;
|
|
}
|
|
}
|
|
return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline);
|
|
};
|
|
|
|
p.totalTime = function(time, suppressEvents, uncapped) {
|
|
this._forcingPlayhead = true;
|
|
var val = Animation.prototype.totalTime.apply(this, arguments);
|
|
this._forcingPlayhead = false;
|
|
return val;
|
|
};
|
|
|
|
p.duration = function(value) {
|
|
if (!arguments.length) {
|
|
if (this._dirty) {
|
|
this.totalDuration(); //just triggers recalculation
|
|
}
|
|
return this._duration;
|
|
}
|
|
if (this.duration() !== 0 && value !== 0) {
|
|
this.timeScale(this._duration / value);
|
|
}
|
|
return this;
|
|
};
|
|
|
|
p.totalDuration = function(value) {
|
|
if (!arguments.length) {
|
|
if (this._dirty) {
|
|
var max = 0,
|
|
self = this,
|
|
tween = self._last,
|
|
prevStart = 999999999999,
|
|
prev, end;
|
|
while (tween) {
|
|
prev = tween._prev; //record it here in case the tween changes position in the sequence...
|
|
if (tween._dirty) {
|
|
tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it.
|
|
}
|
|
if (tween._startTime > prevStart && self._sortChildren && !tween._paused && !self._calculatingDuration) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence
|
|
self._calculatingDuration = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add(), like _parseTimeOrLabel().
|
|
self.add(tween, tween._startTime - tween._delay);
|
|
self._calculatingDuration = 0;
|
|
} else {
|
|
prevStart = tween._startTime;
|
|
}
|
|
if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.
|
|
max -= tween._startTime;
|
|
if (self._timeline.smoothChildTiming) {
|
|
self._startTime += tween._startTime / self._timeScale;
|
|
self._time -= tween._startTime;
|
|
self._totalTime -= tween._startTime;
|
|
self._rawPrevTime -= tween._startTime;
|
|
}
|
|
self.shiftChildren(-tween._startTime, false, -9999999999);
|
|
prevStart = 0;
|
|
}
|
|
end = tween._startTime + (tween._totalDuration / tween._timeScale);
|
|
if (end > max) {
|
|
max = end;
|
|
}
|
|
tween = prev;
|
|
}
|
|
self._duration = self._totalDuration = max;
|
|
self._dirty = false;
|
|
}
|
|
return this._totalDuration;
|
|
}
|
|
return (value && this.totalDuration()) ? this.timeScale(this._totalDuration / value) : this;
|
|
};
|
|
|
|
p.paused = function(value) {
|
|
if (value === false && this._paused) { //if there's a pause directly at the spot from where we're unpausing, skip it.
|
|
var tween = this._first;
|
|
while (tween) {
|
|
if (tween._startTime === this._time && tween.data === "isPause") {
|
|
tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire.
|
|
}
|
|
tween = tween._next;
|
|
}
|
|
}
|
|
return Animation.prototype.paused.apply(this, arguments);
|
|
};
|
|
|
|
p.usesFrames = function() {
|
|
var tl = this._timeline;
|
|
while (tl._timeline) {
|
|
tl = tl._timeline;
|
|
}
|
|
return (tl === Animation._rootFramesTimeline);
|
|
};
|
|
|
|
p.rawTime = function(wrapRepeats) {
|
|
return (wrapRepeats && (this._paused || (this._repeat && this.time() > 0 && this.totalProgress() < 1))) ? this._totalTime % (this._duration + this._repeatDelay) : this._paused ? this._totalTime : (this._timeline.rawTime(wrapRepeats) - this._startTime) * this._timeScale;
|
|
};
|
|
|
|
return TimelineLite;
|
|
|
|
}, true);
|
|
|
|
export var TimelineLite = globals.TimelineLite;
|
|
export { TimelineLite as default };
|