Question

如何将TWEEN.js与DOM元素相关联，以便对此DOM元素执行一些复杂（或简单）的动画效果？

我在互联网上有一个演示，你需要创建一个复杂的动画（使用three.js）和DOM（显示或隐藏与TWEEN.js相关联的元素到DOM元素，DOM元素）已写入HTML的内部（显示或隐藏效果的速度很慢）。

clickMeOk方法的实现已经实现了动画效果，但我希望同时执行另一种效果 - 显示或隐藏文本描述（用动画显示或隐藏）

var isMeTweening = false;
function clickMeOk() {
    if (isMeTweening) 
        return;
    isMeTweening = true;
    var scale = mesh6.scale.x < 1 ? 1 : 0.001;

    new TWEEN.Tween(mesh6.scale)
        .to({ x: scale, y: scale, z: scale }, 2000)
        .easing(TWEEN.Easing.Quartic.InOut)
        .onComplete(function() {
            isMeTweening = false;
        }).start();

    var opacity = mesh6.material.opacity > 0 ? 0 : 0.5;
    new TWEEN.Tween(mesh6.material).to({ opacity: opacity }, 1800).easing(TWEEN.Easing.Quartic.InOut).start();

    //Here you want to add DOM element animation (display or hide)




}

谢谢！

Answer 1

我认为您应该使用CSS在DOM Elements上制作动画。

https://www.w3schools.com/css/css3_animations.asp

如何将DOM元素与tween.js相关联？

1 个答案: