Function applyKeyframeAnimation

src/animation/customGraphicKeyframeAnimation.ts:59–162

(
    el: Element,
    animationOpts: ElementKeyframeAnimationOption<T> | ElementKeyframeAnimationOption<T>[],
    animatableModel: Model<AnimationOptionMixin>
)

}

export function applyKeyframeAnimation<T extends Record<string, any>>(
    el: Element,
    animationOpts: ElementKeyframeAnimationOption<T> | ElementKeyframeAnimationOption<T>[],
    animatableModel: Model<AnimationOptionMixin>
) {
    if (!animatableModel.isAnimationEnabled() || !animationOpts) {
        return;
    }

    if (isArray(animationOpts)) {
        each(animationOpts, singleAnimationOpts => {
            applyKeyframeAnimation(el, singleAnimationOpts, animatableModel);
        });
        return;
    }

    const keyframes = animationOpts.keyframes;
    let duration = animationOpts.duration;

    if (animatableModel && duration == null) {
        // Default to use duration of config.
        // NOTE: animation config from payload will be ignored because they are mainly for transitions.
        const config = getAnimationConfig('enter', animatableModel, 0);
        duration = config && config.duration;
    }

    if (!keyframes || !duration) {
        return;
    }

    const stateToRestore: StateToRestore = getStateToRestore(el);

    each(ELEMENT_ANIMATABLE_PROPS, (targetPropName) => {
        if (targetPropName && !(el as any)[targetPropName]) {
            return;
        }

        let animator: ReturnType<Element['animate']>;
        let endFrameIsSet = false;

        // Sort keyframes by percent.
        keyframes.sort((a, b) => a.percent - b.percent);

        each(keyframes, kf => {
            // Stop current animation.
            const animators = el.animators;
            const kfValues = targetPropName ? kf[targetPropName] : kf;

            if (__DEV__) {
                if (kf.percent >= 1) {
                    endFrameIsSet = true;
                }
            }

            if (!kfValues) {
                return;
            }