首页 > 代码库 > 旋转的华尔兹

旋转的华尔兹


仿写动画效果:(没达到料想中的效果)




<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            margin: 0px;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id = "S" width="400px" height="400px"></canvas>
    <script type="text/javascript">
        var position =
        {
            _x : null,
            _y : null,

            create : function ( x, y )
            {
                var obj = Object.create( this );

                obj.setX( x );
                obj.setY( y );

                return obj;
            },

            setX : function ( x )
            {
                this._x = x;
            },

            setY : function ( y )
            {
                this._y = y;
            },

            getX : function ()
            {
                return this._x;
            },

            getY : function ()
            {
                return this._y;
            }
        };

        var point =
        {
            _pos : null,

            create : function ( quad_pos, quad_size, angle )
            {
                var obj = Object.create( this );
                var x = quad_pos.getX() + quad_size * Math.cos( angle );
                var y = quad_pos.getY() + quad_size * Math.sin( angle );

                obj.setPos( x, y );

                return obj;
            },

            setPos : function ( x, y )
            {
                this._pos = position.create( x, y );
            },

            getPos : function ()
            {
                return this._pos;
            }
        };

        var quad =
        {
            _size : null,
            _points : null,
            _pos : null,
            _angle : null,

            create : function( quad_size, x, y )
            {
                var obj = Object.create( this );
                var quad_pos = position.create( x, y );

                obj.setSize( quad_size );
                obj.setPos( quad_pos );
                obj.setAngle( 0 );
                obj.setPoints(
                        [
                            point.create( quad_pos, quad_size, 0 ),
                            point.create( quad_pos, quad_size, Math.PI * 0.5 ),
                            point.create( quad_pos, quad_size, Math.PI ),
                            point.create( quad_pos, quad_size, Math.PI * 1.5 )
                        ]
                );

                return obj;
            },

            update : function()
            {
                var quad_pos = this.getPos();
                var len = this._points.length;
                var newAngle = this.getAngle() + deltaAngel;
                var temp_x, temp_y;

                newAngle = ( newAngle > Math.PI * 2 ) ? 0 : newAngle;
                this.setAngle( newAngle );

                for( var i = 0; i < len; ++i )
                {
                    temp_x = Math.cos( newAngle ) * this.getSize() + quad_pos.getX();
                    temp_y = Math.sin( newAngle ) * this.getSize() + quad_pos.getY();
                    //alert( temp_x + temp_y );
                    this._points[i].setPos( temp_x, temp_y );
                    newAngle += Math.PI * 0.5;
                }
            },

            setPoints : function ( points )
            {
                this._points = points;
            },

            getPoints : function ()
            {
                return this._points;
            },

            setSize : function ( quad_size )
            {
                this._size = quad_size;
            },

            getSize : function ()
            {
                return this._size;
            },

            setPos : function ( quad_pos )
            {
                this._pos = quad_pos;
            },

            getPos : function ()
            {
                return this._pos;
            },

            setAngle : function ( angle )
            {
                this._angle = angle;
            },

            getAngle : function ()
            {
                return this._angle;
            }

        };

        function update()
        {
            var quads_len = quads.length;

            for( var i = 0; i < quads_len; ++i )
            {
                quads[i].update();
            }
        }

        function render()
        {
            var quads_len = quads.length;

            context.fillStyle = '#DDDDDD';
            context.strokeStyle = '#5599FF';
            context.globalAlpha = 0.15;
            context.fillRect( 0, 0, canvas.width, canvas.height );
            context.globalAlpha = 1;
            context.fillStyle = '#5599FF';

            for( var i = 0; i < quads_len; ++i )
            {
                var temp_quad = quads[i];
                var temp_quad_points = temp_quad.getPoints();
                var points_len = temp_quad_points.length;

                for( var j = 0; j < points_len; ++j )
                {
                    var from =
                    {
                        x : temp_quad_points[j].getPos().getX(),
                        y : temp_quad_points[j].getPos().getY()
                    };

                    var to = null;

                    if( j + 1 < points_len )
                    {
                        to =
                        {
                            x : temp_quad_points[j + 1].getPos().getX(),
                            y : temp_quad_points[j + 1].getPos().getY()
                        };
                    }
                    else
                    {
                        to =
                        {
                            x : temp_quad_points[0].getPos().getX(),
                            y : temp_quad_points[0].getPos().getY()
                        };
                    }

                    context.beginPath();
                    context.moveTo( from.x, from.y );
                    context.arc( from.x, from.y, 3, 0, Math.PI * 2 );
                    context.lineTo( to.x, to.y );
                    context.arc( to.x, to.y, 3, 0, Math.PI * 2 );
                    context.stroke();
                    context.fill();
                    context.closePath();
                }
            }
        }

        function loop()
        {
            update();
            render();

            requestAnimationFrame( loop );
        }

        function create()
        {
            var length = 32;
            var width = window.innerWidth;
            var height = window.innerHeight;

            for( var i = 0; i < length; ++i )
            {
                var x = width >> 1;
                var y = ( i / length ) * ( height >> 1 ) + ( height >> 2 );
                var size = Math.sin( ( i / length ) * ( Math.PI ) ) * ( width >> 3 );
                quads.push( quad.create( size, x, y ) );
            }
        }

        var quads = [];
        var canvas = document.getElementById( "S" );
        var context = canvas.getContext( "2d" );
        var deltaAngel = Math.PI / 200.0;

        window.onload = function()
        {
            canvas.style.width = window.innerWidth + "px";
            setTimeout(function () {
                canvas.style.height = window.innerHeight + "px";
            }, 0 );

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            create();
            loop();
        }
    </script>
</body>
</html>


旋转的华尔兹