原文来自:http://developer.yahoo.com/yui/animation/

Animation YUI的动画封装类

YUI的动画模块使开发者能快速的实现形状大小,颜色,透明度等其他视觉上的动画效果。改模块能在目前A级浏览器上正常使用。所以具有跨平台性。(这里插个广告:整个YUI实现,基本上完全是跨浏览器,不存在兼容问题。嘿嘿。大奶项目中几乎所有的动画效果都是用YUI Animation实现的,给我节省了大量开发时间,并且做出了非常出色的动画效果。) 简单的配置,易懂的语法却能实现复杂的动画效果。

要使用YUI Animation需要引入的外部JAVASCRIPT:

1.http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js

2.http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js

 具体的配置情况可以查看:http://developer.yahoo.com/yui/articles/hosting/#configure

您的动画实施将包括Anim对象或它的子类的一个或更多事例。

使用以下代码在你的页面中创建一个动画

11.jpg

创建动画类有一个必要的参数:动画效果应用的DOM对象的ID或者DOM对象本身。

还有其他几个参数:

· 动画类的实际属性(表达该动画的实际意思)

· 动画的播放速率(默认是1)

· 动画的缓冲效果方法(默认效果是YAHOO.util.Easing.easeNone,没有任何缓冲效果)

本文接下的文章将探索任意参数的意义和应用。

 初始化刚才创建的动画的方法,并赋予生命,开始执行:

2.jpg

————————————————————————————

以上是一个简单动画实现效果:把一个ID为‘test’的DOM对象的宽度变化到400px,播放速率为1,使用easeOut(超出预订大小后再返回预订大小的效果)缓冲方式。

上面的那个动画创建也可以分解成4个步骤来实现:

3.jpg

1:给ID为‘test’的DOM对象创建一个动画实例

2:设置动画属性,宽度变化到400像素

3:播放数率为0.5(越小越快)

4:给动画实例设置缓冲效果

动画类的API文档:http://developer.yahoo.com/yui/docs/module_animation.html

—————————————————————————————

应用YUI动画类

以下这部分内容进一步的来描述如何使用动画类。这里包含以下几个部分:

· 动画属性的使用

· 使用相对值

· 设置动画初始值

· 指定属性的单位

· 侦听事件

· 用Motion类来创建动画

· 用Motion类来创建一个沿着曲线运行的动画

· 用Scroll类来创建动画

1.动画属性的使用

  这部分内容是控制动画运行的核心,控制了动画改如何去运行,他告诉动画事例怎样赋予生命.可以控制的属性有:宽度,高度,透明度,位置,边框宽度,padding,margin等属性。以width为例,指定宽度“to”或“by”的值。默认情况下,动画类会尝试从当前的对象中回去初始值。

            41.jpg

解析这段动画属性的意思:把当前DOM对象的宽度变化到400像素,高度变化到400像素,(2个属性的变化是同步运行的)。

2.使用相对值

    51.jpg

解析这段动画属性的意思:在DOM对象当前的宽度和高度的前提下各增加200像素。

3.设置动画初始值

  61.jpg

解析这段动画属性的意思:DOM对象的宽度由10像素,高度由10像素开始,各增加200像素。

4.指定属性的单位

  71.jpg

解析这段动画属性的意思:DOM对象的宽度,高度由1em变化到20em(默认单位是像素px)

5.侦听事件

  81.jpg

解析这段动画属性的意思:DOM对象的高度由当前值变化到10像素,并在动画运行结束的时候侦听一个事件,这个事件触发删除DOM对象自己本身。。

补充:这个还没可以对动画开始,动画运行中侦听你想要的事件。

6.色彩的动画效果

YAHOO.util.ColorAnim 这个类继承了基本的动画类,并且实现了背景颜色,边框颜色,字体颜色的变化效果的动画。

  94.jpg

解析这段动画属性的意思:把当前DOM对象的背景颜色有当前的背景颜色逐渐变化到‘#dcdcdc’这个颜色。

7.用Motion类来创建动画

YAHOO.util.Motion 这个类继承了YAHOO.util.ColorAnim,可以实现更加复杂的动画效果,比如点到点移动到动画效果。

  102.jpg

解析这段动画属性的意思:把当前DOM对象的位置移动到坐标为400,400的点的位置。

8.用Motion类来创建一个沿着曲线运行的动画

YAHOO.util.Motion可以实现复杂的曲线运动,一条曲线可以定义一个或则多个的控制点,控制点越多,曲线运动越复杂。曲线控制点用‘control’来定义。

  112.jpg

解析这段动画属性的意思:把当前DOM对象的位置移动到坐标为400,400的点的位置,并且在坐标800,300,和坐标-200,400的位置做了曲线控制点,动画控制类会根据DOM的初始坐标,(800.300),(-200,400),(400,400)计算出一条平滑的曲线,DOM对象会沿着这条看不到的曲线移动,最后到达(400,400)目的地,这个已经是一个比较复杂的动画了。

9.用Scroll类来创建动画

YAHOO.util.Scroll 和YAHOO.util.Motion一样,继承了YAHOO.util.ColorAnim,他是可以控制滚动条的动画效果。

Category: 前端

Leave a Reply

Your email address will not be published. Required fields are marked *