127 рядки
4.6 KiB
127 рядки
4.6 KiB
<!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>
|