Mootools 1.2教程 Fx.Tween的使用


Posted in Javascript onSeptember 15, 2009

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

// 创建一个新的函数 
var tweenerFunction = function() { 
// 选中你要使用渐变的元素 
// 然后加上.tween 
// 最后声明你要变化到的属性和值 
$('tweener').tween('width', '300px'); 
} 
window.addEvent('domready', function() { 
// 在这里给一个按钮添加一个事件 
// 当点击时初始化这个渐变 
// 并调用我们的渐变函数 
$('tween_button').addEvent('click', tweenerFunction); 
});

相应于上面的代码,我们的HTML代码看起来大概应该是这样的:
参考代码:
<div id="tweener"></div> 
<button id="tween_button">300 width</button>

.fade();
这个方法可以让你平滑地调整一个元素的不透明度(opacity)。这个使用起来和上面的例子几乎一模一样:
参考代码:
// 创建一个新函数 
var tweenFadeFifty = function() { 
// 在这里创建你的选择器 
// 然后添加.fade 
// 最后声明一个0到1之间的值(0代表不可见,1代表完全可见) 
$('tweener').fade('.5'); 
} 
window.addEvent('domready', function() { 
// 在这里给按钮添加一个事件 
// 点击时初始化这个渐变 
// 并调用我们的渐变函数 
$('tween_fade_fifty').addEvent('click', tweenFadeFifty); 
});

参考代码:
<div id="tweener"> 
<button id="tween_fade_fifty">Fade to fifty percept opacity</button>

.highlight();
醒目(highlight)是一个目标非常明确(也极其有用)的渐变快捷方法,它提供了两个功能:
使用它来平滑变化到一种不同的背景色
直接设置一个不同的背景色,然后平滑变化到另外一个背景色
这些在创建用户反馈时非常有用。例如,你可以在一个东西被选中时让某个元素闪一下,或者你改变一下颜色,然后当它保存或者关闭时再闪一下。这有非常多的选择,而且非常简单易用。在这个例子中,让我们创建两个div,然后分别添加两种类型的醒目(highlight)方法:
参考代码:
// 创建一个函数 
var tweenHighlight = function(event) { 
// 这里我们使用了event.target,这是从这个函数中传过来的参数 
// 这个意思是指“触发事件的目标(来源)” 
// 由于这个效果应用到触发事件的元素上面 
// 因此我们不需要再创建选择器 
// 注意:addEvent将会自动把event对象作为参数传入这个调用函数 
// ... 非常方便 
event.target.highlight('#eaea16'); 
} 
// 创建一个函数 
// 你需要传入一个参数 
// 由于这个函数是在一个事件(event)里面被调用的 
// 这个函数将会自动传入event对象 
// 然后你就可以通过.target来引用这个元素 
// (event的目标元素) 
var tweenHighlightChange = function(item) { 
// 这里我们不是使用一个颜色,而是添加了一个逗号来分隔第二个 
// 这将设置第一个颜色,然后变化到第二个颜色 
item.target.highlight('#eaea16', '#333333'); 
} 
window.addEvent('domready', function() { 
$('tweener').addEvent('mouseover', tweenHighlight); 
$('tweenerChange').addEvent('mouseover', tweenHighlightChange); 
});

参考代码:
<div id="tweener"></div> 
<div id="tweenerChange"></div>

快捷方法示例
这里是一些效果的快捷方法的在线的示例。你可以按不同顺序点击这些按钮,然后注意一下它们的变化:
参考代码:
var tweenerFunction = function() { 
$('tweener').tween('width', '300px'); 
} 
var tweenerGoBack = function() { 
$('tweener').tween('width', '100px'); 
} 
// .fade 也可以接受'out'和'in'作为参数,相当于0和1 
var tweenFadeOut = function() { 
$('tweener').fade('out'); 
} 
var tweenFadeFifty = function() { 
$('tweener').fade('.5'); 
} 
var tweenFadeIn = function() { 
$('tweener').fade('in'); 
} 
var tweenHighlight = function(event) { 
event.target.highlight('#eaea16'); 
} 
window.addEvent('domready', function() { 
$('tween_button').addEvent('click', tweenerFunction); 
$('tween_reset').addEvent('click', tweenerGoBack); 
$('tween_fade_out').addEvent('click', tweenFadeOut); 
$('tween_fade_fifty').addEvent('click', tweenFadeFifty); 
$('tween_fade_in').addEvent('click', tweenFadeIn); 
$('tweener').addEvent('mouseover',tweenHighlight); 
});

参考代码:
<div id="tweener"></div><br /> 
<button id="tween_button">300 width</button> 
<button id="tween_reset">100 width</button> 
<button id="tween_fade_out">Fade Out</button> 
<button id="tween_fade_fifty">Fade to 50% opacity</button> 
<button id="tween_fade_in">Fade In</button>

