首页 > 其他分享 >tween.js简单案例

tween.js简单案例

时间:2023-06-16 17:55:30浏览次数:36  
标签:style transform js tween 案例 var output animate

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 );

			}

 

标签:style,transform,js,tween,案例,var,output,animate
From: https://www.cnblogs.com/Simoon/p/17486188.html

相关文章

  • jquery根据json自动生成表格
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>导入文件</title><linkrel="stylesheet"href="/js/bootstrap.min.css"><scriptsrc="/js/jquery.min.js&q......
  • java中xml和json转换
    packagecom.lbdz.bsf.util;importnet.sf.json.JSONObject;importnet.sf.json.JSONSerializer;importnet.sf.json.xml.XMLSerializer;/***xml和json转换*/publicclassXMLUtils{/***xml转化为字符串*@paramxml*@returnstr......
  • Fabric.js 选中元素不置顶(防止显示到顶层挡住其它元素)
     初始化画布的时候把preserveObjectStacking的属性改成true,默认是false this.canvas=newfabric.Canvas('mycanvas',{preserveObjectStacking:true}); 其它【Fabric.js元素被遮挡的部分也可以操作 】觉得很有用,记录一下,原地址:Fabric.js元素被遮挡的部分也......
  • 字符串数组不能转化对象数组,jsonArray也转化报错
    刚开始写法------错误JSONArrayjsonArray=(JSONArray)this.getJsonFilter().get("ids");PltPayDuesModel[]payDuesModels=(PltPayDuesModel[])jsonArray.toArray();报这个[Ljava.lang.Object;cannotbecastto[Ljava.lang.String;由于无法直接,因此需要曲线救国......
  • 包含js代码的dom元素从页面上消失后发生了什么
    最近遇到了一个问题:有一个数据看板的页面运行了n天后突然页面崩溃了,爆出了outofmemory的错误。页面不复杂,几个图表定时更新数据,实在没明白为什么长时间运行后会outofmemory。在每次请求后使用console.log(window.performance.memory); 打印出页面的内存占用情况,然后就......
  • 【服务器数据恢复】EMC Isilon(OneFS)存储中vmware虚拟机被误删除的数据恢复案例
    EMCIsilon存储结构:Isilon群集存储系统使用的是分布式文件系统OneFS。Isilon群集存储系统的每个节点均为单一OneFS文件系统,Isilon在进行横向扩展时不会影响数据的正常使用。Isilon群集存储系统所有节点在工作时都提供相同的功能,节点没有主备之分。Isilon群集存储系统在存储文件时,O......
  • web worker进程和线程的区别,Chrome 中有哪些常⻅进程,如果我有⼀个耗时很⻓的同步计算
    进程(Process)和线程(Thread)都是操作系统中用于多任务处理的概念。简单地说,一个进程就是一个程序的执行空间,而一个线程则是在执行空间内独立运行的执行路径。区别:进程是系统分配资源的最小单位,线程是操作系统调度的最小单位。各个进程之间是独立的,各个线程之间共享一些资源。创......
  • 直播app开发,JS 获取当天、上周、本周,下周开始时间
    直播app开发,JS获取当天、上周、本周,下周开始时间 <script>  //注释:Date.parse()//转化时间戳  //时间  varnow=newDate();//当前日期  varnowDayOfWeek=now.getDay();//今天本周的第几天  varnowDay=now.getDate();  //当前日期 ......
  • js保留小数位数(进位舍去)问题
    toFixed(x)这个方法在使用时,它内部对于进位舍去并没有使用四舍五入方法,而是使用的是银行家舍去法,即:舍去位的数值小于5时,直接舍去舍去位的数值大于等于6时,进位舍去当舍去位的数值等于5时,分为两种情况:5后面还有其他数字(非0),则进位后舍去;若5后面是0,则根据5前一位数的奇偶性来......
  • Node.js 开发常用到的库和插件工具,同事看到后也悄悄收藏了……
    Node.js是一个功能强大,并且非常流行的JavaScript运行时环境,使开发人员能够高效率的构建高性能应用程序。下面介绍了8个常见的应用程序开发中用到的库和函数,可以用于缓存数据、操作日期、处理图像、发送电子邮件、发出HTTP请求、记录请求和响应、压缩数据和哈希密码等。通过使......