1

アニメーションでロゴを描画するために、カスタムの found関数を使用して path を描画しています(jquery と Raphael.js を使用)。この「animateLine」関数は、FX を考慮した SVG パスを「ベクター」パスに沿って描画するので便利です。パスが 1 つだけの場合、この機能は問題ありません (デモで確認できます)。

function animateLine (canvas, hoverDivName, colorNumber, pathString, duration, destination)

問題は、その機能を同時に使用すると何らかの競合が発生することです(2 つのパスを同時に描画する)。

このフィドルで私の問題を見ることができます: http://jsfiddle.net/VyRDk/2/

問題は一時変数「 destination 」との競合だと思いましたが、「AnimateLine」関数を呼び出すときに2つの異なるグローバル変数を使用しています（「lepathanimated1」と「lepathanimated2」に気付くでしょう）

var lepathanimated1;
var lepathanimated2;

このように使用されます：

animateLine(logo_animated, "canvas", "#1d1d1b", path_circle,1200,lepathanimated1);

解決策を見つけるのに十分な情報があることを願っています。詳細が必要な場合は、お問い合わせください =)

御時間ありがとうございます

編集： OMG私はちょうど解決策を見つけました!! ＃とても幸せ

関数の外側でパス オブジェクトを作成し、識別子 (# id) を使用して競合を回避しました (jquery animate ステップ関数に使用しました)。

ここで正しいデモを見つけることができます

ただし、それが正しい方法であるとは確信していません（最適化）。「RequestAnimFram」にもかかわらず「animate」を使用するのは正しいですか? 利点は、Raphael と jQuery を連携させることです (JavaScript キャンバスの方が簡単です)。

とにかく、ホッピングが役立ちます=）

PS：それが助けになった場合は、投票してください。

4

1 に答える 1

0

ほら、デモ

setTimeout最初のパスが描画された直後に開始するように調整する必要がありました。

setTimeout(function()
{
    animateLine(logo_animated, "canvas2", "#1d1d1b", 
                path_trait_sup,1200,lepathanimated2);
},1200);

幸運を

于 2013-08-28T23:24:50.347 に答える