75 lines
6.7 KiB
JavaScript
75 lines
6.7 KiB
JavaScript
/*!
|
|
* VERSION: 1.2.0
|
|
* DATE: 2018-08-27
|
|
* UPDATES AND DOCS AT: http://greensock.com
|
|
*
|
|
* This file is to be used as a simple template for writing your own plugin. See the
|
|
* TweenPlugin docs for more details.
|
|
*
|
|
* You can start by doing a search for "yourCustomProperty" and replace it with whatever the name
|
|
* of your property is. This way of defining a plugin was introduced in version 1.9.0 - previous versions
|
|
* of TweenLite won't work with this.
|
|
*
|
|
* @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 { _gsScope } from "./TweenLite.js";
|
|
|
|
export var YourPlugin = _gsScope._gsDefine.plugin({
|
|
propName: "yourCustomProperty", //the name of the property that will get intercepted and handled by this plugin (obviously change it to whatever you want, typically it is camelCase starting with lowercase).
|
|
priority: 0, //the priority in the rendering pipeline (0 by default). A priority of -1 would mean this plugin will run after all those with 0 or greater. A priority of 1 would get run before 0, etc. This only matters when a plugin relies on other plugins finishing their work before it runs (or visa-versa)
|
|
API: 2, //the API should stay 2 - it just gives us a way to know the method/property structure so that if in the future we change to a different TweenPlugin architecture, we can identify this plugin's structure.
|
|
version: "1.0.0", //your plugin's version number
|
|
overwriteProps: ["yourCustomProperty"], //an array of property names whose tweens should be overwritten by this plugin. For example, if you create a "scale" plugin that handles both "scaleX" and "scaleY", the overwriteProps would be ["scaleX","scaleY"] so that if there's a scaleX or scaleY tween in-progress when a new "scale" tween starts (using this plugin), it would overwrite the scaleX or scaleY tween.
|
|
|
|
/*
|
|
* The init function is called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run. It receives 3 parameters:
|
|
* 1) target [object] - the target of the tween. In cases where the tween's original target is an array (or jQuery object), this target will be the individual object inside that array (a new plugin instance is created for each target in the array). For example, TweenLite.to([obj1, obj2, obj3], 1, {x:100}) the target will be obj1 or obj2 or obj3 rather than the array containing them.
|
|
* 2) value [*] - whatever value is passed as the special property value. For example, TweenLite.to(element, 1, {yourCustomProperty:3}) the value would be 3. Or for TweenLite.to(element, 1, {yourCustomProperty:{subProp1:3, subProp2:"whatever"}});, value would be {subProp1:3, subProp2:"whatever"}.
|
|
* 3) tween [TweenLite] - the TweenLite (or TweenMax) instance that is managing this plugin instance. This can be useful if you need to check certain state-related properties on the tween (maybe in the set method) like its duration or time. Most of the time, however, you don't need to do anything with the tween. It is provided just in case you want to reference it.
|
|
* 4) index [integer] - the index number of the target in the tween. For example, if an array is passed in as the target (or selector text), this would be 0 for the first one, 1 for the second, 2 for the third, etc. This was introduced in GSAP 1.19.0
|
|
*
|
|
* This function should return true unless you want to have TweenLite/Max skip the plugin altogether and instead treat the property/value like a normal tween (as if the plugin wasn't activated). This is rarely useful, so you should almost always return true.
|
|
*/
|
|
init: function(target, value, tween, index) {
|
|
this._target = target; //we record the target so that we can refer to it in the set method when doing updates.
|
|
|
|
/* Next, we create a property tween for "scaleX" and "scaleY" properties of our target
|
|
* (we're just using them as a examples of how to set up a property tween with a name, start, and end value).
|
|
* the _addTween() method accepts the following parameters:
|
|
* 1) target [object] - target object whose property this tween will control.
|
|
* 2) property [string] - the name of the property, like "scaleX" or "scaleY"
|
|
* 3) start [number] - The starting value of the property. For example, if you're tweening from 0 to 100, start would be 0.
|
|
* 4) end [number] - the ending value of the property. For example, if you're tweening from 0 to 100, end would be 100.
|
|
* 5) overwriteProperty [string] - the name that gets registered as the overwrite property so that if another concurrent tween of the same target gets created and it is tweening a property with this name, this one will be overwritten. Typically this is the same as "property".
|
|
* 6) round [boolean] - if true, the updated value on each update will be rounded to the nearest integer. [false by default]
|
|
* You do NOT need to use _addTween() at all. It is merely a convenience. You can record your own values internally or whatever you want.
|
|
*/
|
|
this._addTween(target, "scaleX", target.scaleX, value, "scaleX", false);
|
|
this._addTween(target, "scaleY", target.scaleY, value, "scaleY", false);
|
|
|
|
//now, just for kicks, we'll record the starting "alpha" value and amount of change so that we can manage this manually rather than _addTween() (again, totally fictitious, just for an example)
|
|
this._alphaStart = target.alpha;
|
|
this._alphaChange = value.alpha - target.alpha;
|
|
|
|
//always return true unless we want to scrap the plugin and have the value treated as a normal property tween (very uncommon)
|
|
return true;
|
|
},
|
|
|
|
//[optional] - called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.). If you're using this._super._addTween() for all your tweens and you don't need to do anything special on each frame besides updating those values, you can omit this "set" function altogether.
|
|
set: function(ratio) {
|
|
//since we used _addTween() inside init function, it created some property tweens that we'll update by calling the parent prototype's setRatio() (otherwise, the property tweens wouldn't get their values updated). this._super refers to the TweenPlugin prototype from which the plugin inherits (not that you need to worry about that).
|
|
this._super.setRatio.call(this, ratio);
|
|
|
|
//now manually set the alpha
|
|
this._target.alpha = this._alphaStart + this._alphaChange * ratio;
|
|
}
|
|
|
|
});
|
|
|
|
// Now export it for ES6
|
|
export { YourPlugin as default }; |