76 行
2.8 KiB
76 行
2.8 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 Group = require('graphic/group');
|
|
var Path = require('graphic/path');
|
|
var Color = require('graphic/color');
|
|
var Text = require('graphic/text');
|
|
var Draggable = require('../demo/public/draggable');
|
|
var Animator = require('animate/animator');
|
|
var Matrix = require('graphic/matrix');
|
|
var Circle = require('graphic/circle');
|
|
var Rect = require('graphic/rect');
|
|
var Use = require('graphic/use');
|
|
require('animate/translateanimator');
|
|
require('animate/rotateanimator');
|
|
require('animate/scaleanimator');
|
|
require('animate/opacityanimator');
|
|
|
|
require('core/class').extendClass(Paper, Draggable);
|
|
|
|
var paper = new Paper(document.body);
|
|
paper.setViewBox(0, 0, 1200, 600).drag();
|
|
|
|
var bounce = new Animator(0, 400, function(target, y, timeline) {
|
|
target.translate(0, timeline.getDelta());
|
|
});
|
|
var colorChanger = new 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(0.6 + Math.random() * 0.6, e.target.getCenterX(), e.target.getCenterY());
|
|
}
|
|
//paper.addResource(rect);
|
|
for(var i = 0; i < 200; i++) {
|
|
var color = Color.createHSL(i * 30 % 360, 80, 50);
|
|
var copy = new 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);
|
|
}
|
|
});
|
|
seajs.use('start');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|