0

このロゴをアニメーション化したいと思います。必要なのは、線がスムーズに別の位置に移動することだけです。ロゴの 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

4

1 に答える 1

2

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);

より堅牢なソリューションを使用するrequestAnimationFrameと、イージング関数を簡単に追加でき、現在のタブがアクティブでないときにリソースを消費しません。

これがデモです (ベクター編集ソフトウェアで既存の行を削除する必要があります)。 http://jsfiddle.net/6WPEb/

</p>

于 2012-09-18T02:56:31.117 に答える