tween.js简单案例

init();
			animate();

			function init() {

				var output = document.createElement( 'div' );
				output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px';
				document.body.appendChild( output );

				var tween = new TWEEN.Tween( { x: 50, y: 0 } )
					.to( { x: 400 }, 2000 )
					.easing( TWEEN.Easing.Elastic.InOut )
					.onUpdate( function () {

						output.innerHTML = 'x == ' + Math.round( this.x );
						var transform = 'translateX(' + this.x + 'px)';
						output.style.webkitTransform = transform;
						output.style.transform = transform;

					} )
					.start();

			}

			function animate( time ) {

				requestAnimationFrame( animate );
				TWEEN.update( time );

			}

 

posted @   SimoonJia  阅读(96)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示