tween24
Version:
Tween24.js is animation library that enables fast coding using method chains.
1,326 lines (1,164 loc) • 127 kB
text/typescript
import { Ticker24 } from "./core/Ticker24";
import { Ease24 } from "./Ease24";
import { Tween24Event } from "./core/Tween24Event";
import { Updater } from "./core/updaters/Updater";
import { ObjectUpdater } from "./core/updaters/ObjectUpdater";
import { TransformUpdater } from "./core/updaters/TransformUpdater";
import { FunctionExecuter } from "./core/FunctionExecuter";
import { StyleUpdater } from "./core/updaters/StyleUpdater";
import { MultiUpdater } from "./core/updaters/MultiUpdater";
import { ClassUtil } from "./utils/ClassUtil";
import { HTMLUtil } from "./utils/HTMLUtil";
import { StringUtil } from "./utils/StringUtil";
import { Sort24 } from "./index";
import { Text24 } from "./utils/Text24";
import { Event24 } from "./Event24";
import { ParamUpdater } from "./core/updaters/ParamUpdater";
import { LinkedList } from "./core/data/LinkedList";
import { LinkedListItem } from "./core/data/LinkedListItem";
export class Tween24 {
// Static
static readonly VERSION:string = "1.5.0";
private static readonly _TYPE_TWEEN :string = "tween";
private static readonly _TYPE_TWEEN_VELOCITY :string = "tween_velocity";
private static readonly _TYPE_TWEEN_TEXT :string = "tween_text";
private static readonly _TYPE_TWEEN_TEXT_VELOCITY:string = "tween_text_velocity";
private static readonly _TYPE_PROP :string = "prop";
private static readonly _TYPE_PROP_TEXT :string = "prop_text";
private static readonly _TYPE_WAIT :string = "wait";
private static readonly _TYPE_WAIT_EVENT :string = "wait_event";
private static readonly _TYPE_WAIT_EVENT_AND_FUNC:string = "wait_event_and_func";
private static readonly _TYPE_SERIAL :string = "serial";
private static readonly _TYPE_PARALLEL :string = "parallel";
private static readonly _TYPE_LAG :string = "lag";
private static readonly _TYPE_LOOP :string = "loop";
private static readonly _TYPE_FUNC :string = "func";
private static readonly _TYPE_IF_CASE :string = "if_case";
private static readonly _TYPE_IF_CASE_BY_FUNC :string = "if_case_by_func";
private static readonly _STATUS_PLAYING:string = "playing";
private static readonly _STATUS_PAUSING:string = "pausing";
private static readonly _STATUS_SKIPING:string = "skiping";
private static readonly _STATUS_STOPING:string = "stoping";
private static readonly _STATUS_WAITING:string = "waiting";
static ticker:Ticker24;
static ease :Ease24;
private static _playingTweens :LinkedList;
private static _manualPlayingTweens :LinkedList;
private static _playingTweensByTarget:Map<any, LinkedList>;
private static _tweensById :Map<string, Tween24>;
private static _tweensByGroupId:Map<string, Tween24[]>;
private static _defaultEasing :Function = Ease24._Linear;
private static _debugMode :boolean = false;
private static _numCreateTween :number = 0;
private static _globalTimeScale:number = 1;
private static _isSkipHello :boolean = false;
private _playingTweensItem:LinkedListItem|undefined;
private _playingTweensByTargetItem:LinkedListItem|undefined;
private _playingTweensByTargetList:LinkedList|undefined;
private _playingTweensByMultiTargetItem:Map<any, LinkedListItem>|undefined;
// Tween param
private _singleTarget:any |null = null;
private _multiTarget :any[]|null = null;
private _easing :Function = Tween24._defaultEasing;;
private _type :string = "";
private _time :number = NaN;
private _velocity :number = NaN;
private _delayTime:number = NaN;
private _startTime:number = NaN;
private _progress :number = 0;
private _timeScale :number = 1;
private _delayTimeScale :number = 1;
private _totalTimeScale :number = 1;
private _totalDelayTimeScale:number = 1;
private _debugMode :boolean = false;
private _numLayers :number = 0;
private _serialNumber :number = 0;
private _tweenId :string = "";
private _tweenGroupId :string = "";
private _targetString :string = "";
private _targetQuery :string|null = null;
private _useWillChange:boolean = false;
// Updater
private _objectUpdater :ObjectUpdater |null = null;
private _objectMultiUpdater :MultiUpdater |null = null;
private _transformUpdater :TransformUpdater|null = null;
private _transformMultiUpdater:MultiUpdater |null = null;
private _styleUpdater :StyleUpdater |null = null;
private _styleMultiUpdater :MultiUpdater |null = null;
private _allUpdaters :LinkedList |null = null;
// Refer
private _root :Tween24|null = null;
private _parent:Tween24|null = null;
private _next :Tween24|null = null;
__next :Tween24|null = null;
__prev :Tween24|null = null;
// Status
private _isDOM :boolean = false;
private _isRoot :boolean = false;
private _isManual :boolean = false;
private _isTrigger:boolean = false;
private _inited :boolean = false;
private _status :string = Tween24._STATUS_STOPING;
private _firstUpdated :boolean = false;
private _isContainerTween :boolean = false;
private _createdBasicUpdater:boolean = false;
// Action & Callback
private _functionExecuters:{[key:string]:FunctionExecuter}|null = null;
// Container Tween
private _firstTween :Tween24 |null = null;
private _childTween :Tween24[] |null = null;
private _playingChildTween :LinkedList|null = null;
private _originalChildTween :Tween24[] |null = null;
private _numCompleteChildren:number = 0;
// Lag
private _lagTime :number = NaN;
private _totalLagTime:number = NaN;
private _lagSort :Function|null = null;
private _lagEasing :Function|null = null;
// Loop & Repeat
private _numIterations :number = 1;
private _currentIterations:number = 0;
// If Case
private _ifFunc :Function|null = null;
private _trueTween :Tween24 |null = null;
private _falseTween:Tween24 |null = null;
// Dispatch event
private _dispatchEventTarget:any;
private _dispatchEventType :string|null = null;
// Trigger & Jump
private _useJump :boolean = false;
private _triggered :boolean = false;
private _jumped :boolean = false;
private _jumpProg :number = NaN;
// Tween FPS
__fps:number = 0;
__beforeTime:number = 0;
constructor() {
// Initialize
if (!Tween24.ease) {
if (!Tween24._isSkipHello) {
if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1) {
var args = [
"\n %c %c %c Tween24.js - ver." + Tween24.VERSION + " %c << https://github.com/a24/tween24js >> \n",
"background: #247570; padding:5px 0;",
"background: #3CC2B9; padding:5px 0;",
"color: #247570; background: #fff2cd; padding:5px 0;",
"color: #ffffff; background: #247570; padding:5px 0;"
];
console.log.apply(console.log, args);
}
else if (console) {
console.log("\n Tween24.js - ver." + Tween24.VERSION + " << https://github.com/a24/tween24js >> \n ");
}
}
Tween24.ease = new Ease24();
Tween24.ticker = new Ticker24();
Tween24._playingTweens = new LinkedList();
Tween24._playingTweensByTarget = new Map<any, LinkedList>();
}
}
// ------------------------------------------
//
// Tween control
//
// ------------------------------------------
/**
* トゥイーンを再生します。
* @memberof Tween24
*/
play = () => {
this._isManual = false;
this._commonRootPlay();
}
/**
* トゥイーンを手動アップデート式で再生します。
* 関数 manualUpdate() を実行すると更新されます。
* @memberof Tween24
*/
manualPlay = () => {
Tween24._manualPlayingTweens ||= new LinkedList();
this._isManual = true;
this._commonRootPlay();
}
private _commonRootPlay = () => {
if (this._status == Tween24._STATUS_PAUSING) {
this._resume();
if (!this._isManual) Tween24.ticker.add(this);
else Tween24._manualPlayingTweens.push(this);
this._functionExecute(Tween24Event.RESUME);
}
else {
if (this._status != Tween24._STATUS_PLAYING && this._status != Tween24._STATUS_WAITING) {
this._root = this;
this._isRoot = true;
this._inited = false;
this._firstUpdated = false;
this._play();
if (!this._isManual) Tween24.ticker.add(this);
else Tween24._manualPlayingTweens.push(this);
this._functionExecute(Tween24Event.PLAY);
}
}
}
private _play = () => {
if (this._isRoot) {
this._numLayers = 0;
}
else {
this._root = this._parent?._root || this._parent;
this._numLayers = this._parent ? this._parent._numLayers + 1 : 1;
}
this._status = Tween24._STATUS_PLAYING;
// Time scale
this._updateTimeScale();
// Velocity
if (this._type == Tween24._TYPE_TWEEN_VELOCITY || this._type == Tween24._TYPE_TWEEN_TEXT_VELOCITY) {
const deltas = [0];
this._allUpdaters?.map((updater:Updater) => {
updater.init(false);
deltas.push(updater.getMaxAbsDelta());
});
this._time = Math.max(...deltas) / this._velocity;
}
this._playingTweensItem = Tween24._playingTweens.push(this);
// Skip
if (this._root?._status == Tween24._STATUS_SKIPING || this._parent?._status == Tween24._STATUS_SKIPING) {
this._skip();
}
this._debugLog("play");
// Init
if (!this._delayTime || this._delayTime < 1 / 60) this._init();
// Start time
if (this._isManual) this._setStartTime(Ticker24.getTime());
else Tween24.ticker.setPlayTIme();
}
private _resume = () => {
this._status = Tween24._STATUS_PLAYING;
this._updateStartTime();
this._playingTweensItem = Tween24._playingTweens.push(this);
}
private _updateTimeScale = () => {
if (this._parent) {
this._totalTimeScale = this._timeScale * this._parent._totalTimeScale;
this._totalDelayTimeScale = this._delayTimeScale * this._parent._totalDelayTimeScale;
}
else {
this._totalTimeScale = this._timeScale * Tween24._globalTimeScale;
this._totalDelayTimeScale = this._delayTimeScale;
}
}
private _updateStartTime = () => {
const nowTime = Ticker24.getTime();
if (this._progress > 0) this._startTime = nowTime - this._time * this._progress * this._totalTimeScale * 1000;
else this._startTime = nowTime - this._delayTime * this._progress * this._totalTimeScale * this._totalDelayTimeScale * 1000;
if (this._playingChildTween) {
this._playingChildTween.map((tween) => {
if (tween._playingChildTween) tween._resume();
else {
if (tween._progress > 0) tween._startTime = nowTime - tween._time * tween._progress * tween._totalTimeScale * 1000;
else tween._startTime = nowTime - tween._delayTime * tween._progress * tween._totalTimeScale * tween._totalDelayTimeScale * 1000;
}
});
}
}
/**
* トゥイーンを一時停止します。
* @memberof Tween24
*/
pause = () => {
if (this._isRoot) {
this._status = Tween24._STATUS_PAUSING;
if (this._isManual) Tween24._manualPlayingTweens.delete(this);
else Tween24.ticker.remove(this);
if (this._playingTweensItem) Tween24._playingTweens.remove(this._playingTweensItem);
this._functionExecute(Tween24Event.PAUSE);
}
}
/**
* トゥイーンを終点までスキップします。
* @memberof Tween24
*/
skip = () => {
this._skip();
}
private _skip = () => {
this._status = Tween24._STATUS_SKIPING;
if (this._playingChildTween) {
this._playingChildTween.map((tween) => {
tween.skip();
});
}
this.__update(0);
}
/**
* トゥイーンを停止します。
* @memberof Tween24
*/
stop = () => {
this._stop();
this._functionExecute(Tween24Event.STOP);
}
private _stop = () => {
this._tweenStop();
if (this._childTween) {
for (const tween of this._childTween) {
if (tween._childTween) tween._stop();
else tween._tweenStop();
}
}
}
// ------------------------------------------
//
// Tween work
//
// ------------------------------------------
private _init = () => {
this._inited = true;
this._initParam();
this._functionExecute(Tween24Event.INIT);
}
private _initParam = () => {
// Pseudo element setting
if (this._isDOM && this._targetQuery && HTMLUtil.isPseudoQuery(this._targetQuery))
HTMLUtil.setTweenElementQuery(this._singleTarget || this._multiTarget, this._targetQuery);
// Updater init
if (this._allUpdaters) {
const useWillChange = this._root?._useWillChange || this._parent?._useWillChange || this._useWillChange;
this._allUpdaters.map((updater:Updater) => {
updater.init(useWillChange);
});
}
// Overwrite
if (this._singleTarget)
this._overwrite(this._singleTarget);
else if (this._multiTarget) {
for (const target of this._multiTarget) {
this._overwrite(target);
}
}
}
private _overwrite = (target:any) => {
this._playingTweensByTargetList = Tween24._playingTweensByTarget.get(target);
if (this._playingTweensByTargetList) {
this._playingTweensByTargetList.map((tween, index) => {
if (this !== tween) {
if (this._singleTarget) {
if (this._objectUpdater ) (tween._objectMultiUpdater ||tween._objectUpdater )?.overwrite(this._objectUpdater);
if (this._transformUpdater) (tween._transformMultiUpdater||tween._transformUpdater)?.overwrite(this._transformUpdater);
if (this._styleUpdater ) (tween._styleMultiUpdater ||tween._styleUpdater )?.overwrite(this._styleUpdater);
}
else if (this._multiTarget) {
if (tween._objectMultiUpdater ) this._objectMultiUpdater ?.overwriteMultiTo(tween._objectMultiUpdater);
else if (tween._objectUpdater ) this._objectMultiUpdater ?.overwriteTo (tween._objectUpdater);
if (tween._transformMultiUpdater) this._transformMultiUpdater?.overwriteMultiTo(tween._transformMultiUpdater);
else if (tween._transformUpdater ) this._transformMultiUpdater?.overwriteTo (tween._transformUpdater);
if (tween._styleMultiUpdater ) this._styleMultiUpdater ?.overwriteMultiTo(tween._styleMultiUpdater);
else if (tween._styleUpdater ) this._styleMultiUpdater ?.overwriteTo (tween._styleUpdater);
}
}
});
}
else {
this._playingTweensByTargetList = new LinkedList();
Tween24._playingTweensByTarget.set(target, this._playingTweensByTargetList);
}
if (this._singleTarget) {
this._playingTweensByTargetItem = this._playingTweensByTargetList.push(this);
}
else {
this._playingTweensByMultiTargetItem ||= new Map();
this._playingTweensByMultiTargetItem.set(target, this._playingTweensByTargetList.push(this));
}
}
private _setIfCaseTween = (flag:boolean) => {
if (this._childTween) this._childTween.length = 0;
else this._childTween = [];
if (flag && this._trueTween)
this._childTween = [this._trueTween];
else if (this._falseTween)
this._childTween = [this._falseTween];
else
this._childTween = [];
}
private _setStartTime = (playTime:number) => {
this._startTime = playTime + this._delayTime * this._totalDelayTimeScale * this._totalTimeScale * 1000;
}
manualUpdate = () => {
this.__update(Ticker24.getTime());
}
public __update = (nowTime:number) => {
// Set start time
if (!this._startTime) this._setStartTime(Tween24.ticker.getLastPLayTime());
// Delay
if (this._delayTime) {
if (nowTime < this._startTime) {
this._progress = (nowTime - this._startTime) / (this._delayTime * 1000);
return;
}
}
const time = this._time * this._totalTimeScale;
// Skip
if (this._status == Tween24._STATUS_SKIPING || time == 0) {
this._progress = 1;
}
// Else
else {
this._progress = (nowTime - this._startTime) / (time * 1000);
this._progress = (this._progress > 1) ? 1 : this._progress;
}
// Init
if (!this._inited) {
this._init();
}
// Container Tween
if (this._isContainerTween) {
if (this._firstUpdated == false) {
this._firstUpdated = true;
// If case
if (this._type == Tween24._TYPE_IF_CASE_BY_FUNC) {
this._setIfCaseTween(this._ifFunc ? Boolean(this._ifFunc()) : false);
}
switch (this._type) {
case Tween24._TYPE_SERIAL:
case Tween24._TYPE_LOOP :
if (this._firstTween) {
this._playingChildTween?.push(this._firstTween);
this._firstTween._play();
}
break;
case Tween24._TYPE_PARALLEL:
case Tween24._TYPE_LAG :
case Tween24._TYPE_IF_CASE :
case Tween24._TYPE_IF_CASE_BY_FUNC :
if (this._childTween) {
for (const tween of this._childTween) {
this._playingChildTween?.push(tween);
tween._play();
}
}
break;
}
}
// Update
if (this._playingChildTween) {
this._playingChildTween.map((tween) => {
tween.__update(nowTime);
});
}
this._functionExecute(Tween24Event.UPDATE);
if (this._childTween?.length == this._numCompleteChildren) this._complete();
}
// Child Tween
else {
if (!this._firstUpdated)
this._firstUpdated = true;
if (this._allUpdaters) {
// Update propety
const prog = this._easing(this._progress, 0, 1, 1);
this._allUpdaters.map((updater:Updater) => {
updater.update(prog);
});
this._functionExecute(Tween24Event.UPDATE);
}
else {
this._functionExecute(Tween24Event.UPDATE);
}
// Jump
if (this._useJump && !this._jumped && this._progress >= this._jumpProg) {
this._jumped = true;
this._parent?._playNextTween(this);
}
// Complete
if (this._progress >= 1) {
// Wait event
if ((this._type == Tween24._TYPE_WAIT_EVENT || this._type == Tween24._TYPE_WAIT_EVENT_AND_FUNC) && this._dispatchEventTarget && this._dispatchEventType) {
if (this._status != Tween24._STATUS_WAITING) {
this._status = Tween24._STATUS_WAITING;
const waitHandler = () => {
if (this._dispatchEventType) Event24.remove(this._dispatchEventTarget, this._dispatchEventType);
// End
this._complete();
}
Event24.__addCallback(this._dispatchEventTarget, this._dispatchEventType, waitHandler);
if (this._type == Tween24._TYPE_WAIT_EVENT_AND_FUNC)
this._functionExecute(Tween24._TYPE_WAIT_EVENT_AND_FUNC);
}
}
else {
// Func
if (this._type == Tween24._TYPE_FUNC) {
this._functionExecute(Tween24._TYPE_FUNC);
}
// End
this._complete();
}
}
}
}
private _complete = () => {
this._currentIterations ++;
if (this._numIterations != this._currentIterations) {
if (this._isContainerTween) {
if (this._type == Tween24._TYPE_LOOP) {
this._debugLog("loop");
this._numCompleteChildren = 0;
this._firstTween?._play();
return;
}
}
else {
this._debugLog("repeat");
this._setStartTime(this._startTime + (this._time + this._delayTime) * 1000);
this._allUpdaters?.map((updater:Updater) => {
updater.update(0);
});
return;
}
}
this._debugLog("complete");
if (this._parent) this._parent._completeChildTween(this);
this._functionExecute(Tween24Event.COMPLATE);
this._tweenStop();
}
private _tweenStop = () => {
if (this._isRoot) Tween24.ticker.remove(this);
if (this._playingChildTween) this._playingChildTween.dispose();
this._numCompleteChildren = 0;
this._currentIterations = 0;
this._startTime = 0;
this._inited = false;
this._jumped = false;
this._triggered = false;
this._firstUpdated = false;
this._status = Tween24._STATUS_STOPING;
if (this._singleTarget) {
this._removePlayingTweenLinkedList(this._singleTarget, this._playingTweensByTargetList, this._playingTweensByTargetItem);
}
else {
this._playingTweensByMultiTargetItem?.forEach((item, target) => {
this._removePlayingTweenLinkedList(target, Tween24._playingTweensByTarget.get(target), item);
});
}
if (this._playingTweensItem) Tween24._playingTweens.remove(this._playingTweensItem);
if (this._isManual) Tween24._manualPlayingTweens.delete(this);
}
private _removePlayingTweenLinkedList(target:any, list:LinkedList|undefined, item:LinkedListItem|undefined) {
if (list && item) {
list.remove(item);
if (list.length == 0) {
Tween24._playingTweensByTarget.delete(target);
}
}
}
private _completeChildTween = (tween:Tween24) => {
// this._debugLog("completeChildTween");
this._numCompleteChildren ++;
if (!this._triggered && tween._isTrigger) {
if (this._parent) {
this._triggered = true;
this._parent._playNextTween(this);
}
}
if (this._childTween?.length == this._numCompleteChildren) {
this._complete();
}
else if (this._playingChildTween) {
this._playingChildTween.delete(tween);
if (!tween._triggered && !tween._jumped) {
this._playNextTween(tween);
}
}
}
private _playNextTween = (childTween:Tween24) => {
var next:Tween24|null = childTween._next;
if (this._playingChildTween && next) {
this._playingChildTween.push(next);
next._play();
}
}
// ------------------------------------------
//
// Tween Transform
//
// ------------------------------------------
/**
* 目標とするX座標を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* また、パーセント値で指定された場合は、囲みボックスの寸法に対する相対値が設定されます。
* @param {number|string} value X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
x (value:number|string): Tween24 { return ClassUtil.isNumber(value) ? this._setPropety("x", parseFloat(value as string)) : this._setPropetyStr("x", value as string); }
/**
* 目標とするX座標を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
x$ (value:number): Tween24 { return this._setPropety("x", value, ParamUpdater.RELATIVE_AT_SETTING); }
/**
* 目標とするX座標を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
x$$ (value:number): Tween24 { return this._setPropety("x", value, ParamUpdater.RELATIVE_AT_RUNNING); }
/**
* 目標とするY座標を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* また、パーセント値で指定された場合は、囲みボックスの寸法に対する相対値が設定されます。
* @param {number|string} value Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
y (value:number|string): Tween24 { return ClassUtil.isNumber(value) ? this._setPropety("y", parseFloat(value as string)) : this._setPropetyStr("y", value as string); }
/**
* 目標とするX座標を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
y$ (value:number): Tween24 { return this._set$Propety("y", value); }
/**
* 目標とするX座標を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
y$$ (value:number): Tween24 { return this._set$Propety("y", value); }
/**
* 目標とするXとY座標を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* また、パーセント値で指定された場合は、囲みボックスの寸法に対する相対値が設定されます。
* @param {number|string} x X座標
* @param {number|string} y Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
xy (x:number|string, y:number|string): Tween24 { return this.x(x).y(y); }
/**
* 目標とするXとY座標を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} x X座標
* @param {number} y Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
xy$ (x:number, y:number): Tween24 { return this.x$(x).y$(y); }
/**
* 目標とするXとY座標を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} x X座標
* @param {number} y Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
xy$$ (x:number, y:number): Tween24 { return this.x$$(x).y$$(y); }
/**
* 座標のトゥイーンにベジェ曲線を適応し、アンカーポイントを追加します。
* @param {number} bezierX X座標のアンカーポイント
* @param {number} bezierY Y座標のアンカーポイント
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
bezier(bezierX:number, bezierY:number): Tween24 {
this._transformUpdater ?.setBezier(bezierX, bezierY);
this._transformMultiUpdater?.setBezier(bezierX, bezierY);
this._objectUpdater ?.setBezier(bezierX, bezierY);
this._objectMultiUpdater ?.setBezier(bezierX, bezierY);
return this;
}
/**
* 目標とする透明度を設定します。
* 対象が HTMLElement の場合は、CSS:opacity が適用されます。
* @param {number} value 透明度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
alpha (value:number): Tween24 { return this._isDOM ? this._setStyle("opacity", value) : this._setPropety("alpha", value); }
/**
* 目標とする透明度を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:opacity が適用されます。
* @param {number} value 透明度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
alpha$ (value:number): Tween24 { return this._isDOM ? this._set$Style("opacity", value) : this._set$Propety("alpha", value); }
/**
* 目標とする透明度を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:opacity が適用されます。
* @param {number} value 透明度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
alpha$$ (value:number): Tween24 { return this._isDOM ? this._set$$Style("opacity", value) : this._set$$Propety("alpha", value); }
/**
* 目標とする透明度を設定します。
* @param {number} value 透明度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
opacity (value:number): Tween24 { return this._isDOM ? this._setStyle("opacity", value) : this._setPropety("opacity", value); }
/**
* 目標とする透明度を、トゥイーンを作成した時の値の相対値で設定します。
* @param {number} value 透明度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
opacity$ (value:number): Tween24 { return this._isDOM ? this._set$Style("opacity", value) : this._set$Propety("opacity", value); }
/**
* 目標とする透明度を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {number} value 透明度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
opacity$$ (value:number): Tween24 { return this._isDOM ? this._set$$Style("opacity", value) : this._set$$Propety("opacity", value); }
/**
* 目標とする水平スケールを設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleX (value:number): Tween24 { return this._setPropety("scaleX", value); }
/**
* 目標とする水平スケール、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleX$ (value:number): Tween24 { return this._set$Propety("scaleX", value); }
/**
* 目標とする水平スケール、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleX$$ (value:number): Tween24 { return this._set$$Propety("scaleX", value); }
/**
* 目標とする垂直スケールを設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleY (value:number): Tween24 { return this._setPropety("scaleY", value); }
/**
* 目標とする垂直スケールを、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleY$ (value:number): Tween24 { return this._set$Propety("scaleY", value); }
/**
* 目標とする垂直スケールを、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleY$$ (value:number): Tween24 { return this._set$$Propety("scaleY", value); }
/**
* 目標とするスケールを設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平＆垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scale (value:number): Tween24 { return this._setPropety("scaleX", value)._setPropety("scaleY", value); }
/**
* 目標とするスケールを、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平＆垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scale$ (value:number): Tween24 { return this._set$Propety("scaleX", value)._set$Propety("scaleY", value); }
/**
* 目標とするスケールを、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平＆垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scale$$ (value:number): Tween24 { return this._set$$Propety("scaleX", value)._set$$Propety("scaleY", value); }
/**
* 目標とする水平・垂直スケールを設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} scaleX 水平方向のスケール
* @param {number} scaleY 垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleXY (scaleX:number, scaleY:number): Tween24 { return this._setPropety("scaleX", scaleX)._setPropety("scaleY", scaleY); }
/**
* 目標とする水平・垂直スケールを、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} scaleX 水平方向のスケール
* @param {number} scaleY 垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleXY$ (scaleX:number, scaleY:number): Tween24 { return this._set$Propety("scaleX", scaleX)._set$Propety("scaleY", scaleY); }
/**
* 目標とする水平・垂直スケールを、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} scaleX 水平方向のスケール
* @param {number} scaleY 垂直方向のスケール
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
scaleXY$$ (scaleX:number, scaleY:number): Tween24 { return this._set$$Propety("scaleX", scaleX)._set$$Propety("scaleY", scaleY); }
/**
* 目標とする水平傾斜を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewX (value:number): Tween24 { return this._setPropety("skewX", value); }
/**
* 目標とする水平傾斜を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewX$ (value:number): Tween24 { return this._set$Propety("skewX", value); }
/**
* 目標とする水平傾斜を設定、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewX$$ (value:number): Tween24 { return this._set$$Propety("skewX", value); }
/**
* 目標とする垂直傾斜を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewY (value:number): Tween24 { return this._setPropety("skewY", value); }
/**
* 目標とする垂直傾斜を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewY$ (value:number): Tween24 { return this._set$Propety("skewY", value); }
/**
* 目標とする垂直傾斜を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewY$$ (value:number): Tween24 { return this._set$$Propety("skewY", value); }
/**
* 目標とする水平＆垂直傾斜を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平＆垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skew (value:number): Tween24 { return this._setPropety("skewX", value)._setPropety("skewY", value); }
/**
* 目標とする水平＆垂直傾斜を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平＆垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skew$ (value:number): Tween24 { return this._set$Propety("skewX", value)._set$Propety("skewY", value); }
/**
* 目標とする水平＆垂直傾斜を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 水平＆垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skew$$ (value:number): Tween24 { return this._set$$Propety("skewX", value)._set$$Propety("skewY", value); }
/**
* 目標とする水平・垂直傾斜を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} skewX 水平方向の傾斜
* @param {number} skewY 垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewXY (skewX:number, skewY:number): Tween24 { return this._setPropety("skewX", skewX)._setPropety("skewY", skewY); }
/**
* 目標とする水平・垂直傾斜を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} skewX 水平方向の傾斜
* @param {number} skewY 垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewXY$ (skewX:number, skewY:number): Tween24 { return this._set$Propety("skewX", skewX)._set$Propety("skewY", skewY); }
/**
* 目標とする水平・垂直傾斜を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} skewX 水平方向の傾斜
* @param {number} skewY 垂直方向の傾斜
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
skewXY$$ (skewX:number, skewY:number): Tween24 { return this._set$$Propety("skewX", skewX)._set$$Propety("skewY", skewY); }
/**
* 目標とする回転角度を設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 回転角度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
rotation (value:number): Tween24 { return this._setPropety("rotation", value); }
/**
* 目標とする回転角度を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 回転角度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
rotation$ (value:number): Tween24 { return this._set$Propety("rotation", value); }
/**
* 目標とする回転角度を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:Transform が適用されます。
* @param {number} value 回転角度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
rotation$$ (value:number): Tween24 { return this._set$$Propety("rotation", value); }
/**
* CSS:Transform の基準点を設定します。
* @param {number} x X方向の基準点
* @param {number} y Y方向の基準点
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
transformOrigin (x:number|string, y:number|string): Tween24 { return this._setStyle("transform-origin", StringUtil.addUnit(x) + " " + StringUtil.addUnit(y)); }
/**
* 目標とする角度を設定します。
* @param {number} value 角度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
angle (value:number): Tween24 { return this._isDOM ? this._setStyle("rotation", value) : this._setPropety("angle", value); }
/**
* 目標とする角度を、トゥイーンを作成した時の値の相対値で設定します。
* @param {number} value 角度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
angle$ (value:number): Tween24 { return this._isDOM ? this._set$Style("rotation", value) : this._set$Propety("angle", value); }
/**
* 目標とする角度を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {number} value 角度
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
angle$$ (value:number): Tween24 { return this._isDOM ? this._set$$Style("rotation", value) : this._set$$Propety("angle", value); }
/**
* 目標とする幅を設定します。
* 対象が HTMLElement の場合は、CSS:width が適用されます。
* @param {number|string} value 要素の幅
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
width (value:number|string): Tween24 { return this._isDOM ? this._setStyle("width", StringUtil.addUnit(value)) : this._setPropety("width", parseFloat(value as string)); }
/**
* 目標とする幅を、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:width が適用されます。
* @param {number|string} value 要素の幅
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
width$ (value:number|string): Tween24 { return this._isDOM ? this._set$Style("width", StringUtil.addUnit(value)) : this._set$Propety("width", parseFloat(value as string)); }
/**
* 目標とする幅を、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:width が適用されます。
* @param {number|string} value 要素の幅
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
width$$ (value:number|string): Tween24 { return this._isDOM ? this._set$$Style("width", StringUtil.addUnit(value)) : this._set$$Propety("width", parseFloat(value as string)); }
/**
* 目標とする高さを設定します。
* 対象が HTMLElement の場合は、CSS:height が適用されます。
* @param {number|string} value 要素の高さ
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
height (value:number|string): Tween24 { return this._isDOM ? this._setStyle("height", StringUtil.addUnit(value)) : this._setPropety("height", parseFloat(value as string)); }
/**
* 目標とする高さを、トゥイーンを作成した時の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:height が適用されます。
* @param {number|string} value 要素の高さ
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
height$ (value:number|string): Tween24 { return this._isDOM ? this._set$Style("height", StringUtil.addUnit(value)) : this._set$Propety("height", parseFloat(value as string)); }
/**
* 目標とする高さを、トゥイーンが実行される直前の値の相対値で設定します。
* 対象が HTMLElement の場合は、CSS:height が適用されます。
* @param {number|string} value 要素の高さ
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
height$$ (value:number|string): Tween24 { return this._isDOM ? this._set$$Style("height", StringUtil.addUnit(value)) : this._set$$Propety("height", parseFloat(value as string)); }
// ------------------------------------------
//
// CSS Propety
//
// ------------------------------------------
/**
* CSS:top を設定します。
* @param {number|string} 上からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
top (value:number|string): Tween24 { return this._setStyle("top", StringUtil.addUnit(value)); }
/**
* CSS:top を、トゥイーンを作成した時の値の相対値で設定します。
* @param {number|string} 上からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
top$ (value:number|string): Tween24 { return this._set$Style("top", StringUtil.addUnit(value)); }
/**
* CSS:top を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {number|string} 上からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
top$$ (value:number|string): Tween24 { return this._set$$Style("top", StringUtil.addUnit(value)); }
/**
* CSS:right を設定します。
* @param {number|string} 右からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
right (value:number|string): Tween24 { return this._setStyle("right", StringUtil.addUnit(value)); }
/**
* CSS:right を、トゥイーンを作成した時の値の相対値で設定します。
* @param {number|string} 右からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
right$ (value:number|string): Tween24 { return this._set$Style("right", StringUtil.addUnit(value)); }
/**
* CSS:right を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {number|string} 右からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
right$$ (value:number|string): Tween24 { return this._set$$Style("right", StringUtil.addUnit(value)); }
/**
* CSS:bottom を設定します。
* @param {number|string} value 下からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
bottom (value:number|string): Tween24 { return this._setStyle("bottom", StringUtil.addUnit(value)); }
/**
* CSS:bottom を、トゥイーンを作成した時の値の相対値で設定します。
* @param {number|string} value 下からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
bottom$ (value:number|string): Tween24 { return this._set$Style("bottom", StringUtil.addUnit(value)); }
/**
* CSS:bottom を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {number|string} value 下からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
bottom$$ (value:number|string): Tween24 { return this._set$$Style("bottom", StringUtil.addUnit(value)); }
/**
* CSS:left を設定します。
* @param {number|string} value 左からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
left (value:number|string): Tween24 { return this._setStyle("left", StringUtil.addUnit(value)); }
/**
* CSS:left を、トゥイーンを作成した時の値の相対値で設定します。
* @param {number|string} value 左からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
left$ (value:number|string): Tween24 { return this._set$Style("left", StringUtil.addUnit(value)); }
/**
* CSS:left を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {number|string} value 左からの配置位置（距離）
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
left$$ (value:number|string): Tween24 { return this._set$$Style("left", StringUtil.addUnit(value)); }
/**
* CSS:color を設定します。
* @param {string} colorCode 「#」「rgb()」フォーマットのカラーコード
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
color (colorCode:string): Tween24 { return this._setStyle("color", colorCode); }
/**
* CSS:background-color（背景色）を設定します。
* @param {string} colorCode 「#」「rgb()」フォーマットのカラーコード
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundColor (colorCode:string): Tween24 { return this._setStyle("background-color", colorCode); }
/**
* CSS:background-position-x（背景X座標）を設定します。
* @param {string} x 背景X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundPositionX (x:number|string): Tween24 { return this._setStyle("background-position-x", StringUtil.addUnit(x)); }
/**
* CSS:background-position-x（背景X座標）を、トゥイーンを作成した時の値の相対値で設定します。
* @param {string} x 背景X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundPositionX$ (x:number|string): Tween24 { return this._set$Style("background-position-x", StringUtil.addUnit(x)); }
/**
* CSS:background-position-x（背景X座標）を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {string} x 背景X座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundPositionX$$ (x:number|string): Tween24 { return this._set$$Style("background-position-x", StringUtil.addUnit(x)); }
/**
* CSS:background-position-y（背景Y座標）を設定します。
* @param {string} y 背景Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundPositionY (y:number|string): Tween24 { return this._setStyle("background-position-y", StringUtil.addUnit(y)); }
/**
* CSS:background-position-y（背景Y座標）を、トゥイーンを作成した時の値の相対値で設定します。
* @param {string} y 背景Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundPositionY$ (y:number|string): Tween24 { return this._set$Style("background-position-y", StringUtil.addUnit(y)); }
/**
* CSS:background-position-y（背景Y座標）を、トゥイーンが実行される直前の値の相対値で設定します。
* @param {string} y 背景Y座標
* @return {Tween24} Tween24インスタンス
* @memberof Tween24
*/
backgroundPositionY$$ (y:number|string):