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


Posted in Javascript onSeptember 15, 2009

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

// 首先,把我们的元素赋值给一个变量 
var morphElement = $('morph_element'); 
// 现在,我们创建一个新的形变 
var morphObject = new Fx.Morph(morphElement); 
// 现在我们可以设置样式属性,就像Fx.Tween一样 
// 不过我们这里可以设置多个样式属性 
morphObject.set({ 
'width': 100, 
'height': 100, 
'background-color': '#eeeeee' 
}); 
// 我们也可以像启动一个渐变一样来启动我们的形变 
// 不过我们这里要同时放置多个属性值 
morphObject.start({ 
'width': 300, 
'height': 300, 
'background-color': '#d3715c' 
});

上面这些就是全部的内容了,包括创建、设置和启动一个形变。
为了让这个更合理一些,我们应该创建我们的变量,把我们的函数独立出来,并创建一些事件来控制这这个事情:
参考代码:
var morphSet = function(){ 
// 这里我们可以像Fx.Tween一样设置样式属性 
// 不过在这里我们可以同时设置多个样式属性 
this.set({ 
'width': 100, 
'height': 100, 
'background-color': '#eeeeee' 
}); 
} 
var morphStart = function(){ 
// 我们也可以像启动一个渐变一样启动一个形变 
// 不过现在我们可以同时设置多个样式属性 
this.start({ 
'width': 300, 
'height': 300, 
'background-color': '#d3715c' 
}); 
} 
var morphReset = function(){ 
// 设置为最开始的值 
this.set({ 
'width': 0, 
'height': 0, 
'background-color': '#ffffff' 
}); 
} 
window.addEvent('domready', function() { 
// 首先,把我们的元素赋值给一个变量 
var morphElement = $('morph_element'); 
// 现在,我们创建我们的形变 
var morphObject = new Fx.Morph(morphElement); 
// 在这里我们给按钮添加点击事件 
// 并且绑定morphObject和这个函数 
// 从而可以在上面的函数中使用"this" 
$('morph_set').addEvent('click', morphSet.bind(morphObject)); 
$('morph_start').addEvent('click', morphStart.bind(morphObject)); 
$('morph_reset').addEvent('click', morphReset.bind(morphObject)); 
});

参考代码:
<div id="morph_element"></div> 
<button id="morph_set">Set</button> 
<button id="morph_start">Start</button> 
<button id="morph_reset">reset</button>

SetStartreset
Fx选项(Options)
下面的选项都可以被Fx.Tween和Fx.Morph接受。它们都非常容易实现,而且可以给你非常多的控制权来控制你的效果。要使用这些选项,请使用下面的语法:
参考代码:
// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
// 首先是选项的名字 
// 然后后面跟一个冒号(:) 
// 然后定义你的选项 
duration: 'long', 
transition: 'sine:in' 
});

fps(每秒帧数,frames per second)
这个选项决定了这个动画每秒的帧数。默认值是50,可以接受数字和值为数字的变量。
参考代码:
// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
fps: 60 
}); 
// 或者这样 
var framesPerSecond = 60; 
var tweenObject = new Fx.Tween(tweenElement, { 
fps: framesPerSecond 
});

unit(单位)
这个选项设置了数字的单位。例如,你的100是指100个像素(px)、百分比还是em?
参考代码:
// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
unit: '%' 
});

link(连接)
link选项提供了一种方式可以让你管理多个启动效果的函数调用。例如,如果你有一个鼠标移上去(mouseover)的效果,你是希望每次用户移上去都启动这个效果吗?或者是,如果一个人把鼠标移上去两次,它应该忽略第二个响应还是应该把它们串连起来,然后等第一次调用完成以后再第二次调用这个效果?link又三个设置:
“ignore”(默认)——在一个效果没有完成之前忽略任何启动新效果的调用
“cancel”——如果有另外一个效果调用,则放弃当前的效果,转而处理新的效果调用
“chain”——链可以让你把效果像“链条”一样把效果连接起来,把这些调用进行堆栈,然后逐一调用这些效果,直到完成
参考代码:
// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
link: 'chain' 
});

duration(持续时间)
duration可以让你定义这个动画的持续时间。持续事件和速度是不一样的,因此如果你想让一个对象在一秒内移动100个像素,那么它将比一个每秒移动1000个像素的对象要慢。你可以输入一个数字(以毫秒为单位)、一个值为数字的变量或者三个快捷方式:
“short”=250ms
“normal”=500ms(默认)
“long”=1000ms
参考代码:
// 建立你的渐变或者形变 
// 然后在大括号{ }之间设置你的选项 
var morphObject = new Fx.Morph(morphElement, { 
duration: 'long' 
}); 
// 或者这样 
var morphObject = new Fx.Morph(morphElement, { 
duration: 1000 
});

transition(过渡效果)
最后一个选项:transition,可以让你决定过渡类型。例如,它是不是一个平滑的过渡或者它应该先慢慢开始然后加速直到结束。看看这些在MooTools的核心库里可以用的过渡效果:
参考代码:
var tweenObject = new Fx.Tween(tweenElement, { 
transition: 'quad:in' 
});

