首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 → 网页制作 → Javascript/Ajax

MooTools教程(10):Fx.Tween渐变

来源： 互联网    日期：2006-5-15
 

今天我们开始第三讲，我们今天主要看一下Fx.Tween。和我们看到的其他的MooTools函数一样，这些方法使用起来都非常简单，但是功能都很强大。Tween可以让你添加那些极“炫”的效果——可以很平滑地发生形变动画，从而改善你的用户体验。

Tween的快捷方法

我们通常都从“基本知识”入手，不过MooTools 1.2只为渐变（tween）提供了这样极其出色的快捷方法，它们使用起来都极其简单以至于我忍不住要从这里开始。

.tween();

一个渐变（tween）是一个在两个样式属性值之间的平滑的变化。举个例子，通过渐变（tween）你可以把div的宽度（width）平滑地由100像素变化为300像素。

参考代码： [复制代码] [保存代码]
  1. // 创建一个新的函数
  2. var tweenerFunction  = function() {
  3.     // 选中你要使用渐变的元素
  4.     // 然后加上.tween
  5.     // 最后声明你要变化到的属性和值
  6.     $('tweener').tween('width', '300px');
  7. }
  8.  
  9. window.addEvent('domready', function() {
  10.     // 在这里给一个按钮添加一个事件
  11.     // 当点击时初始化这个渐变
  12.     // 并调用我们的渐变函数
  13.     $('tween_button').addEvent('click', tweenerFunction);
  14. });

相应于上面的代码，我们的HTML代码看起来大概应该是这样的：

参考代码： [复制代码] [保存代码]
  1. <div id="tweener"></div>
  2. <button id="tween_button">300 width</button>

.fade();

这个方法可以让你平滑地调整一个元素的不透明度（opacity）。这个使用起来和上面的例子几乎一模一样：

参考代码： [复制代码] [保存代码]
  1. // 创建一个新函数
  2. var tweenFadeFifty = function() {
  3.     // 在这里创建你的选择器
  4.     // 然后添加.fade
  5.     // 最后声明一个0到1之间的值（0代表不可见，1代表完全可见）
  6.     $('tweener').fade('.5');
  7. }
  8.  
  9. window.addEvent('domready', function() {
  10.     // 在这里给按钮添加一个事件
  11.     // 点击时初始化这个渐变
  12.     // 并调用我们的渐变函数
  13.     $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
  14. });
参考代码： [复制代码] [保存代码]
  1. <div id="tweener">
  2. <button id="tween_fade_fifty">Fade to fifty percept opacity</button>

.highlight();

醒目（highlight）是一个目标非常明确（也极其有用）的渐变快捷方法，它提供了两个功能：

  • 使用它来平滑变化到一种不同的背景色
  • 直接设置一个不同的背景色，然后平滑变化到另外一个背景色

这些在创建用户反馈时非常有用。例如，你可以在一个东西被选中时让某个元素闪一下，或者你改变一下颜色，然后当它保存或者关闭时再闪一下。这有非常多的选择，而且非常简单易用。在这个例子中，让我们创建两个div，然后分别添加两种类型的醒目（highlight）方法：

参考代码： [复制代码] [保存代码]
  1. // 创建一个函数
  2. var tweenHighlight = function(event) {
  3.     // 这里我们使用了event.target，这是从这个函数中传过来的参数
  4.     // 这个意思是指“触发事件的目标（来源）”
  5.     // 由于这个效果应用到触发事件的元素上面
  6.     // 因此我们不需要再创建选择器
  7.     // 注意：addEvent将会自动把event对象作为参数传入这个调用函数
  8.     // ... 非常方便
  9.     event.target.highlight('#eaea16');
  10. }
  11.  
  12. // 创建一个函数
  13. // 你需要传入一个参数
  14. // 由于这个函数是在一个事件（event）里面被调用的
  15. // 这个函数将会自动传入event对象
  16. // 然后你就可以通过.target来引用这个元素
  17. // （event的目标元素）
  18. var tweenHighlightChange = function(item) {
  19.     // 这里我们不是使用一个颜色，而是添加了一个逗号来分隔第二个
  20.     // 这将设置第一个颜色，然后变化到第二个颜色
  21.     item.target.highlight('#eaea16', '#333333');
  22. }
  23.  
  24. window.addEvent('domready', function() {
  25.     $('tweener').addEvent('mouseover', tweenHighlight);
  26.     $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
  27. });
参考代码： [复制代码] [保存代码]
  1. <div id="tweener"></div>
  2. <div id="tweenerChange"></div>

快捷方法示例

这里是一些效果的快捷方法的在线的示例。你可以按不同顺序点击这些按钮，然后注意一下它们的变化：

参考代码： [复制代码] [保存代码]
  1. var tweenerFunction  = function() {
  2.     $('tweener').tween('width', '300px');
  3. }
  4.  
  5. var tweenerGoBack  = function() {
  6.     $('tweener').tween('width', '100px');
  7. }
  8.  
  9. // .fade 也可以接受'out'和'in'作为参数，相当于0和1
  10. var tweenFadeOut = function() {
  11.     $('tweener').fade('out');
  12. }
  13.  
  14. var tweenFadeFifty = function() {
  15.     $('tweener').fade('.5');
  16. }
  17.  
  18. var tweenFadeIn = function() {
  19.     $('tweener').fade('in');
  20. }
  21.  
  22. var tweenHighlight = function(event) {
  23.     event.target.highlight('#eaea16');
  24. }
  25.  
  26. window.addEvent('domready', function() {
  27.     $('tween_button').addEvent('click', tweenerFunction);
  28.     $('tween_reset').addEvent('click', tweenerGoBack);
  29.     $('tween_fade_out').addEvent('click', tweenFadeOut);
  30.     $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
  31.     $('tween_fade_in').addEvent('click', tweenFadeIn);
  32.     $('tweener').addEvent('mouseover',tweenHighlight);
  33. });
