SOURCE

console 命令行工具 X clear

                    
>
console
console.clear();

let an, animation, pane;
const AnTicker = class {
    constructor(defaultSpeed) {
        this.elapsedTime = -1;
        this.lastTime = 0;
        this.speed = defaultSpeed || 1;
    }
    update(t) {
        this.elapsedTime = this.elapsedTime === -1 ? t : this.elapsedTime + (t - this.lastTime) * this.speed;
        this.lastTime = t;
    }
    setSpeed(val) { this.speed = val; }
    getElapsedTime() { return this.elapsedTime; }
};
let ticker = new AnTicker();

main();

function main() {

    /**
     * Animation
     */
    animation = anime({
        targets: '.box',
        translateX: 400,
        direction: 'alternate',
        loop: true,
        easing: 'easeInOutQuad',
        autoplay: false,
        update: anim => { an = anim }
    });

    /**
     * Pane
     */
    pane = new Tweakpane.Pane({ title: 'animejs' });
    pane.addInput(ticker, 'speed', { label:'动画速度', min:.1, max:4, step:.01 }).on('change', e => {
        console.log(getAnimeInfo(an));
    });

    /**
     * Render
     */
    requestAnimationFrame(loop);
}

function loop(t) {
    ticker.update(t);
    animation.tick(ticker.getElapsedTime());
    customRAF = requestAnimationFrame(loop);
}

function getAnimeInfo(instance) {
    let result = [];
    let ans = instance.animations;
    for (let i=0; i<ans.length; i++) {
        let an = ans[i];
        result.push({
            target: an.animatable.target,
            property: an.property,
            value: an.currentValue,
            // type: an.type,
            // delay: an.delay,
            // duration: an.duration,
            // tweens: an.tweens
        });
    }
    return result = result.length === 1 ? result[0] : result;
}
<div class="box"></div>
:root {
    --box-color: #0cf;
    --tp-base-background-color: hsla(0, 0%, 10%, 0.9);
}
body {
    background: url(https://ax.minicg.com/images/checkerboard.png), rgba(255,255,255,.8);
    background-blend-mode: screen;
}
.box {
    position: absolute;
    top: 10px;
    width: 100px;
    height:100px;
    background: var(--box-color);
    transform: translateZ(0);
}

本项目引用的自定义外部资源