国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發(fā) > 綜合 > 正文

MooTools教程(10):Fx.Tween漸變

2024-07-21 02:04:24
字體：大 中 小
供稿：網(wǎng)友

今天我們開始第三講，我們今天主要看一下fx.tween。和我們看到的其他的mootools函數(shù)一樣，這些方法使用起來都非常簡單，但是功能都很強大。tween可以讓你添加那些極“炫”的效果——可以很平滑地發(fā)生形變動畫，從而改善你的用戶體驗。

tween的快捷方法

我們通常都從“基本知識”入手，不過mootools 1.2只為漸變（tween）提供了這樣極其出色的快捷方法，它們使用起來都極其簡單以至于我忍不住要從這里開始。

.tween();

一個漸變（tween）是一個在兩個樣式屬性值之間的平滑的變化。舉個例子，通過漸變（tween）你可以把div的寬度（width）平滑地由100像素變化為300像素。

參考代碼： [復(fù)制代碼] [保存代碼]
  1. // 創(chuàng)建一個新的函數(shù)
  2. var tweenerfunction  = function() {
  3.     // 選中你要使用漸變的元素
  4.     // 然后加上.tween
  5.     // 最后聲明你要變化到的屬性和值
  6.     $('tweener').tween('width', '300px');
  7. }
  8.  
  9. window.addevent('domready', function() {
  10.     // 在這里給一個按鈕添加一個事件
  11.     // 當點擊時初始化這個漸變
  12.     // 并調(diào)用我們的漸變函數(shù)
  13.     $('tween_button').addevent('click', tweenerfunction);
  14. });

相應(yīng)于上面的代碼，我們的html代碼看起來大概應(yīng)該是這樣的：

參考代碼： [復(fù)制代碼] [保存代碼]
  1. <div id="tweener"></div>
  2. <button id="tween_button">300 width</button>

.fade();

這個方法可以讓你平滑地調(diào)整一個元素的不透明度（opacity）。這個使用起來和上面的例子幾乎一模一樣：

參考代碼： [復(fù)制代碼] [保存代碼]
  1. // 創(chuàng)建一個新函數(shù)
  2. var tweenfadefifty = function() {
  3.     // 在這里創(chuàng)建你的選擇器
  4.     // 然后添加.fade
  5.     // 最后聲明一個0到1之間的值（0代表不可見，1代表完全可見）
  6.     $('tweener').fade('.5');
  7. }
  8.  
  9. window.addevent('domready', function() {
  10.     // 在這里給按鈕添加一個事件
  11.     // 點擊時初始化這個漸變
  12.     // 并調(diào)用我們的漸變函數(shù)
  13.     $('tween_fade_fifty').addevent('click', tweenfadefifty);
  14. });
參考代碼： [復(fù)制代碼] [保存代碼]
  1. <div id="tweener">
  2. <button id="tween_fade_fifty">fade to fifty percept opacity</button>

.highlight();

醒目（highlight）是一個目標非常明確（也極其有用）的漸變快捷方法，它提供了兩個功能：

  • 使用它來平滑變化到一種不同的背景色
  • 直接設(shè)置一個不同的背景色，然后平滑變化到另外一個背景色

這些在創(chuàng)建用戶反饋時非常有用。例如，你可以在一個東西被選中時讓某個元素閃一下，或者你改變一下顏色，然后當它保存或者關(guān)閉時再閃一下。這有非常多的選擇，而且非常簡單易用。在這個例子中，讓我們創(chuàng)建兩個div，然后分別添加兩種類型的醒目（highlight）方法：

