TweenJS 使用教程
项目介绍
TweenJS 是一个简单而强大的 JavaScript 动画库,主要用于创建平滑的补间动画。它支持各种缓动函数,可以轻松地与 CreateJS 生态系统中的其他库(如 EaselJS)集成。TweenJS 的设计目标是提供一个轻量级的、易于使用的动画引擎,适用于各种 Web 项目。
项目快速启动
安装
你可以通过 npm 安装 TweenJS:
npm install @tweenjs/tween.js
或者直接在 HTML 文件中引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
基本使用
以下是一个简单的示例,展示如何使用 TweenJS 创建一个对象的动画:
// 引入 TweenJS
import { Tween, update } from '@tweenjs/tween.js';
// 定义一个对象
const position = { x: 0, y: 0 };
// 创建一个补间动画
const tween = new Tween(position)
.to({ x: 100, y: 100 }, 1000) // 1秒内移动到 (100, 100)
.easing(Tween.Easing.Quadratic.Out) // 使用缓动函数
.onUpdate(() => {
console.log(position.x, position.y); // 更新时输出位置
})
.start(); // 启动动画
// 在 requestAnimationFrame 中更新动画
function animate() {
requestAnimationFrame(animate);
update(); // 更新所有补间动画
}
animate();
应用案例和最佳实践
案例1:简单的位置动画
const box = document.getElementById('box');
const position = { x: 0, y: 0 };
const tween = new Tween(position)
.to({ x: 300, y: 200 }, 2000)
.easing(Tween.Easing.Quadratic.Out)
.onUpdate(() => {
box.style.transform = `translate(${position.x}px, ${position.y}px)`;
})
.start();
function animate() {
requestAnimationFrame(animate);
update();
}
animate();
案例2:链式动画
const position = { x: 0 };
const tween1 = new Tween(position)
.to({ x: 100 }, 1000)
.onComplete(() => {
console.log('Tween 1 completed');
});
const tween2 = new Tween(position)
.to({ x: 0 }, 1000)
.onComplete(() => {
console.log('Tween 2 completed');
});
tween1.chain(tween2);
tween1.start();
function animate() {
requestAnimationFrame(animate);
update();
}
animate();
典型生态项目
CreateJS
TweenJS 是 CreateJS 生态系统的一部分,CreateJS 是一组用于构建丰富的交互式内容的 JavaScript 库。除了 TweenJS,CreateJS 还包括以下库:
- EaselJS:用于处理 HTML5 Canvas 上的图形和交互。
- SoundJS:用于处理音频播放和管理。
- PreloadJS:用于预加载资源,如图像、声音和数据。
这些库可以相互配合,提供完整的 Web 动画和交互解决方案。
Three.js
TweenJS 也可以与 Three.js 结合使用,Three.js 是一个用于在 Web 上创建 3D 图形的库。通过 TweenJS,可以轻松地为 Three.js 中的 3D 对象创建动画。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(