123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- import { ObjectExt, Timing, Interp } from '@antv/x6-common';
- export class Animation {
- constructor(cell) {
- this.cell = cell;
- this.ids = {};
- this.cache = {};
- }
- get() {
- return Object.keys(this.ids);
- }
- start(path, targetValue, options = {}, delim = '/') {
- const startValue = this.cell.getPropByPath(path);
- const localOptions = ObjectExt.defaults(options, Animation.defaultOptions);
- const timing = this.getTiming(localOptions.timing);
- const interpolate = this.getInterp(localOptions.interp, startValue, targetValue);
- let startTime = 0;
- const key = Array.isArray(path) ? path.join(delim) : path;
- const paths = Array.isArray(path) ? path : path.split(delim);
- const iterate = () => {
- const now = new Date().getTime();
- if (startTime === 0) {
- startTime = now;
- }
- const elaspe = now - startTime;
- let progress = elaspe / localOptions.duration;
- if (progress < 1) {
- this.ids[key] = requestAnimationFrame(iterate);
- }
- else {
- progress = 1;
- }
- const currentValue = interpolate(timing(progress));
- this.cell.setPropByPath(paths, currentValue);
- if (options.progress) {
- options.progress(Object.assign({ progress, currentValue }, this.getArgs(key)));
- }
- if (progress === 1) {
- this.cell.notify('transition:complete', this.getArgs(key));
- options.complete && options.complete(this.getArgs(key));
- this.cell.notify('transition:finish', this.getArgs(key));
- options.finish && options.finish(this.getArgs(key));
- this.clean(key);
- }
- };
- setTimeout(() => {
- this.stop(path, undefined, delim);
- this.cache[key] = { startValue, targetValue, options: localOptions };
- this.ids[key] = requestAnimationFrame(iterate);
- this.cell.notify('transition:start', this.getArgs(key));
- options.start && options.start(this.getArgs(key));
- }, options.delay);
- return this.stop.bind(this, path, delim, options);
- }
- stop(path, options = {}, delim = '/') {
- const paths = Array.isArray(path) ? path : path.split(delim);
- Object.keys(this.ids)
- .filter((key) => ObjectExt.isEqual(paths, key.split(delim).slice(0, paths.length)))
- .forEach((key) => {
- cancelAnimationFrame(this.ids[key]);
- const data = this.cache[key];
- const commonArgs = this.getArgs(key);
- const localOptions = Object.assign(Object.assign({}, data.options), options);
- const jumpedToEnd = localOptions.jumpedToEnd;
- if (jumpedToEnd && data.targetValue != null) {
- this.cell.setPropByPath(key, data.targetValue);
- this.cell.notify('transition:end', Object.assign({}, commonArgs));
- this.cell.notify('transition:complete', Object.assign({}, commonArgs));
- localOptions.complete && localOptions.complete(Object.assign({}, commonArgs));
- }
- const stopArgs = Object.assign({ jumpedToEnd }, commonArgs);
- this.cell.notify('transition:stop', Object.assign({}, stopArgs));
- localOptions.stop && localOptions.stop(Object.assign({}, stopArgs));
- this.cell.notify('transition:finish', Object.assign({}, commonArgs));
- localOptions.finish && localOptions.finish(Object.assign({}, commonArgs));
- this.clean(key);
- });
- return this;
- }
- clean(key) {
- delete this.ids[key];
- delete this.cache[key];
- }
- getTiming(timing) {
- return typeof timing === 'string' ? Timing[timing] : timing;
- }
- getInterp(interp, startValue, targetValue) {
- if (interp) {
- return interp(startValue, targetValue);
- }
- if (typeof targetValue === 'number') {
- return Interp.number(startValue, targetValue);
- }
- if (typeof targetValue === 'string') {
- if (targetValue[0] === '#') {
- return Interp.color(startValue, targetValue);
- }
- return Interp.unit(startValue, targetValue);
- }
- return Interp.object(startValue, targetValue);
- }
- getArgs(key) {
- const data = this.cache[key];
- return {
- path: key,
- startValue: data.startValue,
- targetValue: data.targetValue,
- cell: this.cell,
- };
- }
- }
- (function (Animation) {
- Animation.defaultOptions = {
- delay: 10,
- duration: 100,
- timing: 'linear',
- };
- })(Animation || (Animation = {}));
- //# sourceMappingURL=animation.js.map
|