Directorio de artículos
prefacio
La animación es una técnica en la que las imágenes se reproducen en rápida sucesión para crear una ilusión de movimiento y cambio. Esto generalmente se hace creando una serie de imágenes fijas y reproduciéndolas en sucesión para crear el efecto de movimiento. La animación se usa comúnmente en cine, televisión, publicidad, juegos y educación para crear personajes y escenas en diversas formas que brindan placer visual y valor educativo. Los tipos de animación comunes incluyen animación dibujada a mano, animación digital, animación 3D, etc.
1. Animación
1. Uso básico de tween.js
tween.js es una biblioteca para Tween Animation en JavaScript que nos permite crear animaciones fluidas de forma rápida y sencilla.
Los pasos básicos para usar tween.js son los siguientes:
- Introduzca la biblioteca tween.js en el archivo HTML, que se puede obtener descargando el archivo tween.js o desde el CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
- Cree un objeto Tween en JavaScript. La creación de un objeto Tween requiere la especificación de tres parámetros: valor inicial, valor objetivo y duración de la animación.
var tween = new TWEEN.Tween({
x: 0}) // 起始值为 { x: 0 }
.to({
x: 100}, 1000) // 结束值为 { x: 100 }，动画持续时间为 1000 ms
- Añadir efectos de animación. Con los métodos proporcionados por el objeto Tween, puede agregar varios efectos de animación, como movimiento lineal, aparición y desaparición gradual, etc.
tween.easing(TWEEN.Easing.Quadratic.InOut) // 缓动效果为二次缓入缓出
- Inicie la animación. Inicie la animación utilizando el método start() del objeto Tween.
tween.start()
- Renderizar efectos de animación. Utilice el método update() proporcionado por la biblioteca TWEEN para actualizar los efectos de animación en tiempo real.
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
}
animate();
Los anteriores son los pasos básicos de uso de la biblioteca tween.js. Para obtener más detalles sobre el uso y la configuración de parámetros, consulte la documentación oficial de tween.js.
2. Caso de animación de Three.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/tween.min.js"></script>
</head>
<body>
</body>
</html>
<script>
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机 视点
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机的位置
camera.position.set(0,0,20);
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加一个立方体
// 定义了一个立方体的对象
const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
// 创建材质
const lambert = new THREE.MeshLambertMaterial({
color: 0xff0000 })
const basic = new THREE.MeshBasicMaterial({
wireframe: true })
const cube = THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [
lambert,
basic
])
// 添加到场景里
scene.add(cube);
// 添加灯光
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,10,90);
scene.add(spotLight);
new TWEEN.Tween(cube.rotation).to({
x: cube.rotation.x + 2,
y: cube.rotation.y + 2,
z: cube.rotation.z + 2,
}, 2000).start().repeat(Infinity);
const animation = () => {
TWEEN.update();
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation()
</script>
