tween.js (animación de interpolación), basado en Three.js

¿Qué es tween.js?

tween.js es una biblioteca de animación js que puede generar efectos de animación suaves. Solo necesita decirle a tween qué valor desea modificar, cuál es su valor final al final de la animación, cuánto dura la animación y otra información, y el motor de interpolación puede calcular El valor entre el punto de animación de inicio y el punto de animación final produce un efecto de animación suave.Tween.js se puede usar no solo en páginas HTML sino también directamente en la malla de tres.js para controlar el efecto de animación del modelo Y conveniente.

Crea un caso de animación simple en 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 función de interpolación

• start
  inicia la animación de interpolación, new TWEEN.Tween().start(time)el método de inicio acepta un tiempo de parámetro, si se agrega el parámetro, la interpolación no comenzará inmediatamente hasta un momento específico

• detener
  cierra la animación de interpolación new TWEEN.Tween().stop(), cierra la animación de interpolación en ejecución

• repeat
  controla el número de veces que se repite la interpolación new TWEEN.Tween().repeat(), y repeat acepta un parámetro que describe cuántas repeticiones se requieren después de que se completa la primera interpolación

• yoyo
  controla el modo de repetición de interpolación, new TWEEN.Tween().yoyo()esta función solo es efectiva cuando se usa repetir, la línea interpolada se moverá hacia adelante y hacia atrás como un yo-yo, en lugar de comenzar de nuevo

• delay
  controla el retraso antes del inicio de la interpolación new TWEEN.Tween().delay(), y el tiempo de retraso antes del inicio de la interpolación acepta un parámetro para controlar el tiempo específico

• pausa
  suspende temporalmente la animación de interpolación new TWEEN.Tween().pause(), suspende el movimiento de interpolación actual

• reanudar reanuda la animación de interpolación new TWEEN.Tween().resume()y reanuda el movimiento de interpolación en pausa

• para
  controlar la forma de movimiento y la dirección de la interpolación , cuando se inicia la interpolación, Tween.js leerá el valor de la propiedad actual y aplicará el valor relativo para encontrar el nuevo valor final new TWEEN.Tween().to()

• Método de operación de interpolación

  • actualizar
    Actualizar animación de interpolación TWEEN.update(), el movimiento de actualización dinámica de interpolación generalmente se window.requestAnimationFrame usa en conjunto

  • getAll
    obtiene todos los grupos de interpolaciónTWEEN.getAll()

  • removeAll
    elimina todos los grupos de interpolaciónTWEEN.removeAll()

  • add agrega
    una nueva interpolación TWEEN.add(tween)(tween) para agregar una interpolación específicavar tween=new TWEEN.Tween()

  • remove
    elimina una interpolación TWEEN.remove(tween)(tween) elimina una interpolación específicavar tween=new TWEEN.Tween()

  • Group agrega un nuevo grupo de interpolaciones var Group=TWEEN.Group(),new TWEEN.Tween({ x: 1 }, Group) , para agrupar las interpolaciones configuradas TWEEN.update()yTWEEN.removeAll() , no afectará a las interpolaciones que se han agrupado

• interpolación función de devolución de llamada

  • onStart()
    new TWEEN.Tween().onStart((obj)=>{}) , ejecutado cuando comienza la interpolación, solo una vez, cuando se usa repeat() para repetir la interpolación, no se ejecutará repetidamente, y el onStart((obj)=>{})objeto obj tween se pasa como el primer parámetro

  • onStop()
    new TWEEN.Tween().onStop((obj)=>{}) , se ejecuta cuando la interpolación se detiene explícitamente a través de onStop() , pero se ejecuta cuando la interpolación se realiza normalmente y antes de detener cualquier posible interpolación en cadena, el objeto interpolación obj se pasa como el primer onStop((obj)=>{})argumento

  • onUpdate()
    new TWEEN.Tween().onUpdate((obj)=>{}) , se ejecuta cada vez que se actualiza la interpolación, devuelve el valor actual actualizado y onUpdate((obj)=>{})el objeto obj tween se pasa como el primer parámetro

  • onComplete()
    new TWEEN.Tween().onComplete((obj)=>{}) , ejecutado cuando la interpolación se completa normalmente (es decir, no se detiene), onComplete((obj)=>{})el objeto obj interpolación se pasa como el primer parámetro

Función de aceleración: TWEEN.Easing

tween.js proporciona algunas funciones de aceleración listas para usar, como lineal, cuadrática, tres, cuatro, cinco, sinusoidal, exponencial, circular, elástica, descendente y rebotadora, y luego existen los tipos de aceleración correspondientes: In ( Primero lento, luego rápido ) Out (primero rápido, luego lento) e InOut (aceleración en la primera mitad, desaceleración en la segunda mitad)