210 lines
5.0 KiB
JavaScript
210 lines
5.0 KiB
JavaScript
import EventTarget from 'consul-ui/utils/dom/event-target/rsvp';
|
|
import { set } from '@ember/object';
|
|
const IntervalTickerGroup = class extends EventTarget {
|
|
constructor(rate = 1000 / 60) {
|
|
super();
|
|
this.setRate(rate);
|
|
}
|
|
tick() {
|
|
this.dispatchEvent({ type: 'tick', target: this });
|
|
}
|
|
setRate(rate) {
|
|
clearInterval(this._interval);
|
|
this._interval = setInterval(() => this.tick(), rate);
|
|
}
|
|
destroy() {
|
|
clearInterval(this._interval);
|
|
}
|
|
};
|
|
export const Ticker = class extends EventTarget {
|
|
static destroy() {
|
|
if (typeof Ticker.defaultTickerGroup !== 'undefined') {
|
|
Ticker.defaultTickerGroup.destroy();
|
|
delete Ticker.defaultTickerGroup;
|
|
}
|
|
}
|
|
constructor(obj) {
|
|
super();
|
|
this.setTickable(obj);
|
|
}
|
|
tick() {
|
|
this._tickable.tick();
|
|
}
|
|
setTickable(tickable) {
|
|
this._tickable = tickable;
|
|
// this.addEventListener(this._tickable);
|
|
if (typeof this._tickable.getTicker === 'undefined') {
|
|
this._tickable.getTicker = () => this;
|
|
}
|
|
this.tick = this._tickable.tick.bind(this._tickable);
|
|
}
|
|
getTickable() {
|
|
return this._tickable;
|
|
}
|
|
isAlive() {
|
|
return this._isAlive;
|
|
}
|
|
start() {
|
|
this._isAlive = true;
|
|
this.getTickerGroup().addEventListener('tick', this.tick);
|
|
this.dispatchEvent({ type: 'start', target: this });
|
|
}
|
|
stop() {
|
|
this._isAlive = false;
|
|
this.getTickerGroup().removeEventListener('tick', this.tick);
|
|
this.dispatchEvent({ type: 'stop', target: this });
|
|
}
|
|
activeCount() {
|
|
return this.getTickerGroup().activeCount();
|
|
}
|
|
setTickerGroup(group) {
|
|
this._group = group;
|
|
}
|
|
getTickerGroup() {
|
|
if (typeof this._group === 'undefined') {
|
|
if (typeof Ticker.defaultTickerGroup === 'undefined') {
|
|
Ticker.defaultTickerGroup = new TickerGroup();
|
|
}
|
|
this._group = Ticker.defaultTickerGroup;
|
|
}
|
|
return this._group;
|
|
}
|
|
};
|
|
const TimelineAbstract = class {
|
|
constructor() {
|
|
this._currentframe = 1;
|
|
this.setIncrement(1);
|
|
}
|
|
isAtStart() {
|
|
return this._currentframe <= 1;
|
|
}
|
|
isAtEnd() {
|
|
return this._currentframe >= this._totalframes;
|
|
}
|
|
addEventListener() {
|
|
return this.getTicker().addEventListener(...arguments);
|
|
}
|
|
removeEventListener() {
|
|
return this.getTicker().removeEventListener(...arguments);
|
|
}
|
|
stop() {
|
|
return this.gotoAndStop(this._currentframe);
|
|
}
|
|
play() {
|
|
return this.gotoAndPlay(this._currentframe);
|
|
}
|
|
start() {
|
|
return this.gotoAndPlay(this._currentframe);
|
|
}
|
|
gotoAndStop(frame) {
|
|
this._currentframe = frame;
|
|
const ticker = this.getTicker();
|
|
if (ticker.isAlive()) {
|
|
ticker.stop();
|
|
}
|
|
return this;
|
|
}
|
|
gotoAndPlay(frame) {
|
|
this._currentframe = frame;
|
|
const ticker = this.getTicker();
|
|
if (!ticker.isAlive()) {
|
|
ticker.start();
|
|
}
|
|
return this;
|
|
}
|
|
getTicker() {
|
|
if (typeof this._ticker === 'undefined') {
|
|
this._ticker = new Ticker(this);
|
|
}
|
|
return this._ticker;
|
|
}
|
|
setFrames(frames) {
|
|
this._totalframes = frames;
|
|
return this;
|
|
}
|
|
setIncrement(inc) {
|
|
this._increment = inc;
|
|
return this;
|
|
}
|
|
};
|
|
const Cubic = {
|
|
easeOut: function (t, b, c, d) {
|
|
t /= d;
|
|
t--;
|
|
return c * (t * t * t + 1) + b;
|
|
},
|
|
};
|
|
const TickerGroup = IntervalTickerGroup;
|
|
export const Tween = class extends TimelineAbstract {
|
|
static destroy() {
|
|
Ticker.destroy();
|
|
}
|
|
static to(start, finish, frames, method) {
|
|
Object.keys(finish).forEach(function (key) {
|
|
finish[key] -= start[key];
|
|
});
|
|
return new Tween(start, finish, frames, method).play();
|
|
}
|
|
constructor(obj, props, frames = 12, method = Cubic.easeOut) {
|
|
super();
|
|
this.setMethod(method);
|
|
this.setProps(props);
|
|
this.setTarget(obj);
|
|
this.setFrames(frames);
|
|
this.tick = this.forwards;
|
|
}
|
|
_process() {
|
|
Object.keys(this._props).forEach((key) => {
|
|
const num = this._method(
|
|
this._currentframe,
|
|
this._initialstate[key],
|
|
this._props[key],
|
|
this._totalframes
|
|
);
|
|
// this._target[key] = num;
|
|
set(this._target, key, num);
|
|
});
|
|
}
|
|
forwards() {
|
|
if (this._currentframe <= this._totalframes) {
|
|
this._process();
|
|
this._currentframe += this._increment;
|
|
} else {
|
|
this._currentframe = this._totalframes;
|
|
this.getTicker().stop();
|
|
}
|
|
}
|
|
backwards() {
|
|
this._currentframe -= this._increment;
|
|
if (this._currentframe >= 0) {
|
|
this._process();
|
|
} else {
|
|
this.run = this.forwards;
|
|
this._currentframe = 1;
|
|
this.getTicker().stop();
|
|
}
|
|
}
|
|
gotoAndPlay() {
|
|
if (typeof this._initialstate === 'undefined') {
|
|
this._initialstate = {};
|
|
Object.keys(this._props).forEach((key) => {
|
|
this._initialstate[key] = this._target[key];
|
|
});
|
|
}
|
|
return super.gotoAndPlay(...arguments);
|
|
}
|
|
setTarget(target) {
|
|
this._target = target;
|
|
}
|
|
getTarget(target) {
|
|
return this._target;
|
|
}
|
|
setProps(props) {
|
|
this._props = props;
|
|
return this;
|
|
}
|
|
setMethod(method) {
|
|
this._method = method;
|
|
}
|
|
};
|