阅读数:10 评论数:0

一、概述

TweenJS 是一个简单但功能强大的动画库，常用于在 JavaScript 项目中实现动画效果。它是 CreateJS 的一部分.

二、使用

1、安装

npm install @tweenjs/tween.js

2、基本用法

（1）导入

import { Tween, Easing, update } from '@tweenjs/tween.js';

（2）创建动画

const object = { x: 0, y: 0 };

const tween = new Tween(object)
  .to({ x: 100, y: 100 }, 1000) // 目标值和持续时间
  .easing(Easing.Quadratic.Out) // 使用缓动函数
  .onUpdate(() => {
    console.log(object);
    // 更新你的对象或 DOM 元素
  })
  .start();

（3）更新动画

function animate(time) {
  requestAnimationFrame(animate);
  update(time); // 更新所有活动的补间动画
}

requestAnimationFrame(animate); // 启动动画循环

或者使用TWEEN.update更新所有动画

// 假设你已经引入了 TWEEN.js 库
// 创建一个对象
const object = { x: 0 };

// 创建一个 tween 动画
const tween = new TWEEN.Tween(object)
  .to({ x: 10 }, 1000)  // 动画目标：x 属性变化到 10，动画时长为 1000 毫秒
  .easing(TWEEN.Easing.Quadratic.Out)  // 使用二次缓动效果
  .onUpdate(() => {
    console.log(object.x);  // 每次更新时打印 x 的当前值
  })
  .start();  // 启动动画

// 渲染循环中调用 TWEEN.update()
function animate() {
  requestAnimationFrame(animate);

  // 更新所有的 tweens 动画
  TWEEN.update();

  // 在此可以执行其他动画或渲染操作
  renderer.render(scene, camera);
}

animate();