анимация javascript svg - PullRequest
Новая
       5

анимация javascript svg

4 голосов
/ 03 декабря 2011

Как бы я написал скрипт, который бы перемещал фигуру в 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>

1 Ответ

3 голосов
/ 04 декабря 2011

Вероятно, самый простой способ переместить элемент в SVG с помощью JavaScript - это изменить атрибут 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 );
  }
}

или по совету Эрика: 

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 );
  }
}

Где элемент - это элемент, который вы перемещаете, а расстояние - объект формы: 

{
  x: xOffset,
  y: yOffset
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...