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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
php在线生成ico文件的代码
2007/10/09 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
英语专业推荐信
2013/11/16 职场文书
配件采购员岗位职责
2013/12/03 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
爱情检讨书大全
2014/01/21 职场文书
技校个人求职信范文
2014/01/25 职场文书
消防先进事迹材料
2014/02/10 职场文书
作文评语大全
2014/04/23 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
销售队伍口号
2014/06/11 职场文书
企业宣传稿范文
2015/07/23 职场文书