Question

我有动画文字的问题。我试图从左到右移动文本。让文本在中间有一个小的“暂停”，然后再继续动画的其余部分。

然而，我的文字每次在动画之前和之后“跳跃”它向上或向下移动几个px然后再次到达我定义的正确高度：text2.animate（3000，''，3200）。 move（1299,220） - 当然这只是一个例子。

但是开始位置和结束位置都在同一高度。所以我不明白为什么它“跳”。我希望你可以帮我解决这个问题，因为它变得非常烦人。

    var draw = SVG('animation').size(1299, 554)
    var nested = draw.nested()
    var line = draw.line(0, 260, 1299, 260).stroke({ width: 1 })

    var text2 = draw.text("The (jumping) bug")
    text2.move(0,220)

    text2.animate(7000, '', 1000).move(650, 220)
    .after(function moveTextR(){
    text2.animate(3000, '', 3200).move(1299, 220).after(function(){
        text2.animate(1, '', 2300).move(0, 220).after(function(){
            text2.clear()
            var tspan = text2.plain("something pink in the middle")
            text2.move(0,220)
            text2.animate(7000, '', 1000).move(650, 220).after(moveTextR)
        })
    })
})  
text2.font({
      family:   'Helvetica'
    , size:     32
    , anchor:   'start'
    , leading:  '1.5'
    , fill: '#000'
})

我还制作了一个jsfiddle：http://jsfiddle.net/HLA3b/

正如你所看到的那样跳跃虽然在jsfiddle中它只会在开始时跳跃，在safari，chrome和firefox上它会在每次开始新动画时跳转。

希望尽快得到有用的答复。

提前致谢！

Answer 1

这似乎是svg.js 0.x版本的一个错误，我修改了jsfiddle以使用更新的版本并且“跳转”不会发生。

http://jsfiddle.net/HLA3b/2/

由于JSFiddle中的外部资源链接，我添加了一个带有jQuery的onload函数（找不到SVG对象），但除此之外，你的代码运行完美。

$(function() {

    var draw = SVG('animation').size(1299, 554)

(...)

    var text2 = draw.text('The (jumping) bug');
    text2.move(0,220)

    text2.animate(7000, '', 1000).move(650, 220).after(...)
})

我正在使用的版本：1.0.rc3这是我在CDN上找到的最新版本，但目前用于制作的是1.0rc6。

svg中的文本动画“跳跃”

1 个答案: