Skip to content

Commit 4c6945e

Browse files
gskinnergskinner
committed
Add TweenGroup
1 parent daaee60 commit 4c6945e

File tree

6 files changed

+563
-5
lines changed

6 files changed

+563
-5
lines changed

‎build/config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"../src/tweenjs/Timeline.js",
1212
"../src/tweenjs/Ease.js",
1313
"../src/tweenjs/plugins/MotionGuidePlugin.js",
14+
"../src/tweenjs/TweenGroup.js",
1415
"../src/tweenjs/version.js"
1516
],
1617

‎build/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"grunt-contrib-compress": "~0.12.0",
1414
"grunt-contrib-copy": "~0.7.0",
1515
"grunt-contrib-sass": "^0.8.1",
16-
"grunt-contrib-clean":"^0.4.0",
16+
"grunt-contrib-clean": "^0.4.0",
1717
"lodash": "~0.9.2"
1818
},
1919
"engine": "node >= 0.10.22"

‎examples/tweenGroup.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>TweenJS: Tween Group</title>
5+
6+
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
7+
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
8+
<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
9+
<script src="../_assets/js/examples.js" type="text/javascript"></script>
10+
11+
<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
12+
<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
13+
<!-- We also provide hosted minified versions of all CreateJS libraries.
14+
http://code.createjs.com -->
15+
16+
<script id="editable">
17+
var canvas, stage, group;
18+
19+
function init() {
20+
canvas = document.getElementById("testCanvas");
21+
stage = new createjs.Stage(canvas);
22+
var w = canvas.width;
23+
24+
group = new createjs.TweenGroup();
25+
26+
// create shapes:
27+
var redBall = getBall("red", 0.1, 0.3);
28+
var blueBall = getBall("blue", 0.1, 0.5);
29+
var greenBall = getBall("green", 0.1, 0.7);
30+
31+
// create tweens and add them to the group:
32+
group.get(redBall, {loop: -1, bounce:true}).to({x: w*0.9}, 1000);
33+
group.get(blueBall, {loop: -1, bounce:true}).to({x: w*0.9}, 1500);
34+
group.get(greenBall, {loop: -1, bounce:true}).to({x: w*0.9}, 2000);
35+
36+
createjs.Ticker.timingMode = createjs.Ticker.RAF;
37+
createjs.Ticker.addEventListener("tick", stage);
38+
}
39+
40+
function getBall(color, x, y) {
41+
var ball = new createjs.Shape();
42+
ball.graphics.beginFill(color).drawCircle(0, 0, canvas.height*0.1);
43+
ball.x = canvas.width*x;
44+
ball.y = canvas.height*y;
45+
stage.addChild(ball);
46+
return ball;
47+
}
48+
49+
function setTimeScale(val) {
50+
group.timeScale = val;
51+
timeScaleFld.innerText = val.toFixed(1);
52+
}
53+
54+
function togglePaused() {
55+
console.log(group.paused);
56+
group.paused = !group.paused;
57+
pausedFld.innerText = group.paused;
58+
}
59+
60+
</script>
61+
</head>
62+
<body onload="init();">
63+
64+
<div>
65+
<header class="TweenJS">
66+
<h1>TweenGroup</h1>
67+
68+
<p>
69+
<code>group.timeScale = <b id="timeScaleFld">1.0</b></code> <input type="range" id="timeScale" min="10" max="200" value="100" oninput="setTimeScale(this.value/100)"><br>
70+
<code>group.paused = <b id="pausedFld">false</b></code> <input type="button" id="paused" value="toggle" onclick="togglePaused()">
71+
</p>
72+
</header>
73+
74+
<canvas id="testCanvas" width="960" height="400"></canvas>
75+
76+
</div>
77+
78+
</body>
79+
</html>

‎lib/tweenjs-NEXT.js‎

Lines changed: 246 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1+
/*!
2+
* TweenJS
3+
* Visit http://createjs.com/ for documentation, updates and examples.
4+
*
5+
* Copyright (c) 2010 gskinner.com, inc.
6+
*
7+
* Permission is hereby granted, free of charge, to any person
8+
* obtaining a copy of this software and associated documentation
9+
* files (the "Software"), to deal in the Software without
10+
* restriction, including without limitation the rights to use,
11+
* copy, modify, merge, publish, distribute, sublicense, and/or sell
12+
* copies of the Software, and to permit persons to whom the
13+
* Software is furnished to do so, subject to the following
14+
* conditions:
15+
*
16+
* The above copyright notice and this permission notice shall be
17+
* included in all copies or substantial portions of the Software.
18+
*
19+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
20+
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
21+
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
22+
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
23+
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
24+
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
25+
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
26+
* OTHER DEALINGS IN THE SOFTWARE.
27+
*/
128

229