參考代碼： [復(fù)制代碼] [保存代碼]
  1. // 創(chuàng)建一個函數(shù)
  2. var tweenhighlight = function(event) {
  3.     // 這里我們使用了event.target，這是從這個函數(shù)中傳過來的參數(shù)
  4.     // 這個意思是指“觸發(fā)事件的目標（來源）”
  5.     // 由于這個效果應(yīng)用到觸發(fā)事件的元素上面
  6.     // 因此我們不需要再創(chuàng)建選擇器
  7.     // 注意：addevent將會自動把event對象作為參數(shù)傳入這個調(diào)用函數(shù)
  8.     // ... 非常方便
  9.     event.target.highlight('#eaea16');
  10. }
  11.  
  12. // 創(chuàng)建一個函數(shù)
  13. // 你需要傳入一個參數(shù)
  14. // 由于這個函數(shù)是在一個事件（event）里面被調(diào)用的
  15. // 這個函數(shù)將會自動傳入event對象
  16. // 然后你就可以通過.target來引用這個元素
  17. // （event的目標元素）
  18. var tweenhighlightchange = function(item) {
  19.     // 這里我們不是使用一個顏色，而是添加了一個逗號來分隔第二個
  20.     // 這將設(shè)置第一個顏色，然后變化到第二個顏色
  21.     item.target.highlight('#eaea16', '#333333');
  22. }
  23.  
  24. window.addevent('domready', function() {
  25.     $('tweener').addevent('mouseover', tweenhighlight);
  26.     $('tweenerchange').addevent('mouseover', tweenhighlightchange);
  27. });
參考代碼： [復(fù)制代碼] [保存代碼]
  1. <div id="tweener"></div>
  2. <div id="tweenerchange"></div>

快捷方法示例

這里是一些效果的快捷方法的在線的示例。你可以按不同順序點擊這些按鈕，然后注意一下它們的變化：

參考代碼： [復(fù)制代碼] [保存代碼]
  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'作為參數(shù)，相當于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. });
參考代碼： [復(fù)制代碼] [保存代碼]
  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>
參考代碼： [復(fù)制代碼] [保存代碼]
  1. #tweener {
  2.     height: 100px
  3.     width: 100px
  4.     background-color: #3399cc
  5. }

把鼠標移上去可以看到第一種類型的醒目效果。

 





 

更多漸變（tween）

創(chuàng)建一個新的漸變

如果你想更靈活多變和更多地控制你的變化效果，你可能想創(chuàng)建一個新的形變動畫來替代那些快捷方式。注意使用“new”來創(chuàng)建一個新的fx.tween的實例：

參考代碼： [復(fù)制代碼] [保存代碼]
  1. window.addevent('domready', function() {
  2.     // 首先我們把要變化的元素賦值給一個變量
  3.     var newtweenelement = $('newtween');
  4.  
  5.        // 現(xiàn)在我們創(chuàng)建一個動畫事件，然后把這個元素作為參數(shù)傳入
  6.        var newtween = new fx.tween(newtweenelement);
  7. });
參考代碼： [復(fù)制代碼] [保存代碼]
  1. <!-- 這個是我們要應(yīng)用漸變效果的元素 -->
  2. <div id="newtween"></div>
  3.  
  4. <!-- 這個是啟動漸變效果的按鈕 -->
  5. <button id="nettween_set">set</div>

通過漸變設(shè)置樣式

一旦你從一個元素創(chuàng)建了一個新的漸變，你可以輕松地通過.set()方法設(shè)置一個樣式屬性。這個和.setstyle()方法一樣。

參考代碼： [復(fù)制代碼] [保存代碼]
  1. var newtweenset = function() {
  2.     // 注意"this"的使用
  3.     // 學(xué)習(xí)如何使用"this"
  4.     this.set('width', '300px');
  5. }

就像我們以前學(xué)習(xí)的，我們想要把我們的函數(shù)從domready事件中獨立出來，但是在這個例子中，我們想要在domready事件中創(chuàng)建一個漸變，然后在外部引用它。我們已經(jīng)掌握了一種在domready之外傳遞參數(shù)的方法（通過創(chuàng)建一個匿名函數(shù)并傳遞一個參數(shù)），今天我們要學(xué)習(xí)一種moo化的更好的方式來傳遞漸變對象（這并不是說匿名函數(shù)在任何時候都不再合適）。

