当前位置: 首页 > 工具软件 > TweenJS > 使用案例 >

Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档

淳于乐池
2023-12-01

1,Threejs中使用Tweenjs实现动画

在Threejs中使用Tweenjs很简单,步骤主要是引入Tweenjs,写动画,动画刷新。

如下示例:

<body>
	<div id="dom"></div>
	<script type="text/javascript" src="libs/three.js"></script>
	<script type="text/javascript" src="libs/Tween.min.js"></script>
	<script type="text/javascript">
		var camera;
		var renderer;

		function init() {
			// 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。
			var scene = new THREE.Scene();

			// 创建一个摄像机,它定义了我们正在看的地方
			camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 10000);
			
			camera.position.x = 180;
			camera.position.y = 80;
			camera.position.z = 90;
			camera.lookAt(scene.position);

			// 创建一个渲染器并设置大小,WebGLRenderer将会使用电脑显卡来渲染场景
			renderer = new THREE.WebGLRenderer({
				antialias: true,
				logarithmicDepthBuffer: true,
			});
			renderer.setSize(window.innerWidth, window.innerHeight);

			// 在屏幕上显示坐标轴
			var axes = new THREE.AxesHelper(10000);
			scene.add(axes);
			
			var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)
				.easing(TWEEN.Easing.Elastic.InOut)
				.onUpdate(function(){
					console.log(this.x)
				})
				// .start();

			// 将呈现器的输出添加到HTML元素
			document.getElementById("dom").appendChild(renderer.domElement);

			// 启动动画
			renderScene();

			function renderScene() {
				TWEEN.update();

				// 使用requestAnimationFrame函数进行渲染
				requestAnimationFrame(renderScene);
				renderer.render(scene, camera);
			}

			// 渲染的场景
			renderer.render(scene, camera);
		}
		window.onload = init;
	</script>
</body>

2, Tween.js使用说明文档

Tween.js是一个轻量级的JavaScript库,可以从https://github.com/sole/tween.js/下载。
    通过这个库可以很容易地实现某个属性在两个值之间进行过渡,而且起始值和结束值之间的所有中间值都会自动计算出来,这个过程叫作tweening(补间)。

        var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)
                .easing(TWEEN.Easing.Elastic.InOut)
                .onUpdate(function(){
                         // update the mesh
                })
                .start();
    
        上述代码创建了TWEEN.Tween对象,这个对象会确保x属性值在10000毫秒内从10变化到3。通过Tween.js,你还可以指定属性值是如何变化的,是线性的、指数性的,还是其他任何可能的方式(完整列表可以参照http://sole.github.io/tween.js/examples/03_graphs.html)。
        属性值在指定时间内的变化被称为easing(缓动),在Tween.js中你可以使用easing()方法来配置缓动效果;

        
        var tweenBack = new TWEEN.Tween({x: 3}).to({x: 10}, 10000);
        tweenBack.easing(TWEEN.Easing.Elastic.InOut);
        tweenBack.chain(tween);
        tweenBack.start();
        
        这个通过chain()方法可以将这两个补间衔接起来,这样当动画启动之后,程序就会在这两个补间循环。例如:一个动画在另一个动画结束后开始。可以通过chain方法来使实现。
    
        tweenBack.repeat(10);
        如果你想制作循环动画可以使用chain来实现,但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次。
    
        tweenBack.yoyo();
        ​​​​​​​这个函数只在你使用repeat方法是起作用。当它被激活时,tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。
    
        tweenBack.delay(1000);
        ​​​​​​​delay方法用于控制动画之间的延时。
    
        TWEEN.add(tween) 和 TWEEN.remove(tween)
        用于向被激活的tweens中添加一个tween,或移除一个tween。
    
        以上方法通常只是在内部使用,一般情况下你了解即可。

 类似资料: