javascript svg animation

本文关键字：animation svg javascript 更新时间：2023-09-26

我将如何编写脚本，将移动形状在svg线性与javascript。我想使用requestanimframe。

下面是一个使用canvas的例子。我只是想做同样的事情，除了svg。

脚本获取画布的上下文，然后使用javascript绘制具有上下文属性的形状。然后，它以线性运动管理画布上形状的动画。我只是想使用svg的形状，而不是画布的上下文属性。

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
    <script>
        window.requestAnimFrame = (function(callback){
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback){
                window.setTimeout(callback, 1000 / 60);
            };
        })();
        function animate(lastTime, myRectangle){
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            // update
            var date = new Date();
            var time = date.getTime();
            var timeDiff = time - lastTime;
            var linearSpeed = 100; // pixels / second
            var linearDistEachFrame = linearSpeed * timeDiff / 1000;
            var currentX = myRectangle.x;
            if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
                var newX = currentX + linearDistEachFrame;
                myRectangle.x = newX;
            }
            lastTime = time;
            // clear
            context.clearRect(0, 0, canvas.width, canvas.height);
            // draw
            context.beginPath();
            context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
            context.fillStyle = "#8ED6FF";
            context.fill();
            context.lineWidth = myRectangle.borderWidth;
            context.strokeStyle = "black";
            context.stroke();
            // request new frame
            requestAnimFrame(function(){
                animate(lastTime, myRectangle);
            });
        }
        window.onload = function(){
            var myRectangle = {
                x: 0,
                y: 50,
                width: 100,
                height: 50,
                borderWidth: 5
            };
            var date = new Date();
            var time = date.getTime();
            animate(time, myRectangle);
        };
    </script>
</head>
<body onmousedown="return false;">
    <canvas id="myCanvas" width="578" height="200">
    </canvas>
</body>

用JavaScript在SVG中移动元素的最简单方法可能是修改元素的transform属性。就性能而言，这不是最好的方法，但它非常可读且简单。

最简单:

var el = document.getElementById( "mySVGElement" );
for( var i = 0; i < 100; i++ )
{
  setTimeout( function( ) {
    el.setAttribute( "transform", "translate( " + i + ", 0 )" );
  }, 200 + i );
}

或者如果你想让一个函数来做:

function translateElement( element, distance )
{
  var x, y;
  for( var i = 0; i < 100; i++ )
  {
    setTimeout( function( ) {
      x = parseInt( distance.x * i / 100 );
      y = parseInt( distance.y * i / 100 );
      element.setAttribute( "transform", "translate( " + x + ", " + y + " )" );
    }, 20 + i );
  }
}

或per Erik's advice:

function translateElement( element, distance )
{
  var x, y;
  for( var i = 0; i < 100; i++ )
  {
    setTimeout( function( ) {
      x = distance.x * i / 100;
      y = distance.y * i / 100;
      element.transform.baseVal.getItem( 0 ).setTranslate( x, y );
    }, 20 + i );
  }
}

其中element是你要移动的元素，distance是一个形式为:

的对象

{
  x: xOffset,
  y: yOffset
}