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

Question

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

我在 Internet 上得到了一个演示，您需要创建一个复杂的动画（使用 three.js）和 DOM（显示或隐藏与 TWEEN.js 关联的元素以DOM个元素，DOM个元素）已经写在HTML里面了（只是显示或隐藏效果慢而已）。

clickMeOk方法的实现实现了动画效果，但我希望同时实现另一种效果——文字描述的显示或隐藏（showed or hidden with animation）

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 元素上制作动画。

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

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

How do you associate DOM elements with tween.js?

tween.js