参考代码:
#tweener { 
height: 100px 
width: 100px 
background-color: #3399CC 
}

把鼠标移上去可以看到第一种类型的醒目效果。
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
更多渐变(Tween)
创建一个新的渐变
如果你想更灵活多变和更多地控制你的变化效果,你可能想创建一个新的形变动画来替代那些快捷方式。注意使用“new”来创建一个新的Fx.Tween的实例:
参考代码:
window.addEvent('domready', function() { 
// 首先我们把要变化的元素赋值给一个变量 
var newTweenElement = $('newTween'); 
// 现在我们创建一个动画事件,然后把这个元素作为参数传入 
var newTween = new Fx.Tween(newTweenElement); 
});

参考代码:
<!-- 这个是我们要应用渐变效果的元素 --> 
<div id="newTween"></div> 
<!-- 这个是启动渐变效果的按钮 --> 
<button id="netTween_set">Set</div>

通过渐变设置样式
一旦你从一个元素创建了一个新的渐变,你可以轻松地通过.set()方法设置一个样式属性。这个和.setStyle()方法一样。
参考代码:
var newTweenSet = function() { 
// 注意"this"的使用 
// 学习如何使用"this" 
this.set('width', '300px'); 
}

就像我们以前学习的,我们想要把我们的函数从domready事件中独立出来,但是在这个例子中,我们想要在domready事件中创建一个渐变,然后在外部引用它。我们已经掌握了一种在domready之外传递参数的方法(通过创建一个匿名函数并传递一个参数),今天我们要学习一种Moo化的更好的方式来传递渐变对象(这并不是说匿名函数在任何时候都不再合适)。
.bind();
通过.bind();,我们可以让一个函数里面的“this”等同于参数:
参考代码:
// 首先我们给上面我们看到的那个按钮添加一个点击事件 
// 然后,不只是仅仅调用这个函数 
// 我们调用这个函数并且添加".bind()" 
// 然后我们替换掉任何我们要传递给函数的 
// 现在,在这个"newTweenSet"函数内部,"this"将指向"newTween" 
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

因此,现在我们再看看上面的这个函数,“this”现在就等同于“newTween”了(就是我们的tween对象)。
现在我们把这些东西放在一起看看:
参考代码:
// 这里是我们的函数 
var newTweenSet = function() { 
// 由于我们使用了bind,现在"this"就指向了"newTween" 
// 因此,这里的相当于是: 
// newTween.set('width', '300px') 
this.set('width', '300px'); 
} 
window.addEvent('domready', function() { 
// 首先把我们的元素赋值给一个变量 
var newTweenElement = $('newTween'); 
// 然后我们new一个FX.Tween,然后赋值给一个变量 
var newTween = new Fx.Tween(newTweenElement); 
// 现在添加我们的事件,并绑定newTween和newTweenSet 
$('netTween_set').addEvent('click', newTweenSet.bind(newTween)); 
});

启动一个渐变效果
现在,我们已经设置好了我们所有的渐变对象,我们的函数在domready事件之外,我们也学习了如何通过.set();方法设置一个样式表属性,我们来看看实际的渐变。启动一个渐变非常简单,和.fade();非常类似,总共有两种方式来使用.start();方法:
让一个属性值从当前值变化到另外一个值
先设置一个属性值,然后变化到另外一个值
参考代码:
// 这将让宽度(width)从当前已经存在的值变化到300px 
newTween.start('width', '300px'); 
// 这将首先设置宽度(width)为100px,然后变化到300px 
newTween.start('width', '100px', '300px');

现在,你就可以在一个函数内部通过使用.start();方法来启动这个渐变了,如果你使用了在函数上通过.bind();方法绑定了“newTween”,你可以使用“this”。
以上这些就是到现在为止全部的渐变(tween)了……
尽管如此,关于渐变效果仍然有许多可以讲的。例如,如果你想一次同时“渐变”多个样式表属性,你可以使用.morph();方法。你还可以使用过渡效果库(transition)来改变它们进行过渡。不过这篇教程已经足够长了,因此我们把这些留在以后再讲。

更多学习……

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

包含一个MooTools 1.2的库,上面的例子,一个外部JavaScript文件,一个简单的HTML文件和一个CSS文件。

和以前一样,你最好的资源是MooTools 1.2的文档。

  • 关于.tween();方法的信息
  • 还有,浏览一下.morph();方法和transitions
Javascript 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
js实现拖拽功能
Mar 01 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
You might like
如何用PHP实现插入排序?
2013/04/10 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
高中教师个人工作总结
2015/02/10 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android