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

这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第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选项及事件的教程

下载最后一个示例的代码

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

(0)

相关推荐

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

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

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

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

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

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

  • Mootools 1.2教程 Fx.Tween的使用

    和我们看到的其他的MooTools函数一样,这些方法使用起来都非常简单,但是功能都很强大.Tween可以让你添加那些极"炫"的效果--可以很平滑地发生形变动画,从而改善你的用户体验. Tween的快捷方法 我们通常都从"基本知识"入手,不过MooTools 1.2只为渐变(tween)提供了这样极其出色的快捷方法,它们使用起来都极其简单以至于我忍不住要从这里开始. .tween(); 一个渐变(tween)是一个在两个样式属性值之间的平滑的变化.举个例子,通过渐变(

  • Mootools 1.2教程 事件处理

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

  • Mootools 1.2教程 函数

    今天开始MooTools系列教程的第4讲.如果你还没有看过上一讲,请先查看上一篇教程<Mootools 1.2教程(3)--数组使用简介>.今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识. 但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数.此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中.当我们需要把它放在domready的外面时,我们使用了函数(function).在你在domr

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

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

  • Flutter实战教程之酷炫的开关动画效果

    前言 此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了. 更多动画效果及Flutter资源: https://github.com/781238222/flutter-do 添加依赖 在项目的 pubspec.yaml 文件中添加依赖: dependencies: wheel_switch: ^0.0.1 执行命令: flutter pub get 使用 WheelSwitch( value: false, ) 组件默认的宽高分别是80.30,也可以指定宽高

  • Mootools 1.2教程 滑动效果(Slide)

    基本用法 就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例. 首先,让我们为滑动元素建立一个HTML文件. 参考代码: 复制代码 代码如下: <div id="slide_element" class="slide">这里是要滑动显示的内容.</div> 我们的CSS也不需要任何修饰. 参考代码: 复制代码 代码如下: .slide { margin: 20px 0;

  • Mootools 1.2教程(21)——类(二)

    Fdream注:原文好像少了一部分,因此我自作主张地补充了下面这一段及BaseClass的代码. 在今天的教程中,我们将主要学习一下MooTools中类的实现和继承(扩展).通过实现和继承,我们可以在子类中使用父类的方法,而不需要再重新声明和实现相同的方法.MooTools中的Class类可以帮助我们轻松地做到这一点.首先,我们定一个基类(base class). 参考代码: 复制代码 代码如下: var BaseClass = new Class({ // 定义一个方法testFunction

随机推荐