Mootools 1.2教程 同时进行多个形变动画_Mootools

这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。
基本用法
使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。
为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements。
参考代码: [复制代码] [保存代码]
var fxElementsArray = $$('.myElementClass');
现在我们就可以把我们的数组传递给Fx.Elements对象了。
参考代码:

复制代码 代码如下:

var fxElementsObject = new Fx.Elements(fxElementsArray, {
// Fx选项
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
// Fx事件
onStart: function(){
startInd.highlight('#C3E608');
}
});

和Fx.Morph一样,Fx.Elements扩展了Fx类,可以允许你使用Fx的全部选项和事件。
.start({})和.set({})方法
要开始一个Fx.Elements效果,或者使用Fx.Elements设置样式,你可以像使用Fx.Tween和Fx.Morph那样做,不过不是直接把设置直接应用到Fx.Elements对象上,而是通过索引引用对应的元素——第一个元素是0,第二个是1,以此类推。
参考代码:
复制代码 代码如下:

// 你可以用.set({...})来设置样式
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
// 或者用.start({...})创建渐变动画
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});

就像Fx.Morph,你可以为元素的渐变动画设定任何一个开始值和结束值,你也可以只设置一个参数(就像我们上面只给宽度设置了一个值),那么这个元素将会从当前值变化到新参数指定的值。
这就是关于Fx.Elements的全部内容了。可以看看下面的例子,看看它们是怎么使用的。
示例代码
这里我们对两个元素使用了Fx.Elements。在渐变动画中有几个不同的类型可以选择,同时暂停按钮可以让你暂停动画。
首先,我们来创建我们的元素,我们的可能告知按钮(包括重置(reset)按钮、暂停(pause)按钮和恢复(resume)按钮),还有一些指示器,以便让我们看明白这个过程。
参考代码:

复制代码 代码如下:

<div id="start_ind" class="ind">onStart</div>
<div id="cancel_ind" class="ind">onCancel</div>
<div id="complete_ind" class="ind">onComplete</div>
<div id="chain_complete_ind" class="ind">onChainComplete</div>
<span id='buttons'>
<button id="fxstart">Start A</button>
<button id="fxstartB">Start B</button>
<button id="fxset">Reset</button>
<button id="fxpause">Pause</button>
<button id="fxresume">Resume</button>
</span>
<div class="myElementClass">Element 0</div>
<div class="myElementClass">Element 1</div>

我们的CSS代码也很简单
参考代码:

复制代码 代码如下:

.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}

下面是MooTools代码。
参考代码:
复制代码 代码如下:

var startFXElement = function(){
this.start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 500,
'background-color': '#333'
},
'1': {
'width': 500,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $('start_ind');
var cancelInd = $('cancel_ind');
var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
},
onCancel: function(){
cancelInd.highlight('#C3E608');
},
onComplete: function(){
completeInd.highlight('#C3E608');
},
onChainComplete: function(){
chainCompleteInd.highlight('#C3E608');
}
});
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){
fxElementsObject.pause();
});
$('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});

更多学习

正如你所看到的,Fx.Elements非常简单。要更深入地学习,可以仔细地阅读一下Fx.Elements文档、Fx.Morph文档和Fx文档。

另外,确保阅读过我们关于Fx.Morph和Fx选项及事件的教程。

下载最后一个示例的代码

也包含你开始实践所需要的所有东西。

时间: 2024-09-23 08:02:10

Mootools 1.2教程 同时进行多个形变动画_Mootools的相关文章

Mootools 1.2教程 设置和获取样式表属性_Mootools

欢迎开始这一系列的教程的第七讲.今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权.处理样式非常简单,不过今天我们要做一些调整.例如,我们要介绍键值对(key-value pair)对象.我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样.从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念.如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以

Mootools 1.2教程(2) DOM选择器_Mootools

如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

Mootools 1.2教程 事件处理_Mootools

今天我们开始第五讲,在上一讲(<Mootools 1.2教程(4)--函数>)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式.下一步就是理解事件了.和选择器类似,事件也是建立互动界面的一个重要部分.一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果.先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件. 左键单击事件 左键单击事件是web开发中最常见的事件.超链接识别点击事件,然后把你带到另外一个URL地址.MooTools能够识别其他DOM元素上的点击事

Mootools 1.2教程 选项卡效果(Tabs)_Mootools

简单的"额外信息"标签(TAB) 鼠标移上去显示内容的TAB 在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容.首先,我们来完成HTML代码--我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项): 参考代码: 复制代码 代码如下: // 这里是我们的菜单 <ul id="tabs"> <li id="one">One</li> <li i

Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件_Mootools

我们将学习如何使用Fx.Morph(它从本质上可以让你同时渐变多个样式表属性),然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项,最后我们将看看如何使用Fx事件,譬如"onComplete"和"onStart".通过这些选项和事件,我们可以获得更好的控制权来控制形变动画. Fx.Morph 创建一个新的Fx.Morph 初始化一个新的形变和创建一个新的渐变很类似,除了你要指定多个样式属性以外. 参考代码: 复制代码 代码如下: // 首先,把

图文教程:详解Fireworks中的动画制作

教程|详解 有过FLASH动画制作基础的朋友一定知道,在FLASH中将绘制的图像转换成的"图像元件"或"动画元件"是可以通过软件的内建指令,产生运动及其它变化的效果.而在Fireworks中也沿用了这种动画制作方式,从而大大减省了GIF动画制作时的繁琐性.而在本篇教材中,我们也只针对软件直接生成的动画效果进行分析,不对手工分桢的动画制作进行讨论. 一.动画的基本运动 在Fireworks中,动画的运动方式可分为四个基本动作: 1.直线运动:图像由A点直线移动至B点:

flash基础教程-逐帧动画、形变动画、运动动画

本教程为大家介绍flash中最基本的三种动画方法:逐帧动画.形变动画和运动动画. 1. 概念 逐帧动画--是Flash动画最基本的形式,是通过更改每一个连续帧在编辑舞台上的内容来建立的动画. 形状补间动画--是在两个关键帧端点之间,通过改变基本图形的形状或色彩变化,并由程序自动创建中间过程的形状变化而实现的动画. 运动补间动画--是在两个关键帧端点之间,通过改变舞台上实例的位置.大小.旋转角度.色彩变化等等属性,并由程序自动创建中间过程的运动变化而实现的动画. 2. 区别 1)逐帧动画的每一帧使

Flash入门教程:给任意照片添加雪景动画

本例是Flash入门教程:给任意照片添加雪景动画,学习视频文件的导入.嵌入,影片剪辑的创建操作.先看看效果演示: 准备工作:雪景图片.下雪的视频. 1.打开Flash,新建FLA文件. 2.导入图片:选菜单中的[文件]-[导入]-[导入到库]把图片导入到库中. 3.导入视频:选菜单中的[文件]-[导入]-[导入视频]打开导入视频面板,选文件路径:点击浏览,在打开面板中找到视频文件,点击打开.在导入视频面板中选中:在SWF中嵌入FLV并在时间轴中播放,点击下一步,嵌入视频,点击下一步,完成频频导入

Mootools 1.2教程(3) 数组使用简介_Mootools

今天,我们在来看看如何使用数组来管理DOM元素.基本方法 .each(); 在处理数组时,.each();方法是你最好的朋友.它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理.例如,我们可以假设你需要为页面中的每个div对象调用alert方法: 参考代码: 复制代码 代码如下: $$('div').each(function() { alert('a div'); }); 如果使用下面的HTML代码,上面的JavaScript代码将弹出两个alert对话