一个JS缓动类 Tween.js代码及实例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tween.js JS缓动类 by z@rndz.org</title>
<style> 
	body{margin:100px 32px;}
	.set{
		float:left;
		clear:both;
	}
	.chart{
		position:absolute;
		width:800px;
		height:200px;
		border:1px solid silver;
	}
	.cross{
		float:left;
		position:relative;
		width:850px;
		height:200px;
		border:1px solid silver;
	}
	.crossX{
		position:absolute;
		width:1px;
		height:100%;
		background:red;
	}
	.crossY{
		position:absolute;
		bottom:0px;
		width:100%;
		height:1px;
		background:red;
	}
</style>
</head>
<body>
	<div class="cross"><div class="crossX"></div><div class="crossY"></div></div>
	<div class="chart"></div>
	<div class="set">
		<p>Tween类型：</p>
		<p>ease类型：
			<label><input name="vEase" type="radio" value="easeIn" checked="checked">easeIn </label>
			<label><input name="vEase" type="radio" value="easeOut">easeOut </label>
			<label><input name="vEase" type="radio" value="easeInOut">easeInOut </label>
		</p>
		<p>循环类型：
			<label><input type="radio" name="vIterate" value="once">Once</label>
			<label><input type="radio" name="vIterate" value="restart" checked>Restart</label>
			<label><input type="radio" name="vIterate" value="reverse">Reverse</label>
		</p>
		<p>速度：
			<label><input type="radio" name="vSpeed" value="800">1x</label>
			<label><input type="radio" name="vSpeed" value="400">2x</label>
			<label><input type="radio" name="vSpeed" value="200" checked>4x</label>
			<label><input type="radio" name="vSpeed" value="100">8x</label>
		</p>
		<p>参数：<input type="text" id="arg"></p>
		<input id="run" type="button" value=" 执行 "> <a href="http://rndz.org">z@rndz.org</a> 改，原作 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html">cloudgamer</a>
		<ol>
			<li>参数以空格、逗号、分号分隔</li>
			<li>Bezier 类型使用 Bezier 的算法，但只有一个方向的坐标。（Bezier 曲线为两个方向的坐标。）</li>
			<li>Elastic 使用两个参数</li>
			<li>Back 使用一个参数</li>
			<li>Bezier 类型的参数为不定，对应高阶 Bezier 曲线。</li>
		</ol>
	</div>
	<script src="tween.js"></script>
	<script>
	var tween = new Tween(0,200,200),timer = null;
	chart();
	for(var i in Tween){
		document.querySelector('.set p').innerHTML += '<label><input type="radio" name="vTween" value="'+i+'"'+(tween.func==Tween[i]?'checked':'')+'>'+i+'</label> ';
	}
	document.body.onclick = function(e){
		if(e.target.id == 'run'){
			tween.reset();
			if(timer){
				clearInterval(timer);
				timer = 0;
			}else{
				tween.reset();
				timer = setInterval(run,10);
			}
		}
		if(e.target.type != 'radio'){
			return;
		}if(e.target.name == 'vTween'){
			tween.func = Tween[e.target.value];
			delete tween.a;
			delete tween.p;
			delete tween.s;
		}if(e.target.name == 'vEase'){
			tween.ease = tween[e.target.value];
		}if(e.target.name == 'vIterate'){
			tween.iterate = e.target.value;
		}if(e.target.name == 'vSpeed'){
			tween.duration = e.target.value;
		}
		chart();
	}
	document.getElementById('arg').onchange = function(e){
		var args = this.value.replace(/^\s+|\s+$/g,'').split(/[ ,;]+/);
		args = args.map(parseFloat);
 
		if(tween.func==Tween.Power){
			isFinite(args[0]) && (tween.e = args[0]);
		}else if(tween.func==Tween.Elastic){
			isFinite(args[0]) && (tween.a = args[0]);
			isFinite(args[1]) && (tween.p = args[1]);
		}else if(tween.func==Tween.Back){
			isFinite(args[0]) && (tween.s = args[0]);
		}else if(tween.func==Tween.Bezier){
			tween.p = args;
		}
		if(''==this.value){
			delete tween.e;
			delete tween.a;
			delete tween.p;
			delete tween.s;
		}
		chart();
	}
	function chart(){
		var a = [];
		tween.reset();
		for(var i=tween.duration;i--;){
			a.push('<div style="bottom:'+(tween.run()|0)+'px;left:'+((800*tween.cur/tween.duration)|0)+'px;position:absolute;width:2px;height:2px;background:blue;"></div>');
		}
		document.querySelector('.chart').innerHTML = a.join('');
	}
	function run(){
		var crossY = document.querySelector('.crossY').style,
			crossX = document.querySelector('.crossX').style;
		crossY.bottom = (tween.run()|0)+'px';
		crossX.left = (tween.cur*800/tween.duration)+'px';
	}
	</script>
<script type="text/javascript"> 
  var _gaq = _gaq || [];
  _gaq.push(["_setAccount", "UA-10458646-1"]);
  _gaq.push(["_setDomainName", ".rndz.org"]);
  _gaq.push(["_trackPageview"]);
 
  (function() {
    var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
    ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
  })();
</script></div></body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一个JS缓动类 Tween.js代码及实例

分类

网站常用

描述

一个由JavaScript缓冲类，Tween.js代码及实例示例： <br>　　1.参数以空格、逗号、分号分隔 <br>　　2.Bezier 类型使用 Bezier 的算法，但只有一个方向的坐标。（Bezier 曲线为两个方向的坐标。） <br>　　3.Elastic 使用两个参数 <br>　...