注意:第一个过渡条在开始时触发了一个红色的醒目效果,在结束时触发了一个橙色的醒目效果。看看下面是怎么使用Fx的事件的。
这上面30个过渡类型可以分成十组:
Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
每一个组都有三个选项:
Ease In
Ease Out
Ease In Out
Fx的事件
Fx的事件使得你在动画效果的执行过程中,在不同的点执行一些代码。在创建用户反馈信息时这会很有用,这也给了你另一层控制权来控制你的渐变和形变:
onStart——当Fx开始时触发
onCancel——当Fx取消时触发
onComplete——当Fx完成时触发
onChainComplete——当Fx链完成时触发
当你建立一个渐变或者形变时,你可以设置这其中的一个事件,就像你设置一个或多个选项一样,不过不是设置一个值,而是设置一个函数:
参考代码:
// 首先我们把一个新的Fx.Tween赋值给一个变量 
// 然后定义我们要渐变的元素 
quadIn = new Fx.Tween(quadIn, { 
// 这里是一些选项 
link: 'cancel', 
transition: ‘quad:in', 
// 这里是一些事件 
onStart: function(passes_tween_element){ 
// 这些事件都会传递渐变的对象 
// 因此当动画开始时 
// 这里我们调用一个"highlight"效果 
passes_tween_element.highlight('#C54641'); 
}, 
// 注意这个逗号是怎样始终出现在每个事件和选项之间的 
// 但是最后一个事件或者选项后面没有 
onComplete: function(passes_tween_element){ 
// 在结束时,我们再应用一个highlight效果 
passes_tween_element.highlight('#C54641'); 
} 
});

示例
为了生成上面的变形代码,我们可以用一种我们在这个系列的教程中还没有见过的方式来重用我们的函数。这上面所有的变形元素都使用了两个函数,一个当鼠标进入时渐变淡出,另外一个在当鼠标离开时渐变返回:
参考代码:
// 这是我们在鼠标进入时调用的函数 
// 宽度渐变到700px 
var enterFunction = function() { 
this.start('width', '700px'); 
} 
// 这是我们在鼠标离开时调用的函数 
// 宽度渐变回300px 
var leaveFunction = function() { 
this.start('width', '300px'); 
} 
window.addEvent('domready', function() { 
// 这里我们把一些元素赋值给变量 
var quadIn = $('quadin'); 
var quadOut = $('quadout'); 
var quadInOut = $('quadinout'); 
// 然后我们创建三个渐变元素 
// 分别对应上面的三个变量 
quadIn = new Fx.Tween(quadIn, { 
link: 'cancel', 
transition: Fx.Transitions.Quad.easeIn, 
onStart: function(passes_tween_element){ 
passes_tween_element.highlight('#C54641'); 
}, 
onComplete: function(passes_tween_element){ 
passes_tween_element.highlight('#E67F0E'); 
} 
}); 
quadOut = new Fx.Tween(quadOut, { 
link: 'cancel', 
transition: 'quad:out' 
}); 
quadInOut = new Fx.Tween(quadInOut, { 
link: 'cancel', 
transition: 'quad:in:out' 
}); 
// 现在我们添加鼠标进入和鼠标离开事件 
// 注意.addEvents的使用 
// 则和.addEvent的使用类似 
// 不过你可以通过下面的模式添加多个事件 
$('quadin').addEvents({ 
// 首先,你要说明是什么事件,并把事件用单引号引起来 
// 然后后面跟一个冒号(:) 
// 最后放置你的函数 
// 在这个例子中,函数banding到这个渐变对象 
'mouseenter': enterFunction.bind(quadIn), 
'mouseleave': leaveFunction.bind(quadIn) 
}); 
$('quadout').addEvents({ 
// 注意我们这里是怎样重复使用这个函数的 
'mouseenter': enterFunction.bind(quadOut), 
'mouseleave': leaveFunction.bind(quadOut) 
}); 
$('quadinout').addEvents({ 
// 我们这里也使用了那些同样的函数 
// 不过每次我们都应用一个事件到不同的元素 
// 并且绑定不同的渐变 
'mouseenter': enterFunction.bind(quadInOut), 
'mouseleave': leaveFunction.bind(quadInOut) 
});

更多学习……

你可以通过Fx库里面的工具来获得对效果更细致的控制权。请一定要阅读一下文档中的Fx这一节,还有tweenmorphtransitions

下载一个包含你开始所需要的东西的zip包

包括这个页面上的实例,MooTools 1.2核心库,一个外部的JavaScript文件,一个外部的CSS文件或者一个简单的html文件。

Javascript 相关文章推荐
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
详解JavaScript树结构
Jan 09 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
JS实现可视化文件上传
Sep 08 Javascript
js实现选项卡效果
Mar 07 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 #Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 #Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 #Javascript
Mootools 1.2教程 事件处理
Sep 15 #Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
You might like
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
详解Python打包分发工具setuptools
2019/08/05 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
如何启动时不需输入用户名与密码
2014/05/09 面试题
护理专业自我鉴定
2014/01/30 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
企业文明单位申报材料
2014/05/16 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2014小学年度工作总结
2014/12/20 职场文书
详解Python requests模块
2021/06/21 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers