JavaScript的SVG动画 [英] javascript svg animation
问题描述
我怎么会写脚本，将在SVG线性的JavaScript移动形状。我想用requestanimframe。
How would I write script that would move a shape in svg linearly with javascript. I want to use requestanimframe.
下面是用帆布一个例子。我只想做同样的事情，除了与SVG。
Here is an example using canvas. I just want to do the same thing except with svg.
脚本获取上下文到画布上，然后它使用JavaScript来绘制形状与上下文的属性。然后它管理的形状以线性运动在画布上的动画。我只想用SVG的形状，而不是画布上下文属性。
The script obtains a context to the canvas then it uses javascript to draw a shape with the properties of the context. Then it manages the animation of the shape on the canvas in a linear motion. I just want to use svg for the shape instead of the 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>
推荐答案
大概是最容易SVG中使用JavaScript移动元素的方法是修改元素的变换属性。这不是在性能方面的最佳方法，但它是非常可读和简单的
Probably the easiest way to move an element in SVG with JavaScript is to modify the transform attribute of the element. This isn't the best method in terms of performance, but it is very readable and simple.
最简单的：
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 a function to do it:
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 );
}
}
在哪里元素是你移动元素和距离是形式的对象：
Where element is the element you're moving and distance is an object of the form:
{
x: xOffset,
y: yOffset
}
这篇关于JavaScript的SVG动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