参考代码： [复制代码] [保存代码]
  1. <div id="tweener"></div><br />
  2. <button id="tween_button">300 width</button>
  3. <button id="tween_reset">100 width</button>
  4. <button id="tween_fade_out">Fade Out</button>
  5. <button id="tween_fade_fifty">Fade to 50% opacity</button>
  6. <button id="tween_fade_in">Fade In</button>
参考代码： [复制代码] [保存代码]
  1. #tweener {
  2.     height: 100px
  3.     width: 100px
  4.     background-color: #3399CC
  5. }

把鼠标移上去可以看到第一种类型的醒目效果。

 





 

更多渐变（Tween）

创建一个新的渐变

如果你想更灵活多变和更多地控制你的变化效果，你可能想创建一个新的形变动画来替代那些快捷方式。注意使用“new”来创建一个新的Fx.Tween的实例：

参考代码： [复制代码] [保存代码]
  1. window.addEvent('domready', function() {
  2.     // 首先我们把要变化的元素赋值给一个变量
  3.     var newTweenElement = $('newTween');
  4.  
  5.        // 现在我们创建一个动画事件，然后把这个元素作为参数传入
  6.        var newTween = new Fx.Tween(newTweenElement);
  7. });
参考代码： [复制代码] [保存代码]
  1. <!-- 这个是我们要应用渐变效果的元素 -->
  2. <div id="newTween"></div>
  3.  
  4. <!-- 这个是启动渐变效果的按钮 -->
  5. <button id="netTween_set">Set</div>

通过渐变设置样式

一旦你从一个元素创建了一个新的渐变，你可以轻松地通过.set()方法设置一个样式属性。这个和.setStyle()方法一样。

参考代码： [复制代码] [保存代码]
  1. var newTweenSet = function() {
  2.     // 注意"this"的使用
  3.     // 学习如何使用"this"
  4.     this.set('width', '300px');
  5. }

就像我们以前学习的，我们想要把我们的函数从domready事件中独立出来，但是在这个例子中，我们想要在domready事件中创建一个渐变，然后在外部引用它。我们已经掌握了一种在domready之外传递参数的方法（通过创建一个匿名函数并传递一个参数），今天我们要学习一种Moo化的更好的方式来传递渐变对象（这并不是说匿名函数在任何时候都不再合适）。

.bind();

通过.bind();，我们可以让一个函数里面的“this”等同于参数：

参考代码： [复制代码] [保存代码]
  1. // 首先我们给上面我们看到的那个按钮添加一个点击事件
  2. // 然后，不只是仅仅调用这个函数
  3. // 我们调用这个函数并且添加".bind()"
  4. // 然后我们替换掉任何我们要传递给函数的
  5. // 现在，在这个"newTweenSet"函数内部，"this"将指向"newTween"
  6. $('netTween_set').addEvent('click', newTweenSet.bind(newTween));

因此，现在我们再看看上面的这个函数，“this”现在就等同于“newTween”了（就是我们的tween对象）。

现在我们把这些东西放在一起看看：

参考代码： [复制代码] [保存代码]
  1. // 这里是我们的函数
  2. var newTweenSet = function() {
  3.     // 由于我们使用了bind，现在"this"就指向了"newTween"
  4.     // 因此，这里的相当于是：
  5.     // newTween.set('width', '300px')
  6.     this.set('width', '300px');
  7. }
  8.  
  9. window.addEvent('domready', function() {
  10.     // 首先把我们的元素赋值给一个变量
  11.     var newTweenElement = $('newTween');
  12.  
  13.     // 然后我们new一个FX.Tween，然后赋值给一个变量
  14.     var newTween = new Fx.Tween(newTweenElement);
  15.  
  16.     // 现在添加我们的事件，并绑定newTween和newTweenSet
  17.     $('netTween_set').addEvent('click', newTweenSet.bind(newTween));  
  18. });

启动一个渐变效果

现在，我们已经设置好了我们所有的渐变对象，我们的函数在domready事件之外，我们也学习了如何通过.set();方法设置一个样式表属性，我们来看看实际的渐变。启动一个渐变非常简单，和.fade();非常类似，总共有两种方式来使用.start();方法：

  • 让一个属性值从当前值变化到另外一个值
  • 先设置一个属性值，然后变化到另外一个值
参考代码： [复制代码] [保存代码]
  1. // 这将让宽度（width）从当前已经存在的值变化到300px
  2. newTween.start('width', '300px');
  3.  
  4. // 这将首先设置宽度（width）为100px，然后变化到300px
  5. 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库

更多的MooTools教程(10):Fx.Tween渐变请到论坛查看: http://BBS.TC711.COM


【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源： 互联网    日期：2006-5-15   

发 表 评 论
 查看评论

  您的大名:
  • 尊重网上道德，遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容： 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网，如有侵犯您的版权或其他问题，请通知管理员，我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报