@visactor/vrender-animate/es/custom/move.js

This module provides a graph-based animation system for VRender.

import { isFunction, isValidNumber } from "@visactor/vutils";

import { ACustomAnimate } from "./custom-animate";

import { applyAnimationFrameAttributes, applyAppearStartAttributes } from "./transient";

export const moveIn = (graphic, options, animationParameters) => {
    var _a, _b, _c, _d;
    const {offset: offset = 0, orient: orient, direction: direction, point: pointOpt, excludeChannels: excludeChannels = [], layoutRect: layoutRect = {}} = null != options ? options : {};
    let changedX = 0, changedY = 0;
    "negative" === orient && (changedX = null !== (_a = layoutRect.width) && void 0 !== _a ? _a : graphic.stage.viewWidth, 
    changedY = null !== (_b = layoutRect.height) && void 0 !== _b ? _b : graphic.stage.viewHeight), 
    changedX += offset, changedY += offset;
    const point = isFunction(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt, finalAttrsX = graphic.getGraphicAttribute("x"), finalAttrsY = graphic.getGraphicAttribute("y"), fromX = excludeChannels.includes("x") ? finalAttrsX : point && isValidNumber(point.x) ? point.x : changedX, fromY = excludeChannels.includes("y") ? finalAttrsY : point && isValidNumber(point.y) ? point.y : changedY;
    switch (direction) {
      case "x":
        return {
            from: {
                x: excludeChannels.includes("x") ? finalAttrsX : fromX
            },
            to: {
                x: finalAttrsX
            }
        };

      case "y":
        return {
            from: {
                y: fromY
            },
            to: {
                y: finalAttrsY
            }
        };

      default:
        return {
            from: {
                x: fromX,
                y: fromY
            },
            to: {
                x: finalAttrsX,
                y: finalAttrsY
            }
        };
    }
};

export const moveOut = (graphic, options, animationParameters) => {
    var _a, _b, _c, _d;
    const {offset: offset = 0, orient: orient, direction: direction, point: pointOpt} = null != options ? options : {}, groupBounds = animationParameters.group ? animationParameters.group.AABBBounds : null, groupWidth = null !== (_a = groupBounds.width()) && void 0 !== _a ? _a : animationParameters.width, groupHeight = null !== (_b = groupBounds.height()) && void 0 !== _b ? _b : animationParameters.height, changedX = ("negative" === orient ? groupWidth : 0) + offset, changedY = ("negative" === orient ? groupHeight : 0) + offset, point = isFunction(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt, fromX = point && isValidNumber(point.x) ? point.x : changedX, fromY = point && isValidNumber(point.y) ? point.y : changedY;
    switch (direction) {
      case "x":
        return {
            from: {
                x: graphic.getGraphicAttribute("x")
            },
            to: {
                x: fromX
            }
        };

      case "y":
        return {
            from: {
                y: graphic.getGraphicAttribute("y")
            },
            to: {
                y: fromY
            }
        };

      default:
        return {
            from: {
                x: graphic.getGraphicAttribute("x"),
                y: graphic.getGraphicAttribute("y")
            },
            to: {
                x: fromX,
                y: fromY
            }
        };
    }
};

export class MoveBase extends ACustomAnimate {
    constructor(from, to, duration, easing, params) {
        super(from, to, duration, easing, params);
    }
    onUpdate(end, ratio, out) {
        const attrs = {};
        this.propKeys.forEach((key => {
            attrs[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
        })), applyAnimationFrameAttributes(this.target, attrs), this.target.addUpdatePositionTag(), 
        this.target.addUpdateShapeAndBoundsTag();
    }
}

export class MoveIn extends MoveBase {
    onBind() {
        var _a;
        super.onBind();
        const {from: from, to: to} = moveIn(this.target, this.params.options, this.params);
        this.props = to, this.propKeys = Object.keys(to).filter((key => null != to[key])), 
        this.from = from, this.to = to, this.target.applyFinalAttributeToAttribute(), !1 !== (null === (_a = this.params.controlOptions) || void 0 === _a ? void 0 : _a.immediatelyApply) && applyAppearStartAttributes(this.target, from);
    }
}

export class MoveOut extends MoveBase {
    onBind() {
        super.onBind();
        const {from: from, to: to} = moveOut(this.target, this.params.options, this.params);
        this.props = to, this.propKeys = Object.keys(to).filter((key => null != to[key])), 
        this.from = from, this.to = to;
    }
}
//# sourceMappingURL=move.js.map