CocoRoboLabs
/
CocoRoboDesktop


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							<!DOCTYPE html>
<html>
<head>
    <title>Animate</title>
    <script src="../dev-lib/sea.js"></script>
    <script>
        seajs.config({
            base: '../src'
        });
        define('start', function(require) {
            var Paper = require('graphic/paper');
            var Path = require('graphic/path');
            require('animate/pathanimator');
            var g = require('graphic/geometry');
            var Matrix = require('graphic/matrix');
            var pathData = g.transformPath('M283.962,257.412 L229.347,253.275 194.977,295.919 182.036,242.699 130.857,223.189 177.473,194.435 180.213,139.733 221.965,175.182 274.837,160.884 254.025,211.547 Z', new Matrix().scale(0.3).translate(400, 0));
            var Group = require('graphic/group');

            require('animate/motionanimator');

            var path1 = new Path().stroke('blue').translate(-300, 0);
            var path2 = new Path().stroke('red', 5).translate(-300, 0);

            var paper = new Paper(document.body).setHeight(800);
            paper.addShapes([path1, path2]);

            var pathData2 = 'M615.992,227.397c0,48.272-43.234,87.405-96.565,87.405  s-96.565-39.132-96.565-87.405c0-22.737,9.631-33.72,25.351-49.267c5.705-5.642-7.917-57.699-0.763-61.832  c5.962-3.445,36.82,36.75,43.511,34.351c40.458-14.504,51.562-2.07,61.069,0.763c11.853,3.532,43.345-29.261,52.672-22.137c7.952,6.074-8.23,44.582-2.784,52.659C610.847,195.18,615.992,210.745,615.992,227.397z';

            var aligned = g.alignCurve(pathData, pathData2);

            path1.setPathData(aligned[0]);

            path1.fxPath(pathData2, 3000, 'easeInOutElastic');

            var t = 0.1;
            function update() {
                t += 0.003;
                var sub = g.subPath(pathData2, t, t - 0.05).concat(g.subPath(pathData2, t + 0.55, t + 0.5));
                path2.setPathData(sub);
                requestAnimationFrame(update);
            }
            update();

            var triangle = new Path().setPathData('M0,-15L15,0,0,15Z').fill('green');

            triangle.motion(path1, 4000, 'linear').timeline().repeat(10000);

            paper.addShape(new Group().addShape(triangle).translate(-300, 0));

            window.g = g;
        });
        seajs.use('start');

    </script>
</head>
<body>
    
</body>
</html>