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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
js实现弹窗效果
Aug 09 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-fpm的两种进程管理模式详解
2013/06/03 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python heapq使用详解及实例代码
2017/01/25 Python
python正则实现提取电话功能
2018/02/24 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python pandas生成时间列表
2019/06/29 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
keras得到每层的系数方式
2020/06/15 Python
Python如何telnet到网络设备
2021/02/18 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
汽车机修工岗位职责
2014/03/06 职场文书
说明书格式及范文
2014/05/07 职场文书
法人代表证明书
2014/09/18 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