330
//##############################################################################
@@ -1496,6 +1523,15 @@ this.createjs = this.createjs||{};
14961523
* @protected
14971524
*/
14981525
this._status = -1;
1526+
1527+
/**
1528+
* Tick id compared to Tween._inTick when removing tweens from the tick list in a tick stack.
1529+
* @property _lastTick
1530+
* @type Number
1531+
* @default 0
1532+
* @protected
1533+
*/
1534+
this._lastTick = 0;
14991535

15001536
if (props) {
15011537
this.useTicks = !!props.useTicks;
@@ -2885,11 +2921,11 @@ this.createjs = this.createjs||{};
28852921
*
28862922
* Most methods on Ease can be passed directly as easing functions:
28872923
*
2888-
* Tween.get(target).to({x:100}, 500, Ease.linear);
2924+
* createjs.Tween.get(target).to({x:100}, 500, createjs.Ease.linear);
28892925
*
28902926
* However, methods beginning with "get" will return an easing function based on parameter values:
28912927
*
2892-
* Tween.get(target).to({y:200}, 500, Ease.getPowIn(2.2));
2928+
* createjs.Tween.get(target).to({y:200}, 500, createjs.Ease.getPowIn(2.2));
28932929
*
28942930
* Please see the <a href="http://www.createjs.com/Demos/TweenJS/Tween_SparkTable">spark table demo</a> for an
28952931
* overview of the different ease types on <a href="http://tweenjs.com">TweenJS.com</a>.
@@ -3801,6 +3837,213 @@ this.createjs = this.createjs||{};
38013837

38023838
}());
38033839

3840+
//##############################################################################
3841+
// TweenGroup.js
3842+
//##############################################################################
3843+
3844+
this.createjs = this.createjs||{};
3845+
3846+
(function() {
3847+
"use strict";
3848+
3849+
/**
3850+
* TweenGroup allows you to pause and time scale a collection of tweens or timelines. For example, this could be
3851+
* used to stop all tweens associated with a view when leaving that view.
3852+
*
3853+
* myView.tweens = new createjs.TweenGroup();
3854+
* myView.tweens.get(spinner, {loop: -1}).to({rotation:360}, 500);
3855+
* myView.tweens.get(image).to({alpha: 1}, 5000);
3856+
* // ... make all tweens in this view run in slow motion:
3857+
* myView.tweens.timeScale = 0.1;
3858+
* // ... pause all this view's active tweens:
3859+
* myView.tweens.paused = true; // stop all tweens.
3860+
*
3861+
* You can add a group to another group to nest it.
3862+
*
3863+
* viewTweenGroup.add(buttonTweenGroup);
3864+
*
3865+
* Tweens are automatically removed from the group when they complete (ie. when the `complete` event fires).
3866+
*
3867+
* @class TweenGroup
3868+
* @param {Boolean} [paused] The initial paused property value for this group.
3869+
* @param {Number} [timeScale] The intiial timeScale property value for this group.
3870+
* @constructor
3871+
**/
3872+
function TweenGroup(paused, timeScale) {
3873+
this._tweens = [];
3874+
this.paused = paused;
3875+
this.timeScale = timeScale;
3876+
this.__onComplete = this._onComplete.bind(this);
3877+
};
3878+
var s = TweenGroup, p = TweenGroup.prototype;
3879+
3880+
// getter / setters:
3881+
3882+
/**
3883+
* @method _setPaused
3884+
* @param {Boolean} value
3885+
* @protected
3886+
**/
3887+
p._setPaused = function(value) {
3888+
var tweens = this._tweens;
3889+
this._paused = value = !!value;
3890+
for (var i=tweens.length-1; i>=0; i--) {
3891+
tweens[i].paused = value;
3892+
}
3893+
};
3894+
3895+
/**
3896+
* @method _getPaused
3897+
* @return {Boolean}
3898+
* @protected
3899+
**/
3900+
p._getPaused = function() {
3901+
return this._paused;
3902+
};
3903+
3904+
/**
3905+
* @method _setTimeScale
3906+
* @param {Number} value
3907+
* @protected
3908+
**/
3909+
p._setTimeScale = function(value) {
3910+
var tweens = this._tweens;
3911+
this._timeScale = value = value||null;
3912+
for (var i=tweens.length-1; i>=0; i--) {
3913+
tweens[i].timeScale = value;
3914+
}
3915+
};
3916+
3917+
/**
3918+
* @method _getTimeScale
3919+
* @return {Number}
3920+
* @protected
3921+
**/
3922+
p._getTimeScale = function() {
3923+
return this._timeScale;
3924+
};
3925+
3926+
/**
3927+
* Pauses or unpauses the group. The value is propagated to every tween or group that has been added to this group.
3928+
* @property paused
3929+
* @type Boolean
3930+
**/
3931+
3932+
/**
3933+
* Sets the time scale of the group. The value is propagated to every tween or group that has been added to this group.
3934+
* @property timeScale
3935+
* @type Number
3936+
**/
3937+
try {
3938+
Object.defineProperties(p, {
3939+
paused: { set: p._setPaused, get: p._getPaused },
3940+
timeScale: { set: p._setTimeScale, get: p._getTimeScale }
3941+
});
3942+
} catch (e) {}
3943+
3944+
// public methods:
3945+
/**
3946+
* Shortcut method to create a new tween instance via {{#crossLink "Tween/get"}}{{/crossLink}} and immediately add it to this group.
3947+
* @method get
3948+
* @param {Object} target The target object that will have its properties tweened.
3949+
* @param {Object} [props] The configuration properties to apply to this instance. See {{#crossLink "Tween/get"}}{{/crossLink}} for more information.
3950+
* @return {Tween} A reference to the created tween.
3951+
**/
3952+
p.get = function(target, props) {
3953+
return this.add(createjs.Tween.get(target, props));
3954+
}
3955+
3956+
/**
3957+
* Adds a Tween, Timeline, or TweenGroup instance to this group. The added object will immediately have its `paused` and `timeScale` properties
3958+
* set to the value of this group's corresponding properties.
3959+
*
3960+
* myGroup.paused = true;
3961+
* myGroup.add(myTween); // myTween is now paused
3962+
* // ...
3963+
* myGroup.paused = false; // myTween is now unpaused
3964+
*
3965+
* You can also add multiple objects:
3966+
*
3967+
* myGroup.add(myTween, myTween2, myTimeline, myOtherGroup);
3968+
*
3969+
* @method add
3970+
* @param {Tween,Timeline,TweenGroup} tween The tween, timeline, or tween group to add.
3971+
* @return {Object} This tween that was added.
3972+
**/
3973+
p.add = function(tween) {
3974+
var l = arguments.length, tweens = this._tweens;
3975+
for (var i=0, l=arguments.length; i<l; i++) {
3976+
tween = arguments[i];
3977+
tween.paused = this._paused;
3978+
if (this._timeScale !== null) { tween.timeScale = this._timeScale; }
3979+
tweens.push(tween);
3980+
tween.addEventListener&&tween.addEventListener("complete", this.__onComplete);
3981+
}
3982+
return arguments[l-1];
3983+
}
3984+
3985+
/**
3986+
* Removes a Tween, Timeline, or TweenGroup instance from this group.
3987+
*
3988+
* myGroup.remove(myTween);
3989+
*
3990+
* You can also remove multiple objects:
3991+
*
3992+
* myGroup.remove(myTween, myTween2, myTimeline, myOtherGroup);
3993+
*
3994+
* Note that tweens and timelines are automatically removed when their `complete` event fires.
3995+
* @method remove
3996+
* @param {Tween,Timeline,TweenGroup} tween The tween, timeline, or tween group to remove.
3997+
**/
3998+
p.remove = function(tween) {
3999+
var l = arguments.length, tweens = this._tweens;
4000+
for (var i=0; i<l; i++) {
4001+
tween = arguments[i];
4002+
for (var j=tweens.length-1; j>=0; j--) {
4003+
if (tweens[j] === tween) {
4004+
tweens.splice(j, 1);
4005+
tween.removeEventListener&&tween.removeEventListener("complete", this.__onComplete);
4006+
}
4007+
}
4008+
}
4009+
}
4010+
4011+
/**
4012+
* Pauses all child tweens/timelines/groups and removes them from this group. Child groups will also be reset.
4013+
* @method reset
4014+
* @param {Boolean} keepGroups If true, groups will not be removed, only reset.
4015+
* @return {TweenGroup} This instance (for chaining calls).
4016+
* @chainable
4017+
**/
4018+
p.reset = function(keepGroups) {
4019+
var tweens = this._tweens;
4020+
for (var i=tweens.length-1; i>=0; i--) {
4021+
var tween = tweens[i];
4022+
if (tween instanceof TweenGroup) {
4023+
tween.reset();
4024+
if (keepGroups) { continue; }
4025+
}
4026+
tweens.splice(i,1);
4027+
tween.paused = true;
4028+
tween.removeEventListener&&tween.removeEventListener("complete", this.__onComplete);
4029+
}
4030+
return this;
4031+
}
4032+
4033+
// private methods:
4034+
4035+
/**
4036+
* @method _onComplete
4037+
* @param {Object} evt
4038+
* @protected
4039+
**/
4040+
p._onComplete = function(evt) {
4041+
this.remove(evt.target);
4042+
}
4043+
4044+
createjs.TweenGroup = s;
4045+
}());
4046+
38044047
//##############################################################################
38054048
// version.js
38064049
//##############################################################################
@@ -3831,6 +4074,6 @@ this.createjs = this.createjs || {};
38314074
* @type String
38324075
* @static
38334076
**/
3834-
s.buildDate = /*=date*/"Wed, 07 Feb 2018 22:16:16 GMT"; // injected by build process
4077+
s.buildDate = /*=date*/"Sat, 21 Apr 2018 23:26:12 GMT"; // injected by build process
38354078

38364079
})();

‎lib/tweenjs-NEXT.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)