4.4 创建自定义动画

发表于 更新于 分类于 ， ， Waline： 本文字数： 4.3k 阅读时长 ≈ 4 分钟

4.4 创建自定义动画

除了预置的效果方法外,jQuery还提供了一个强大的.animate()方法,用于创建控制更加精细的自定义动画。

animate方法类型

.animate()方法有两种形式,第一种形式接收以下4个参数。

  1. 一个包含样式属性及值的对象:与本章前面讨论的.css()方法中的参数类似。
  2. 可选的时长参数:既可以是预置的字符串,也可以是毫秒数值。
  3. 可选的缓动(easing)类型:现在我们先不介绍,这是第11章中将要讨论的一个高级选项。
  4. 可选的回调函数:将在本章后面讨论。把这4个参数放到一起,结果如下所示:
    1
    2
    3
    4
    5
    .animate({property1: 'value1', property2: 'value2'},  
    duration, easing, function() { 
        alert('The animation is finished.'); 
      } 
    );

    类型2

    第二种形式接受两个参数,一个属性对象和一个选项对象:
    1
    .animate({properties}, {options})
    实际上,这里的第二个参数是把第一种形式的第2～4个参数封装在了另一个对象中,同时又添加了两个选项。考虑到可读性并调整了换行之后,调用第二种形式的方法的代码如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .animate(
        {
            property1: 'value1',
            property2: 'value2'
        },
        {
            duration: 'value',
            easing: 'value',
            specialEasing: 
            {
                property1: 'easing1',
                property2: 'easing2'
            },
            complete: function () 
            {
                alert('The animation is finished.');
            },
            queue: true,
            step: callback
        }
    );
    现在,我们使用第一种形式的.animate()方法,但在本章后面介绍排队效果时会使用其第二种形式。

    4.4.1 手工创建效果

    现在,我们已经介绍了几个用于显示和隐藏元素的预定义方法。为了讨论.animate()方法,有必要看一看怎么通过这个低级接口来实现与调用.slideToggle()相同的效果。在此,我们把前面例子中调用.slideToggle()方法的代码替换成了自定义动画代码,参见代码清单4-13。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    $(document).ready(function() {
      var $speech = $('div.speech');
      var defaultSize = $speech.css('fontSize');
      $('#switcher button').click(function() {
        var num = parseFloat($speech.css('fontSize'));
        switch (this.id) {
          case 'switcher-large':
            num *= 1.4;
            break;
          case 'switcher-small':
            num /= 1.4;
            break;
          default:
            num = parseFloat(defaultSize);
        }
        $speech.css('fontSize', num + 'px');
      });

      var $firstPara = $('p').eq(1);
      $firstPara.hide();
      $('a.more').click(function(event) {
        event.preventDefault();
        // 自定义动画
        $firstPara.animate({height: 'toggle'}, 'slow');

        var $link = $(this);
        if ($link.text() == 'read more') {
          $link.text('read less');
        } else {
          $link.text('read more');
        }
      });
    });
    通过这个例子可以看出,.animate()方法针对CSS属性提供了方便简写值:'show'、'hide'和'toggle', 以便在简写方法不适用时提供另一种简化.slideToggle()等内置效果方法的方式。

    4.4.2 一次给多个属性添加动画效果

    使用.animate()方法可以同时修改多个CSS属性。例如,要在切换第二个段落时,创建一个同时具有滑动和淡入淡出效果的动画,只需在.animate()方法的属性对象参数中添加一个opacity属性值对即可,参见代码清单4-14。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var $firstPara = $('p').eq(1);
    $firstPara.hide();
    $('a.more').click(function (event) {
        event.preventDefault();
        $firstPara.animate({
            opacity: 'toggle',
            height: 'toggle'
        }, 'slow');
        var $link = $(this);
        if ($link.text() == 'read more') {
            $link.text('read less');
        } else {
            $link.text('read more');
        }
    });
    此外,不仅可以在简写效果方法中使用样式属性,也可以使用其他CSS属性,如:left、top、fontSize、margin、padding和borderWidth。还记得改变演讲段落文本大小的脚本吗?要实现同样的文本大小变化动画,只要把.css()方法替换成.animate()方法即可,参见代码清单4-15。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $(document).ready(function() { 
      var $speech = $('div.speech'); 
      var defaultSize = $speech.css('fontSize'); 
      $('#switcher button').click(function() { 
        var num = parseFloat($speech.css('fontSize')); 
        switch (this.id) { 
          case 'switcher-large': 
            num *= 1.4;       
            break; 
          case 'switcher-small': 
            num /= 1.4; 
            break; 
          default: 
            num = parseFloat(defaultSize);  
        } 
        $speech.animate({fontSize: num + 'px'}, 'slow'); 
      }); 
    });
    再使用其他属性,则可以创造出更复杂的效果。例如,可以在把某个项从页面左侧移动到右侧的同时,让该项的高度增加20像素并使其边框宽度增加到5像素。下面,我们就把这个效果应用于<div id="switcher">盒子。图4-8显示了应用效果之前的画面。
    在可变宽度的布局中,需要计算盒子在与页面右侧对齐之前应该移动的距离。假设段落宽度为100%,可以从段落宽度中减去Text Size盒子的宽度。我们使用jQuery的.outWidth()方法来计算宽度,包括内边距及边框宽度。我们还使用这个方法计算转换器新的left属性。对于这个例子而言,我们打算通过单击按钮上面的Text Size文本来触发动画,参见代码清单4-16。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(document).ready(function() { 
      $('div.label').click(function() { 
        var paraWidth = $('div.speech p').outerWidth(); 
        var $switcher = $(this).parent(); 
        var switcherWidth = $switcher.outerWidth(); 
        $switcher.animate({ 
          borderWidth: '5px', 
          left: paraWidth - switcherWidth, 
          height: '+=20px' 
        }, 'slow'); 
      }); 
    });
    在此,有必要详细解释一下这些动画属性。首先,borderWidth属性很明显,只要给它指定一个常量值加一个单位即可,就像在样式表中一样。其次,left属性是计算的数值。这些属性值的单位后缀是可选的,如果不指定,就会默认以px作为单位。最后,height属性使用我们以前没有遇到过的语法,其中属性值前面的+=操作符表示相对值。在这里表示的意思不是以动画方式变化到20像素,而是在原来基础上再以动画方式变化20像素。因为涉及特殊字符问题,所以必须以字符串形式指定相对值,也就是说必须把值放到一对括号内。