旋转的华尔兹

最新推荐文章于 2024-11-06 07:02:59 发布
原创最新推荐文章于 2024-11-06 07:02:59 发布 · 1.3k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#javascript
[JavaScript] 专栏收录该内容
7 篇文章
订阅专栏
仿写的动画效果，没有达到原作者的效果，缺少曲线美，猛然间发现，初中数学函数没学好。。。
<!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 = '#352B4E';
        context.strokeStyle = '#33C1B5';
        context.globalAlpha = 0.15;
        context.fillRect( 0, 0, canvas.width, canvas.height );
        context.globalAlpha = 1;
        context.fillStyle = '#FAFFD9';

        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>