CocoRoboLabs
/
CocoRoboDesktop


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							<!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>