just-animate/lib/web/animate.js

_Making Animation Simple_

Object.defineProperty(exports, "__esModule", { value: true });
var math_1 = require("../lib/utils/math");
var constants_1 = require("./constants");
var functional_1 = require("../lib/utils/functional");
var frameSize = 17;
function animate(effect) {
    var keyframes = effect.keyframes, prop = effect.prop, from = effect.from, to = effect.to, target = effect.target;
    var duration = to - from;
    var getAnimator = functional_1.memoize(function () {
        var frames = keyframes.map(function (_a) {
            var offset = _a.offset, value = _a.value, easing = _a.easing;
            var _b;
            return (_b = {
                    offset: offset
                },
                _b[prop] = value,
                _b.easing = easing,
                _b);
        });
        var a = target.animate(frames, {
            duration: duration,
            fill: 'both'
        });
        a.pause();
        return a;
    });
    return {
        cancel: function () {
            getAnimator().cancel();
        },
        update: function (offset, rate, isPlaying) {
            var animator = getAnimator();
            var time = duration * offset;
            if (math_1.abs(animator.currentTime - time) > 1) {
                animator.currentTime = time;
            }
            if (isPlaying && animator.playbackRate !== rate) {
                var currentTime = animator.currentTime;
                if (currentTime < 1) {
                    animator.currentTime = 1;
                }
                else if (currentTime >= duration - 1) {
                    animator.currentTime = duration - 1;
                }
                animator.playbackRate = rate;
            }
            var needsToPlay = isPlaying &&
                !(animator.playState === constants_1.RUNNING || animator.playState === 'finish') &&
                !(rate < 0 && time < frameSize) &&
                !(rate >= 0 && time > duration - frameSize);
            if (needsToPlay) {
                animator.play();
            }
            var needsToPause = !isPlaying &&
                (animator.playState === constants_1.RUNNING || animator.playState === 'pending');
            if (needsToPause) {
                animator.pause();
            }
        }
    };
}
exports.animate = animate;