0%

4.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像素。因为涉及特殊字符问题,所以必须以字符串形式指定相对值,也就是说必须把值放到一对括号内。

原文链接: 4.4 创建自定义动画