.bind();

通過.bind();，我們可以讓一個函數(shù)里面的“this”等同于參數(shù)：

參考代碼： [復(fù)制代碼] [保存代碼]
  1. // 首先我們給上面我們看到的那個按鈕添加一個點擊事件
  2. // 然后，不只是僅僅調(diào)用這個函數(shù)
  3. // 我們調(diào)用這個函數(shù)并且添加".bind()"
  4. // 然后我們替換掉任何我們要傳遞給函數(shù)的
  5. // 現(xiàn)在，在這個"newtweenset"函數(shù)內(nèi)部，"this"將指向"newtween"
  6. $('nettween_set').addevent('click', newtweenset.bind(newtween));

因此，現(xiàn)在我們再看看上面的這個函數(shù)，“this”現(xiàn)在就等同于“newtween”了（就是我們的tween對象）。

現(xiàn)在我們把這些東西放在一起看看：

參考代碼： [復(fù)制代碼] [保存代碼]
  1. // 這里是我們的函數(shù)
  2. var newtweenset = function() {
  3.     // 由于我們使用了bind，現(xiàn)在"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.     // 現(xiàn)在添加我們的事件，并綁定newtween和newtweenset
  17.     $('nettween_set').addevent('click', newtweenset.bind(newtween));  
  18. });

啟動一個漸變效果

現(xiàn)在，我們已經(jīng)設(shè)置好了我們所有的漸變對象，我們的函數(shù)在domready事件之外，我們也學(xué)習(xí)了如何通過.set();方法設(shè)置一個樣式表屬性，我們來看看實際的漸變。啟動一個漸變非常簡單，和.fade();非常類似，總共有兩種方式來使用.start();方法：

  • 讓一個屬性值從當前值變化到另外一個值
  • 先設(shè)置一個屬性值，然后變化到另外一個值
參考代碼： [復(fù)制代碼] [保存代碼]
  1. // 這將讓寬度（width）從當前已經(jīng)存在的值變化到300px
  2. newtween.start('width', '300px');
  3.  
  4. // 這將首先設(shè)置寬度（width）為100px，然后變化到300px
  5. newtween.start('width', '100px', '300px');

現(xiàn)在，你就可以在一個函數(shù)內(nèi)部通過使用.start();方法來啟動這個漸變了，如果你使用了在函數(shù)上通過.bind();方法綁定了“newtween”，你可以使用“this”。

以上這些就是到現(xiàn)在為止全部的漸變（tween）了……

盡管如此，關(guān)于漸變效果仍然有許多可以講的。例如，如果你想一次同時“漸變”多個樣式表屬性，你可以使用.morph();方法。你還可以使用過渡效果庫（transition）來改變它們進行過渡。不過這篇教程已經(jīng)足夠長了，因此我們把這些留在以后再講。

更多學(xué)習(xí)……

下載一個包含你開始所需要的東西的zip包

包含一個mootools 1.2的庫，上面的例子，一個外部javascript文件，一個簡單的html文件和一個css文件。

和以前一樣，你最好的資源是mootools 1.2的文檔。

  • 關(guān)于.tween();方法的信息
  • 還有，瀏覽一下.morph();方法和transitions庫

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板： 泸溪县| 遂平县| 九寨沟县| 分宜县| 略阳县| 宜良县| 清徐县| 四川省| 察隅县| 腾冲县| 桃江县| 罗源县| 务川| 临西县| 广德县| 桃源县| 荥经县| 买车| 阿坝| 平谷区| 冀州市| 杭锦后旗| 壶关县| 津南区| 万源市| 团风县| 奉化市| 青河县| 古浪县| 昌乐县| 黄平县| 卢龙县| 怀来县| 民权县| 景泰县| 穆棱市| 建德市| 新泰市| 平阴县| 苏尼特左旗| 湘乡市|