DOM 요소를 tween.js와 어떻게 연결합니까?

Question

TWEEN.js을 DOM 요소에 연결하여이 DOM 요소에 복잡한 (또는 간단한) 애니메이션 효과를 적용하려면 어떻게합니까?

나는 인터넷에서 데모를 얻었으므로 세련된 애니메이션 (three.js 사용)과 DOM (DOM 요소, DOM 요소에 TWEEN.js와 관련된 요소 표시 또는 숨기기)을 작성해야합니다. 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

DOM 요소에 애니메이션을 만들려면 CSS를 사용해야한다고 생각합니다.

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