<!DOCTYPE html>
<html>
<head>
<title>Easings</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 Matrix = require('graphic/matrix');
var Animator = require('animate/animator');
var easingTable = require('animate/easing');
var YMarker = require('core/class').createClass({
base: Path,
constructor: function( x, w, h ) {
this.callBase();
this.draw( x, w, h );
},
draw: function( x, w, h ) {
var drawer = this.getDrawer();
var hh = h / 2;
drawer.moveTo( x, 0 );
drawer.lineTo( x + hh, hh );
drawer.lineTo( x + w, hh );
drawer.lineTo( x + w, -hh );
drawer.lineTo( x + hh, -hh );
drawer.close();
},
mark: function( y ) {
this.setTransform(new Matrix().translate(0, y));
}
});
var MarkerAnimator = require('core/class').createClass({
base: Animator,
constructor: function( beginValue, finishValue ) {
this.callBase( beginValue, finishValue, function( marker, value ) {
marker.mark( value );
} );
}
});
var EasingGraph = require('core/class').createClass({
base: Paper,
constructor: function( container, easing ) {
this.callBase(container);
this.setViewBox(0, 0, 200, 120);
var x = [0, 150], y = [30, 90];
this.draw( easing, x, y );
this.bind( easing, x, y );
},
draw: function( easing, x, y ) {
this.coordinate = new Group().setAnchor(0, 60).scale(1, -1); // flip over y-alix
this.coordinate.addShape(new Path().pipe(function() {
var d = this.getDrawer();
d.moveTo(x[0], y[0]).lineTo(x[1], y[0]);
d.moveTo(x[0], y[1]).lineTo(x[1], y[1]);
this.fill('none')
this.stroke('#CCC')
}));
this.coordinate.addShape(new Path().pipe(function() {
var d = this.getDrawer();
d.moveTo(x[0], y[0]);
for(var t = x[0]; t <= x[1]; t += 1) {
d.lineTo(t, easing(t, y[0], y[1] - y[0], x[1] - x[0]));
}
this.fill('none');
this.stroke('red');
}));
this.addShape(this.coordinate);
},
bind: function( easing, x, y ) {
var marker = new YMarker( x[1] + 5, 25, 10 );
marker.mark( y[0] );
this.coordinate.addShape( marker );
marker.fill('none');
var animator = new MarkerAnimator( y[0], y[1] );
var timeline = animator.create( marker, 1000, easing );
var animateTimeout;
this.on('mouseover', function() {
marker.fill('red');
timeline.play();
});
this.on('mouseout', function() {
marker.fill('none');
timeline.stop();
timeline.reset();
});
}
});
for(var name in easingTable) {
var div = document.createElement('div');
var graph = new EasingGraph( div, easingTable[name] );
graph.setWidth(200);
graph.setHeight(120);
document.body.appendChild(div);
div.appendChild(document.createTextNode(name));
}
});
seajs.use('start');
</script>
<style>
div {
width: 200px;
height: 150px;
float: left;
color: blue;
}
</style>
</head>
<body>
</body>
</html>