<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script src="../dist/kity.js"></script>
<script>
window.onload = function () {
var paper = new kity.Paper(document.body);
paper.setViewBox(0, 0, 1200, 600);
// 定义反弹动画器
var bounce = new kity.Animator(0, 400, function(target, y, timeline) {
target.translate(0, timeline.getDelta());
});
// 定义颜色动画器
var colorChanger = new kity.Animator({
beginValue: function(target) {
return target.color;
},
finishValue: function(target) {
return target.color.inc('h', 90)
},
setter: function(target, color) {
target.fill(color);
}
});
// 定义形变函数
function atternuate(e) {
e.target.scale(1 + Math.sign((Math.random() - 0.5)) * Math.random());
}
for(var i = 0; i < 200; i++) {
var color = kity.Color.createHSL(i * 30 % 360, 80, 50);
var copy = new kity.Rect(5, 20, 0, 10).translate( i * 5, 0 );
copy.color = color;
copy.fill(color);
paper.addShape(copy);
bounce.start(copy, 500, 'easeInQuad', Math.random() * 5000).repeat(true, true).on('rollback', atternuate);
colorChanger.start(copy, 500, 'linear').repeat(true, true);
copy.fxTranslate(0, 300, '1s', 'easeInQuad', Math.random() * 5000);
copy.fxTranslate(100, -100, '0.1s', 'easeOutQuad');
copy.fxRotate(1080, '2s', 'linear', 500);
copy.fxScale(.5, .5, '0.8s', 'easeInElastic');
copy.fxTranslate(100, -200, '0.8s', 'easeOutElastic');
copy.fadeOut(300).fadeIn(1000).fadeTo(.5, 100);
}
};
</script>
</head>
<body>
</body>
</html>