动画队列示例
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo - 动画队列支持</title>
<link href="//g.alicdn.com/kissy/k/5.0.1/css/base.css" rel="stylesheet"/>
<link href="./assets/custombutton.css" rel="stylesheet"/>
<style>
body{
background: #fff;
}
.playground {
position: relative;
width: 300px;
height: 300px;
margin: 20px;
border: 5px dashed #AABBCC;
}
.anim {
position: absolute;
width: 32px;
height: 32px;
}
.right {
background: transparent url(assets/right.png) no-repeat center center;
}
.left {
background: transparent url(assets/left.png) no-repeat center center;
}
.up {
background: transparent url(assets/up.png) no-repeat center center;
}
.down {
background: transparent url(assets/down.png) no-repeat center center;
}
</style><script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<div class="playground">
<div class="anim" id="animObj"></div>
</div>
<script>
// prefetch
window.image1=new Image();
window.image1.src="assets/right.png";
window.image2=new Image();
window.image2.src="assets/left.png";
window.image3=new Image();
window.image3.src="assets/up.png";
window.image4=new Image();
window.image4.src="assets/down.png";
</script>
<script type="text/javascript">
require(['anim','node','button'],function(Anim,Node,Button){
var $ = Node.all;
// 创建几个状态的按钮
var start = new Button({
content: "开始"
}), endCurrent = new Button({
content: "停止当前动画并继续下一个动画"
}), endCurrentNext = new Button({
content: "停止当前动画到终态并继续下一个动画"
}), endCurrentNextStop = new Button({
content: "停止当前动画并停止所有动画"
}), endAll = new Button({
content: "停止当前动画到终态后停止所有动画"
});
start.render();endCurrent.render();endCurrentNext.render();endCurrentNextStop.render();endAll.render();
// 动画对象
var obj = $("#animObj"),container = obj.parent(),
objWidth = obj.outerWidth(), containerWidth = container.outerWidth(),
objHeight = obj.outerHeight(), containerHeight = container.outerHeight(),
containerOffset = {left: parseInt(container.css('left')), top: parseInt(container.css('top'))},
adjustCls = function() {
obj.removeClass(cls[clsIdx]);
obj.addClass(cls[++clsIdx]);
if (clsIdx % 4 === 0) {
start.set("disabled", false);
clsIdx = 0;
obj.addClass(cls[clsIdx]);
}
},
commonCfg = {
duration: 3,
queue: "my",
complete: adjustCls
},
cls = ['right', 'down', 'left', 'up'],
clsIdx = 0;
// 设置初始状态
obj.css({
left: containerOffset.left - objWidth/2,
top: containerOffset.top - objHeight/2
}).addClass(cls[clsIdx]);
// 事件绑定
start.on("click", function() {
start.set("disabled", true);
// 向右
obj.animate({
left: containerOffset.left + containerWidth - objWidth/2
}, commonCfg).
// 向下
animate({
top: containerOffset.top + containerHeight - objHeight/2
}, commonCfg).
// 向左
animate({
left: containerOffset.left - objWidth/2
}, commonCfg).
// 向上
animate({
top: containerOffset.top - objHeight/2
}, commonCfg)
});
endCurrent.on("click", function() {
adjustCls();
obj.stop(); // 0, 0
});
endCurrentNext.on("click", function() {
obj.stop(1); // 1, 0
});
endCurrentNextStop.on("click", function() {
obj.stop(0, 1); // 0, 1
});
endAll.on("click", function() {
obj.stop(1, 1); // 1, 1
});
});
</script>
</body>
</html>