KISSY基础篇乄KISSY之Anim（1）

KISSY之Anim（1）

今日任务：学习Anim模块的方法.

通过Anim可以生成一个动画实例。动画实例是用来描述动画的一些基本属性，比如，从什么状态动画到什么状态，动画时间，缓动效果，暂停和继续动画等。

一、Anim实例化

通过Anim这样实例化一个动画实例（参照Demo）：

KISSY.use("anim",function(S,Anim){

// 初始化动画实例

var anim = Anim('#anim-el',

// 动画目标样式

{

'background-color':'#fcc',

'border-width':'5px'

// 动画时长，秒

// 动画特效

'bounceOut',

// 动画结束的回调

function(){

alert('动画结束');

});

// 开始执行动画

anim.run();

});

（1）第一种传参格式，这也是完整的传参格式

Anim (elem, props[, duration, easing,completeFn])

各参数含义：

· elem：（String|HTMLElement|Node|window）用于作动画的DOM元素或者窗口，窗口仅支持scrollTop和scrollLeft

· props：JSON 对象，表示动画终止时节点的样式，如果设置为scrollLeft或scrollTop，这时会对元素的滚动属性产生动画

· duration：（Number），动画持续的秒数，默认为1

· easing：（String）缓动效果，也称为“平滑函数”。取值包括：

easeNone、easeIn、easeOut、easeBoth、easeInStrong、easeOutStrong、easeBothStrong、elasticIn、elasticOut、elasticBoth、backIn、backOut、backBoth、bounceIn、bounceOut、bounceBoth

· completeFn：（function），动画结束时的回调

（2）Anim 的第二种用法

Anim (elem, props[, config])

· elem (String|HTMLElement|KISSY.Node|window)– 作用动画的元素节点.

· props (Object) – 动画结束的 dom 样式值

· config (Number) – JSON 对象，动画配置，包括：duration（动画持续事件，Number，单位为妙，默认为1）；easing（string|function，默认easeNone，动画平滑函数）；queue（String|false|undefined，所属队列名称，默认undefined，属于系统内置队列, 设置 false 则表示该动画不排队立即执行）；complete（function，动画结束后的回调）。

二、Anim 动画实例的方法

Anim动画实例上可调用这些方法

isRunning()：判断当前动画对象是否在执行动画过程中

isPaused()：判断当前动画是否被停止

run()：开始当前动画

stop()：结束当前动画

anim.stop(false)

默认为false，终止当前动画，动画会在当前帧直接停止（不触发 complete 回调）。

anim.stop(true)

为 true 时, 动画停止时会立刻跳到最后一帧（触发 complete 回调）。

pause()：在动画实例上调用, 暂停当前动画实例的动画.

resume()：继续当前动画实例的动画.

静态方法 isRunning(elem)：判断elem上是否有动画对象在执行

静态方法 isPaused()：用于判断 elem 上是否有动画对象在暂停，用法同上

静态方法 stop()：停止某元素上的动画（集合）.调用方法。

Anim.stop(elem, end, clearQueue, queueName)：

elem(HTMLElement|window) – 作用动画的元素节点.

end (Boolean) – 此参数同实例方法 stop() 中的 finish 参数.

clearQueue (Boolean) – 默认为 false, 是否清除动画队列中余下的动画.

queueName (String) – 队列名字，不设置此值，表示停止所有队列中的所有动画，设置 queueName 后, 表示停止元素上指定队列中的所有动画，取值包括：

null，表示默认队列的动画

false 表示不排队的动画

string类型表示指定名称的队列的动画

静态方法 pause()：暂停某元素上的动画（集合）.调用方法，其中queueName参数含义同上

Anim.pause(elem, queueName)

静态方法 resume()：继续某元素上的动画，调用方法，其中queueName含义同上

Anim.resume(elem, queueName)

动画实例的事件

complete 事件：动画结束后会触发complete事件

KISSY基础篇乄KISSY之Anim（1）相关推荐

KISSY基础篇乄KISSY之DOM（1）
KISSY之DOM(1) 今日任务:了解学习DOM的基础知识以及学习拆合菜单实例 KISSY的DOM模块的子模块和方法众多,但又很重要,最好的情况是全部熟练掌握,当然一开始学是不可能全部记住DOM的方 ...
KISSY基础篇乄KISSY之HelloWorld
KISSY之HelloWorld 今日任务:使用kissy实现简单的hello World! 一.新建Kissy测试项目打开STS,File->StaticWeb Project,命名其Pro ...
KISSY基础篇乄KISSY之Anim（2）
KISSY之Anim(2) 今日任务:学习Anim动画实例这一节来完成几个动画实例.为了能体现效果,可以先设置一个div,id为anim,该div的样式:背景色,初始的长度和宽度,本节中设.设置长度 ...
KISSY基础篇乄KISSY简介
KISSY简介今日任务:了解学习有关Kissy的一些知识,以便于后续的学习一.相约KISSY,必先了解 KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的 ...
KISSY基础篇乄KISSY之Event
KISSY之Event事件今日任务:了解学习Event事件的基础知识 Event 模块是KISSY最重要的模块之一,他包含自定义事件机制.事件对象封装.DOM事件封装.面向多终端的事件行为统一.下辖 ...
KISSY基础篇乄KISSY之Seed
KISSY之Seed 今日任务:了解Kissy的模块载入机制首先恭喜你已经成功使用kissy想世界打了个招呼,不过这只是刚起步,咱们还有很多地方需要学习.在本节咱们就推开kissy的大门,看看房间里 ...
KISSY基础篇乄KISSY之IO前奏
KISSY之IO前奏今日任务:了解学习IO模块之前必备知识. 在学习Kissy的IO之前,咱们先来了解下ajax,http,json等知识,这些是学习IO模块的必备知识.这里只是给出了一些概念性的介 ...
KISSY基础篇乄KISSY之优化实例
KISSY之优化实例今日任务:拆合菜单代码优化重构这一节我们主要来看一下拆合菜单进行代码优化重构后的效果. 一.测试页面代码 <div id="content"> ...
KISSY基础篇乄KISSY之IO（2）
第14天:KISSY之IO(2) 今日任务:创建Maven Project并学习IO模块. 这一节我们主要来看一下IO模块里的一些方法. 一.Maven Project (1)创建mavenproje ...

KISSY基础篇乄KISSY之Anim（1）

KISSY之Anim（1）

KISSY基础篇乄KISSY之Anim（1）相关推荐

最新文章

热门文章