59 lines
2.3 KiB
59 lines
2.3 KiB
<!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>
|