自定义动画
注意：KISSY 会自动判断浏览器是否支持 css3 transition ，如果支持则载入的 anim 模块其实是 anim/transition 模块（KISSY在seed.js里面做了alias），否则载入 anim/timer 模块， node 模块依赖的 anim 也是同样道理。此外，自定义动画等不能用 css3 transition 来实现的动画需要保证使用 anim/timer 模块来实现。
对普通对象使用动画函数
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>kissy anim demo</title>
<style type="text/css">
body{
background: #fff;
}
</style>
</head>
<body>
<button id="start">start</button>
<button id="stop">stop</button>
<canvas id="Canvas" style="border:1px solid #ccc;" width="200" height="200"></canvas>
<script charset="utf-8" src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
<script type="text/javascript">
require(['anim/timer','node'], function (TimerAnim, $) {
var ctx = document.getElementById('Canvas').getContext('2d');
function circle(cx, cy, r, opt) {
ctx.beginPath();
for (var x in opt) {
ctx[x] = opt[x];
}
ctx.arc(cx, cy, r, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
}
circle(100, 100, 5, {
fillStyle: "#999"
});
var o = {r: 1};
var anim = new TimerAnim(o, {
r: 100
}, {
duration: 3,
frame: function (anim, fx) {
circle(100, 100, fx.val);
}
});
$('#start').on('click', function () {
anim.run();
});
$('#stop').on('click', function () {
anim.stop();
});
});
</script>
</body>
</html>
自定义动画机制
Source
Output
QRCode
<!doctype html>
<html>
<head>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
<style type="text/css">
body{
background: #fff;
}
</style>
</head>
<body>
<h1>frame and fx for anim extension</h1>
<div id="t"
style='width:500px;height:50px;
position: absolute;top:200px;left:100px;
background-image: url("http://img03.taobaocdn.com/tps/i3/T1UfsTXotcXXb6hPny-500-190.png");'></div>
<button id="run">run</button>
<script>
require(['node', 'anim/timer'], function($, TimerAnim){
$('#run').on('click', function () {
this.disabled = true;
var t = $('#t');
TimerAnim('#t',{
height:190,
left: {
easing: 'easeOut',
value: 500,
frame: function (anim,fx) {
console.log(fx.pos);
}
},
backgroundPosition: {
easing: 'easeInStrong',
frame: function (anim, fx) {
var pos=fx.pos;
var top = -140 * pos;
var left = -450 * pos;
t[0].style.backgroundPosition = left + 'px ' + top + 'px';
}
}
},{
duration: 5,
easing: 'easeIn'
}).run();
});
})
</script>
</body>
实现自定义动画
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>
Circular movement
</title>
<style type="text/css">
body{
background: #fff;
}
</style>
</head>
<body>
<h1>Circular movement</h1>
<div style="position: absolute;top:-100px;
background-color: red;
border-radius: 50px;
left:-100px;" id="t">
</div>
<div id='t2'
style="position: absolute;
border: 1px solid red;
border-radius: 100px;
">
</div>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
<script>
require(['node','anim/timer'], function ($, TimerAnim) {
var t = $('#t'),
t2 = $('#t2'),
R = 10, R2 = 100, N = 100;
t.css({
width: 2 * R,
height: 2 * R
});
t2.css({
left: N,
top: N,
width: 2 * R2,
height: 2 * R2
});
function filter(f) {
if (Math.abs(f) < 1e-10) {
return 0;
}
return f;
}
function translate(x) {
return x + R2 + N - R;
}
t.css({
left: translate(R2),
top: translate(0)
});
function run() {
new TimerAnim('#t', {
zoom2: {
frame: function (anim, fx) {
t.css('top', translate(filter(Math.sin(fx.pos * 2 * Math.PI)) * R2));
t.css('left', translate(filter(Math.cos(fx.pos * 2 * Math.PI)) * R2))
}
}
}, {
easing: "easingNone",
duration: 5,
complete: run
}).run();
}
run();
});
</script>
</body>
</html>