svg中的文字動畫「跳轉」

我在動畫文本中遇到問題。我正在嘗試從左向右移動文本。讓文本在中間稍稍「停頓」，然後再繼續動畫的其餘部分。svg中的文字動畫「跳轉」

但是，我的文本每次在動畫前後都會「跳躍」，它會向上或向下移動一對像素，然後再次移動到我定義的正確高度：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/

正如你可以看到它跳雖然只在跳開始，在Safari，Chrome和Firefox的的jsfiddle它跳躍每次開始一個新的時間動畫。

希望能儘快得到有幫助的回覆。

提前致謝！

來源

2014-03-28 user3186297

這似乎是一個svg.js 0.x版本的bug，我修改了jsfiddle以使用更新的版本，並且「跳轉」不會發生。

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

由於外部的jsfiddle資源鏈接，我添加了一個onload事件函數使用jQuery（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。

來源

2014-03-28 10:06:49 Roberto

感謝您幫助'出這麼快。我使用的是舊版本的svg.js，並不知道有些更新來了，而且「bug」已經修復。仍然感謝您指出。 – user3186297

很高興幫助。 :-) – Roberto

svg中的文字動畫「跳轉」

回答

相關問題