All geek questions in one place

Javascript svg animation

How will I write a script that will move a shape in svg linearly using javascript. I want to use requestanimframe.

Here is an example of using canvas. I just want to do the same except svg.

The script gets the context for the canvas, then it uses javascript to draw the shape with context properties. He then controls the animation of the shape on the canvas with linear motion. I just want to use svg for the form instead of canvas context properties.

<!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>

+4
source share
1 answer

Probably the easiest way to move an element in SVG using JavaScript is to change the element's transform attribute. This is not the best method in terms of performance, but it is very readable and simple.

The easiest way:

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

Or if you want the function to do this:

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

or on Eric'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 ); } }

Where the element is the element you are moving, and the distance is the shape object:

 { x: xOffset, y: yOffset }
+3
source

Source: https://habr.com/ru/post/1384444/

More articles:


All Articles