tween.js (animação de interpolação), baseado em Three.js

O que é tween.js?

tween.js é uma biblioteca de animação js que pode gerar efeitos suaves de animação. Você só precisa informar ao tween qual valor deseja modificar, qual é o valor final ao final da animação, quanto tempo dura a animação e outras informações, e o mecanismo de interpolação pode calcular O valor entre o ponto de animação inicial e o ponto de animação final produz um efeito de animação suave. Tween.js pode ser usado não apenas em páginas HTML, mas também diretamente na malha three.js para controlar o efeito de animação de o modelo. E conveniente.

Crie um caso de animação simples no Vue

npm i @tweenjs/tween.js@^18 //下载tween.js

const TWEEN = require('@tweenjs/tween.js') //vue 中定义一个TWEEN的常量

addTweenEsa(mesh) { //核心代码 mesh 是使用three.js 建立的一个网格模型
	this.EsaTween = new TWEEN.Tween(mesh.position)
	.to({x: 30,y: 0,z: 30}, 2000) //改变当前模型的位置 
	.delay(1000) //开始时的延迟
	.yoyo(true) //是否开启yoyo循环
	.easing(TWEEN.Easing.Elastic.InOut) //运动曲线
	.repeat(Infinity) //重复次数
	 this.EsaTween.start() //开启动画
},

método de função entre

• start
  inicia a animação da interpolação, new TWEEN.Tween().start(time)o método start aceita um parâmetro de tempo, se o parâmetro for adicionado, a interpolação não iniciará imediatamente até um momento específico

• stop
  fecha a animação de interpolação new TWEEN.Tween().stop(), fecha a animação de interpolação em execução

• repeat
  controla o número de vezes que a interpolação é repetida new TWEEN.Tween().repeat()e repeat aceita um parâmetro que descreve quantas repetições são necessárias após a conclusão da primeira interpolação

• yoyo
  controla o modo de repetição de interpolação, new TWEEN.Tween().yoyo()esta função só é eficaz ao usar a repetição, a linha interpolada se moverá para frente e para trás como um ioiô, em vez de começar de novo

• delay
  controla o atraso antes do início da interpolação new TWEEN.Tween().delay()e o tempo de atraso antes do início da interpolação aceita um parâmetro para controlar o tempo específico

• pausa
  suspende temporariamente a animação de interpolação new TWEEN.Tween().pause(), suspende o movimento de interpolação atual

• retomar retoma a animação de interpolação new TWEEN.Tween().resume()e retoma o movimento de interpolação pausado

• para
  controlar a forma de movimento e a direção da interpolação , quando a interpolação começar, Tween.js lerá o valor da propriedade atual e aplicará o valor relativo para encontrar o novo valor final new TWEEN.Tween().to()

• Método de operação de interpolação

  • atualização
    Animação de interpolação de atualização TWEEN.update(), movimento de interpolação de atualização dinâmica é geralmente window.requestAnimationFrame usado em conjunto

  • getAll
    obtém todos os grupos de interpolaçãoTWEEN.getAll()

  • removeAll
    remove todos os grupos de interpolaçãoTWEEN.removeAll()

  • add adiciona
    uma nova interpolação TWEEN.add(tween)(tween) para adicionar uma interpolação específicavar tween=new TWEEN.Tween()

  • remover
    remove uma interpolação TWEEN.remove(tween)(interpolação) remove uma interpolação específicavar tween=new TWEEN.Tween()

  • Grupo adiciona um novo grupo de interpolações var Group=TWEEN.Group(),new TWEEN.Tween({ x: 1 }, Group) , para agrupar as interpolações configuradas TWEEN.update()eTWEEN.removeAll() , não afetará as interpolações que foram agrupadas

• função de retorno de chamada

  • onStart()
    new TWEEN.Tween().onStart((obj)=>{}) , executado quando a interpolação inicia, apenas uma vez, quando repeat() é usado para repetir a interpolação, ela não será executada repetidamente e o onStart((obj)=>{})objeto obj tween é passado como o primeiro parâmetro

  • onStop()
    new TWEEN.Tween().onStop((obj)=>{}) , executado quando a interpolação é interrompida explicitamente por meio de onStop(), mas executada quando a interpolação é feita normalmente e antes de interromper qualquer possível interpolação em cadeia, o objeto obj tween passado como o primeiro onStop((obj)=>{})argumento

  • onUpdate()
    new TWEEN.Tween().onUpdate((obj)=>{}) , executado toda vez que a interpolação é atualizada, retorna o valor atual atualizado e onUpdate((obj)=>{})o objeto obj tween é passado como o primeiro parâmetro

  • onComplete()
    new TWEEN.Tween().onComplete((obj)=>{}) , executado quando a interpolação é concluída normalmente (ou seja, não é interrompida), onComplete((obj)=>{})o objeto obj tween é passado como primeiro parâmetro

Função de atenuação: TWEEN.Easing

tween.js fornece algumas funções de easing prontas, como linear, quadrática, três, quatro, cinco, senoidal, exponencial, circular, elástica, descendente e saltitante, e há tipos de easing correspondentes: In ( Lento primeiro, depois rápido ) Out (primeiro rápido, depois lento) e InOut (aceleração no primeiro tempo, desaceleração no segundo tempo)