连锁反应，
Html:
<h3>连锁反应</h3>
<p>Click <a id="start" href="#" name="start">start</a>点击之后看看这一些列连锁反应</p>
<strong>展示:</strong><br />
<p id="log">显示进展状态：</p>
<div id="box"></div>
为展示更加清楚，加上一定style文件
Css:
#box {
background: #6B7B95;
height: 70px;
margin: 0 auto;
width: 100px;
}
#log {
margin: 0;
height: 50px;
}
现在进入Mootools的这个channing部分。
Script:
//define log;
var log = $('log');.
//define fx as a Fx.Morph.
var fx = new Fx.Morph('box', {
duration: 1000,
transition: Fx.Transitions.Quart.easeOut
});
*这里涉及到了Fx.Morph这个类。为保持讲述内容的流畅，关于Fx.Morph的细节接下来会再详谈，暂且我们就理解为它就是这样的定义格式new Fx.Morph(‘target’,{args})。
我们继续，
开始进入本例的核心，给startbtn注册一个click事件。
$('start').addEvent('click', function(event){})
在这个function内书写所发生的相关事件：
function(event){
event.stop();
//log用于展示动画进程,那么首先状态为starting。
log.set('html', 'starting...');
//编辑chain动画
fx.start({
'width': 300,
'height': 210
}).chain(function(){
log.set('html', 'First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function(){
log.set('html', 'Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
})
.chain(function(){
log.set('html', 'Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#78BA91'
});
})
}
看到这里，已经很明白了， chain的使用很简单，我将框架提炼出来就是：
fx.start().chain(function(){
this.start()
console.log('1/5')
}).chain(function(){
this.start()
console.log('2/5');
}).chain(function(){
this.start.delay(1000,this,{'width':100,'height':400});
console.log('3/5');
})
现在我们回头再看看有关于Fx.Morph这个类。
说道Fx.Morph这个类，就先简略的提及一下Fx。
Fx这个类，本身很少会被使用，但是它关系到了它的这个大家族，即mootools里面的effect的控制者，我姑且暂时称其为动画大家族，其中包括以下几大类：
Fx
Fx.Css
Fx.Tween
Fx.Morph
Fx.Transitions
Fx为基类。动画家族中的其余成员都继承于它。
而现在我们遇到的就是Fx.Morph类。关于这几类的详情，我会分成不同的篇章去说明。
最后给出一个完整的，简易的页面代码，方便朋友调试和深入理解。
View Code
<!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" />
<title>Untitled Document</title>
<style>
#box {
background: #6B7B95;
height: 70px;
margin: 0 auto;
width: 100px;
}
#log {
margin: 0;
height: 50px;
}
</style>
</head>
<body>
<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<strong>Log:</strong><br />
<p id="log">waiting for start click</p>
<div id="box"></div>
<!---js part--->
<script src="mootools-core-1.4.2-full-compat.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
//define log;
var log = $('log');
//define fx as a Fx.Morph.
var fx = new Fx.Morph('box', {
duration: 1000,
transition: Fx.Transitions.Quart.easeOut,
});
//add click event to startBtn;
$('start').addEvent('click', function(event){
event.stop();
//show progress of event happenning
log.set('html', 'starting...');
console.log('start');
//chain structuring
fx.start().chain(function(){
this.start({
'opacity': .3
});
console.log('1/5')
}).chain(function(){
this.start({
'opacity': 1
});
console.log('2/5');
}).chain(function(){
this.start.delay(1000,this,{'width':100,'height':400});
console.log('3/5');
})
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号