123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- <!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);
- 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>
|