Article directory
foreword
Animation is a technique in which images are played through in rapid succession to create an illusion of movement and change. This is usually done by making a series of still images and playing them back in succession to create the effect of motion. Animation is commonly used in film, television, advertising, games and education to create characters and scenes in various forms that provide visual pleasure and educational value. Common animation types include hand-drawn animation, digital animation, 3D animation, etc.
1. Animation
1. Basic use of tween.js
tween.js is a library for Tween Animation in JavaScript that allows us to create smooth animations quickly and easily.
The basic steps to use tween.js are as follows:
- Introduce the tween.js library in the HTML file, which can be obtained by downloading the tween.js file or from the CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
- Create a Tween object in JavaScript. Creating a Tween object requires specifying three parameters: initial value, target value, and animation duration.
var tween = new TWEEN.Tween({
x: 0}) // 起始值为 { x: 0 }
.to({
x: 100}, 1000) // 结束值为 { x: 100 }，动画持续时间为 1000 ms
- Add animation effects. Using the methods provided by the Tween object, you can add various animation effects, such as linear movement, fade in and fade out, etc.
tween.easing(TWEEN.Easing.Quadratic.InOut) // 缓动效果为二次缓入缓出
- Start the animation. Start the animation using the start() method of the Tween object.
tween.start()
- Render animation effects. Use the update() method provided by the TWEEN library to update animation effects in real time.
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
}
animate();
The above are the basic usage steps of the tween.js library. For more detailed usage and parameter settings, please refer to the official documentation of tween.js.
2. Animation case of 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>
