script.icio.us 中动画的学习-优快云博客

本文链接：https://blog.youkuaiyun.com/java_mail_test/article/details/84298790
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}
</script> 
<title>Sortable</title>
<script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript" ></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript" ></script>
</head>
<body>
<style>
</style>

使用delay加入延迟(delay为1)
<div id="ex1"></div>
<div id="moveDiv" style="background-color:red;width:150px;height:20px;">Click To Move</div>
<script>
String.prototype.setCodeStyle = function() {
	return this.toString().replace(/[\r\n]+/g , '<br/>').replace(/\s/g , '&nbsp;');
}
</script>
<script id="s1">
$('moveDiv').observe('click' , function() {
	new Effect.Move('moveDiv' , {
		delay : 1,
		x : 40 , 
		y : 0
	});
});
</script>
<script>
$('ex1').update($('s1').innerHTML.setCodeStyle());
</script>
使用queue选项 <br />
<ul>
	<li>parallel 默认，立即开始</li>
	<li>front 放在队列前面</li>
	<li>end 放在队列后面</li>
	<li>with-last 和队列中最后一个一起开始</li>
</ul>
<div id="ex2"></div>
<div id="moreDiv1" style="background-color:red;width:150px;height:20px;">moreDiv1</div>
<div id="moreDiv2" style="background-color:red;width:150px;height:20px;">moreDiv2</div>
<button id="start1">start</button>
<script id="s2">
$("start1").observe('click' , function() {
	new Effect.Move('moreDiv1' , {
		x : 40 ,
		y : 0
	});
	new Effect.Move('moreDiv1' , {
		x : 0 ,
		y : 40,
		queue : 'end'
	});
	new Effect.Move('moreDiv2' , {
		x : 40 ,
		y : 0,
		queue : 'with-last'
	});
});
</script>
<script>
$('ex2').update($('s2').innerHTML.setCodeStyle());
</script><br />
使用duration控制时间(默认为1，1秒)
<div id="ex3"></div>
<div id="moreDiv3" style="background-color:red;width:150px;height:20px;">Click To Move</div>
<script id="s3">
$('moreDiv3').observe('click' , function() {
	new Effect.Move('moreDiv3' , {
		x : 40,
		y : 0,
		duration : 3
	});
});
</script>
<script>
$('ex3').update($('s3').innerHTML.setCodeStyle());
</script>
fps控制流畅度(默认为100)
<div id="ex4"></div>
<div id="moreDiv4" style="background-color:red;width:150px;height:20px;">moreDiv4</div>
<div id="moreDiv5" style="background-color:red;width:150px;height:20px;">moreDiv5</div>
<button id="start2">start</button>
<script id="s4">
$('start2').observe('click' , function() {
	new Effect.Move('moreDiv4' , {
		x : 40,
		y : 0
	});
	new Effect.Move('moreDiv5' , {
		x : 40,
		y : 0,
		fps : 20
	});
});
</script>
<script>
$('ex4').update($('s4').innerHTML.setCodeStyle());
</script><br />
transition选项
<div id="ex5"></div>
<div id="moreDiv6" style="background-color:red;width:150px;height:20px;">moreDiv6</div>
<div id="moreDiv7" style="background-color:red;width:150px;height:20px;">moreDiv7</div>
<button id="start3">start</button>
<script id="s5">
$("start3").observe('click' , function() {
	new Effect.Move('moreDiv6' , {
		x : 40,
		y : 0,
		transition: Effect.Transitions.sinoidal
	});
	new Effect.Move('moreDiv7' , {
		x : 40,
		y : 0,
		transition: Effect.Transitions.spring
	});
});
</script>
<script>
$('ex5').update($('s5').innerHTML.setCodeStyle());
</script>
<br />
From 和 To
<div id="ex6"></div>
<div id="moreDiv8" style="background-color:red;width:150px;height:20px;">moreDiv8</div>
<div id="moreDiv9" style="background-color:red;width:150px;height:20px;">moreDiv9</div>
<button id="start4">start</button>
<script id="s6">
$("start4").observe('click' , function() {
	new Effect.Opacity('moreDiv8' , {
		from : 1,
		to : 0.5
	});
	new Effect.Opacity('moreDiv9' , {
		from : 1,
		to : 0.2
	});
});
</script>
<script>
$('ex6').update($('s6').innerHTML.setCodeStyle());
</script>
<br />
几个回调函数
<br />
beforeStart与beforeSetup一样，都是还没制定动画之前的操作。
afterSetup是制定了动画，第一帧触发之前做的操作。
beforeUpdate和afterUpdate是每一次更新开始和完成的时候，做的操作。
afterFinish是动画完成之后的操作
<div id="ex7"></div>
<div id="moreDiv10" style="position:relative;background-color:red;width:150px;height:20px;">Click To Move</div>
<script id="s7">
$('moreDiv10').observe('click' , function() {
	new Effect.Move('moreDiv10' , {
		x : 40,
		y : 0,
		beforeStart : function() {
			//console.log(arguments);
			//$('moreDiv10').setStyle({
			//	left : '-10px'
			//});
		},
		beforeSetup : function() {
			//console.log(arguments);
			/*
			$('moreDiv10').setStyle({
				left : '-10px'
			});
			*/
		},
		afterSetup  : function() {
			//console.log(arguments);
			$('moreDiv10').setStyle({
				opacity : '0.5'
			});
		},
		beforeUpdate : function() {
			//console.log(arguments);
			$('moreDiv10').setStyle({
				opacity : '0.2'
			});
		},
		afterUpdate : function() {
			//console.log(arguments);
			$('moreDiv10').setStyle({
				opacity : '0.7'
			});
		},
		afterFinish : function() {
			//console.log(arguments);
		}
	});
});

</script>
<script>
$('ex7').update($('s7').innerHTML.setCodeStyle());
</script>
组队列 需要添加queue<br />
queue : {<br />
	scope : '组队列id',<br />
	position : 'end'<br />
};<br />
<div id="ex8"></div>
<div id="moreDiv11" style="position:relative;background-color:red;width:150px;height:20px;">moreDiv11</div>
<div id="moreDiv12" style="position:relative;background-color:red;width:150px;height:20px;">moreDiv12</div>
<div id="moreDiv13" style="position:relative;background-color:red;width:150px;height:20px;">moreDiv13</div>
<button id="start5">start</button>
<script id="s8">
$("start5").observe('click' , function() {
	var fun = function(item) {
		var options = {
			scope : item.id,
			position : 'end'
		};
		new Effect.Opacity(item , {
			to : '0.1',
			duration : 2,
			queue : options
		});
		new Effect.Move(item , {
			x : 50,
			queue : options,
			duration : 2
		});
	};
	fun($('moreDiv11'));
	fun($('moreDiv12'));
	fun($('moreDiv13'));
});
</script>
<script>
$('ex8').update($('s8').innerHTML.setCodeStyle());
</script>
</body>
</html>