爲此徽標設置動畫效果

我想爲此徽標設置動畫效果。所有需要發生的事情都是讓線路順利移動到不同的位置。我有一個標誌的SVG版本。最簡單的方法是什麼？單獨編輯每一幀，然後將它們製作成動畫GIF花費的時間太長，會使動畫波濤洶涌，而且加載太大。爲此徽標設置動畫效果

我不想使用Flash等已棄用的技術。

這樣做的最好方法是什麼？

這是我想實現的未完成版本; http://heuvel-folie-serres.com/v2/img/logo_moving.gif

PNG; http://heuvel-folie-serres.com/v2/img/logo.png
SVG; http://heuvel-folie-serres.com/v2/img/logo.svg

來源

2012-09-15 RobinJ

您可以嘗試車頂杆（？）用JavaScript隔離SVG路徑內，它們的動畫：http://srufaculty.sru.edu/david.dailey/svg/#JSAnim – Gregor

@Gregor我不擅長編輯矢量圖像。 – RobinJ

有沒有簡單的方法，你可以動畫你的SVG，因爲它是。這是一個複合路徑，找到合適的節點不僅麻煩而且昂貴。

您需要修改原來的SVG刪除你的意圖的動畫，那麼你可以添加行如行...

<line x1="23" y1="32" x2="40" y2="32" class="animated" /> 
<line x1="93" y1="32" x2="75" y2="32" class="animated" /> 
<line x1="125" y1="32" x2="143" y2="32" class="animated" /> 
<line x1="195" y1="32" x2="177" y2="32" class="animated" />

您可以用SMIL動畫可惜IE9不支持，所以這裏是一個非常幼稚的實現動畫的：

var lines = document.getElementsByClassName('animated'); 
var y = parseInt(lines[0].getAttribute("y2")); 
var increment = .1; 
var moveLines = function(){ 

    if (y < 32) increment = .1 
    if (y > 41.5) increment = -.1 
    y+=increment; 
    lines[0].setAttribute('y1', y) 
    lines[1].setAttribute('y1', y) 
    lines[2].setAttribute('y1', y) 
    lines[3].setAttribute('y1', y) 
} 

var t = window.setInterval(moveLines, 30);

一個更強大的解決方案將使用這使得它易於添加緩和功能，在當前選項卡未激活不消耗資源。

這是一個演示（您必須刪除矢量編輯軟件中的現有線）。 http://jsfiddle.net/6WPEb/

來源

2012-09-18 02:56:31 Duopixel

這看起來不錯！我會試一試。 – RobinJ

爲此徽標設置動畫效果

回答

相關問題