使用 svg.js 为对象的曲线运动设置动画
Animating a curved motion of an object with svg.js
我想使用 svg.js 为对象的曲线运动(无旋转)制作动画。但是我找不到解决这个问题的简单方法。我写了两个工作正常的小函数,但它不像普通动画那样工作,而且它在后台也不是 运行 完美。
我更喜欢这样的解决方案:
var draw = SVG("drawing").size(500,500);
var rect = draw.rect(50,50);
rect.animate().curvedmove(100,100);
我做的两个函数:
function animateJump(object,start,end,ampl,y,i=0){
var speed = 25;
var pos = 0;
pos = start+i*((end-start)/speed);
object.animate(1).move(pos,y+bounceFunction(start,end,ampl,pos));
if (i <= speed){
animateJump(object,start,end,ampl,y,i+1)
}
}
function bounceFunction(a,b,c,x){
return -1 * (x-a)*(x-b) * c * (4/((a-b)*(b-a)));
}
有什么简单的解决办法吗?
感谢您的帮助!
animate 方法建立一个新的动画上下文,在其中运行您指定的计时器(默认为 1 秒)。所以如果你做 el.animate().move(100,100)
元素将在 1 秒内移动到位置 100,100。
但是,如果您想使用自己的函数,则需要监听 during
事件,它会及时为您提供 0-1 的当前位置。
el.animate().during(function(pos, morphFn, easedPos) {
this.move(pos, bounceFunction(pos))
})
请注意,pos 是一个介于 0 和 1 之间的值,因此直接将其设置为坐标没有多大意义。您需要计算出我们的移动的开始和结束值并自己计算(或使用像 morphFn(start, end)
这样的 morphFn)
示例:
var startX = 100
var endX = 300
var startY = 100
var endY = 300
el.animate().during(function(pos, morphFn, easedPos) {
var x = morphFn(startX, endX)
var y = SVG.morph(bounceFunction(pos))(startY, endY)
this.move(x, y)
})
morphFn
默认绑定到当前位置。因此,如果您有自己的位置(例如在使用自定义弹跳函数时),则需要创建一个新的变形函数,您可以使用 SVG.morph
方法来完成。此方法需要一个位置并返回绑定到此位置的变形函数。
所以这会是一样的:
var x = SVG.Morph(pos)(startX, endX)
var y = SVG.Morph(bounceFunction(pos))(startY, endY)
我想使用 svg.js 为对象的曲线运动(无旋转)制作动画。但是我找不到解决这个问题的简单方法。我写了两个工作正常的小函数,但它不像普通动画那样工作,而且它在后台也不是 运行 完美。
我更喜欢这样的解决方案:
var draw = SVG("drawing").size(500,500);
var rect = draw.rect(50,50);
rect.animate().curvedmove(100,100);
我做的两个函数:
function animateJump(object,start,end,ampl,y,i=0){
var speed = 25;
var pos = 0;
pos = start+i*((end-start)/speed);
object.animate(1).move(pos,y+bounceFunction(start,end,ampl,pos));
if (i <= speed){
animateJump(object,start,end,ampl,y,i+1)
}
}
function bounceFunction(a,b,c,x){
return -1 * (x-a)*(x-b) * c * (4/((a-b)*(b-a)));
}
有什么简单的解决办法吗?
感谢您的帮助!
animate 方法建立一个新的动画上下文,在其中运行您指定的计时器(默认为 1 秒)。所以如果你做 el.animate().move(100,100)
元素将在 1 秒内移动到位置 100,100。
但是,如果您想使用自己的函数,则需要监听 during
事件,它会及时为您提供 0-1 的当前位置。
el.animate().during(function(pos, morphFn, easedPos) {
this.move(pos, bounceFunction(pos))
})
请注意,pos 是一个介于 0 和 1 之间的值,因此直接将其设置为坐标没有多大意义。您需要计算出我们的移动的开始和结束值并自己计算(或使用像 morphFn(start, end)
这样的 morphFn)
示例:
var startX = 100
var endX = 300
var startY = 100
var endY = 300
el.animate().during(function(pos, morphFn, easedPos) {
var x = morphFn(startX, endX)
var y = SVG.morph(bounceFunction(pos))(startY, endY)
this.move(x, y)
})
morphFn
默认绑定到当前位置。因此,如果您有自己的位置(例如在使用自定义弹跳函数时),则需要创建一个新的变形函数,您可以使用 SVG.morph
方法来完成。此方法需要一个位置并返回绑定到此位置的变形函数。
所以这会是一样的:
var x = SVG.Morph(pos)(startX, endX)
var y = SVG.Morph(bounceFunction(pos))(startY, endY)