gsap 的参数方法和动画真实度

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的32天，点击查看活动详情

参数

设置动画时的参数， 回调事件：用于所有回调的范围（onStart、onUpdate、onComplete 等） 持续时间： duration 动画开始前延迟的时间：delay 缓动类型：ease 是否往返：yoyo 关键帧：要将目标动画化为各种状态，请使用keyframes- 用作to()补间的 vars 对象数组。例如，keyframes: [{x:100, duration:1}, {y:100, duration:0.5}]。所有关键帧都将完美地连续排列，但您可以定义一个delay值以在每个步骤之间添加间距（或者负延迟会产生重叠）。 等等。。

// 设置动画
const animate1 = gsap.to(cube.position, {
    x: 5,
    duration: 6,
    ease: "elastic.out(1, 0.3)",
    repeat: -1,
    // 往返运动
    yoyo: true,
    // 延迟时间
    // delay:2,
    onComplete() {
        console.log('动画完成')
    },
    onStart() {
        console.log('动画开始')
    }
})

然后这个方法返回一个Tween 实例 里面有动画的实时的进度，

然后可以利用好这个对象，实现和用户交互，当用户点击浏览器窗口时，调用animate1.isActive()方法，可以获取到动画是否是运行中，如果不是运动中，可以调用resume()方法恢复动画状态，否则，可以调用pause方法暂停动画，这时动画是否动画就可以由用户来操作了。

window.addEventListener('dblclick', () => {
    console.log(animate1)
    if (animate1.isActive()) {
        animate1.pause();
    } else {
        animate1.resume();
    }
})

动画动起来更真实一点

给动画设置惯性，将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。
请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。

在创建控制器实例后，设置enableDamping为true

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping=true;

在动画循环回调里,执行 controls.update();

function render() {

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render)
}
render()

今天终于知道王者荣耀里英雄转动时，衣服飘飘的效果，和得物鞋子展示图，旋转快时自动旋转是为啥了。