MooTools 1.2 中的 Tween 动画效果使用教程
116 浏览量
更新于2024-08-30
收藏 75KB PDF 举报
Mootools 1.2教程 Fx.Tween的使用
Mootools 1.2教程Fx.Tween的使用是一个关于Mootools 1.2中Tween的使用教程，介绍了Tween的基本概念、使用方法和实践示例。
知识点一：Tween的概念
Tween是一个在两个样式属性值之间的平滑变化，可以用来实现各种动画效果，如改变元素的宽度、不透明度等。Tween的使用可以极大地改善用户体验。
知识点二：Tween的快捷方法
Mootools 1.2提供了多种快捷方法来使用Tween，例如.tween()和.fade()等，这些方法使用起来非常简单，功能却非常强大。
知识点三：Tween的使用示例
使用Tween可以实现各种动画效果，例如改变元素的宽度、不透明度等。例如，可以使用.tween()方法将div的宽度从100像素平滑地变化为300像素。
知识点四：Fade的使用
.fade()方法可以让你平滑地调整一个元素的不透明度（opacity），使用起来和.tween()方法类似。
知识点五：Tween的事件绑定
可以使用addEvent()方法将Tween绑定到按钮的点击事件上，当点击按钮时，Tween就会被触发。
知识点六：Tween的选择器
可以使用选择器来选择要使用Tween的元素，例如使用$(‘tweener’)来选择要使用Tween的div元素。
知识点七：Tween的动画效果
Tween可以实现各种动画效果，例如改变元素的宽度、不透明度、颜色等，可以根据需要选择合适的Tween方法来实现想要的动画效果。
知识点八：Tween的实践示例
可以使用Tween来实现各种实践示例，例如改变元素的宽度、不透明度等，可以根据需要选择合适的Tween方法来实现想要的动画效果。
Mootools 1.2教程Fx.Tween的使用是一个非常有用的教程，介绍了Tween的基本概念、使用方法和实践示例，对于想要学习Mootools 1.2的开发者非常有帮助。
Mootools 1.2教程教程 Fx.Tween的使用的使用
和我们看到的其他的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，这是从这个函数中传过来的参数
// 这个意思是指“触发事件的目标（来源）”
// 由于这个效果应用到触发事件的元素上面
下载后可阅读完整内容，剩余3页未读，立即下载
2020-09-05 上传
2010-03-12 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
2010-12-21 上传
2008-12-12 上传
2009-03-27 上传
2008-06-22 上传
weixin_38642285
- 粉丝: 5
- 资源: 947
我的内容管理
展开
