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 相关文章推荐
Ext JS添加子组件的误区探讨
Jun 28 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
js表头排序实现方法
Jan 16 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
js实现3D图片展示效果
Mar 09 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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+java实现自动新闻滚动窗口
2006/10/09 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php实现可运算的验证码
2015/11/10 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
js计算文本框输入的字符数
2015/10/23 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
深入分析jQuery.one() 函数
2020/06/03 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
使用Python更换外网IP的方法
2018/07/09 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Python 如何查找特定类型文件
2020/08/17 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
畜牧兽医本科生的自我评价
2014/03/03 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
金秋助学感谢信
2015/01/21 职场文书
施工安全员岗位职责
2015/04/11 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
经营场所证明范本
2015/06/19 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL