用MYJS实现动画效果

出自Manyou开发者指南

描述

MYJS提供了一个强大的动画库，以便开发者用简短的代码改进其用户界面交互。所有运动都基于CSS实现，所以掌握好CSS将有助于你实现这些效果。

MYJS动画库丰富了当前的脚本库，并且使用习惯也是开发者所熟悉的。

看完下面的教程，并且在MYML开发者测试控制台动手试试，会帮助你更好的理解MYJS动画库是如何工作的。

基本动画

CSS样式过渡

示例代码：

第一步通常是调用Animation类的构造方法，以一个对其施加动画效果的DOM对象为参数。然后就可以为其附加任意你想让其过渡到的样式了。比如在这个例子中，我们让背景色变成浅黄色。最后，使用go() 方法执行附加的效果。

也可以这样附加多个样式过渡：

在这个例子中，我们同时变化了文字颜色和背景颜色，它们在同一个过渡中完成了。

方法to() 通常用来从当前的属性值过渡到指定的属性值。当然也可以使用from() 方法覆盖这种默认行为：

当同时使用to() 和 from() 时，可以简写成这样：

另一种直接和CSS交互的方法是by()，它以一定的数量增加当前的属性值：

当你点击这个链接的时候，你会看到它以每次15像素的步长向右移动。

自定义持续时间

默认的动画持续时间是1秒，可以用duration() 方法自己指定，单位是毫秒：

块级对象动画

隐藏和收缩

使用MYJS动画库也可以为块级对象添加效果，比如显示或隐藏页面中的某一部分：

注意div上的style="overflow: hidden"，在这个例子中这是非常重要的。因为动画效果基于CSS，如果我们不指定overflow:hidden，高度将无法正常过渡。使用hide() 方法，会将目标对象的display属性位置为none；而在这个例子中，我们结合使用to() 方法，实现了漂亮的隐藏效果。

预防过渡中的文字换行

对一些块级元素进行尺寸过渡效果时，其中的文字会因为即时适应父元素宽度而不停调整其换行结构，这使得过渡效果不够流畅且不美观，可以使用blind() 方法预防这种情况的发生：

展现

完全展现一个div时，可以将其宽高分别过渡到’auto’，这样其宽高将自动计算，以适应其父元素，比如：

在这个例子中，我们综合使用了很多MYJS动画库特性，将一个初始状态为display:hidden的div平滑展现出来。

高级特性

分步动画

前面的例子中往往是几种效果在一个动画过程中同时发生，而通常我们可能需要几个独立的动画过程顺序完成, 这时就应该使用分步动画：

这样一来动画就分步进行了，高度调整紧跟着宽度调整后进行。只要使用了checkpoint() 方法，可以设置任意多个的分步。

交错分步动画

checkpoint() 方法还提供了一个参数，该参数是一个范围在0到1内的数字，表示后续动画在先前动画完成到百分之几时发生。其默认值是1，所以在前面的例子中我们看到的是等待先前动画完全结束后，后续动画才发生。

本例中，高度调整 to() 动画完成一半(0.5)时，隐藏 hide() 动作才发生。

有callback的分步动画

分步动画方法checkpoint() 的第二个参数是callback，从而可以使其触发其他动画，或进行相关任务：

实际上在这里我们创建了一个嵌套的动画。外层的动画隐藏了一个div，当它完成时，内层的动画显示出另一个div。

擦除

默认的过渡动画是线性的，也就是整个动画过程以一个匀速进行。我们可以使用ease() 方法：

在这里，可以看到动画开始的比较快，而快结束时，速度会减缓。

ease() 方法的几种基本参数有 Animation.ease.begin (缓始快终)，Animation.ease.end (快始缓终) 和Animation.ease.both (缓始缓终 中程加速)。

自定义擦除函数

也可以自定义擦除的行为函数，其参数为当前过渡行为所进行到的百分比，返回值亦然，范围在0到1内。

比如我们可以自定义一个弹跳效果：