特定の日付に基づいてSVGアニメーションを開始する

Question

アポロ8の飛行経路を月にリアルタイムで描くために数日間続くアニメーションを作成したいと思う。

はのアニメーションは、6月10日に始まり、6月16日

に終了し、ユーザーは宇宙船の進行状況を表示するために6月13日にサイトを入力した場合、私は途中でアニメーションを読み込むことができます方法はありましょうか？ここで

は私のSVGアニメーションは、これまで

<?xml version="1.0"?> 
 
<svg version="1.1" 
 
     id="svg2" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docbase="/home/buck/Desktop/Wikipedia" sodipodi:version="0.32" inkscape:output_extension="org.inkscape.output.svg.inkscape" sodipodi:docname="Apollo 13 timeline.svg" inkscape:version="0.45.1" 
 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="4.5 180.6 315.2 51.1" 
 
     enable-background="new 4.5 180.6 315.2 51.1" xml:space="preserve"> 
 

 
    <!-- FLIGHT PATH --> 
 
    <path d="M4.9,208 
 
    c1.2,7.9,17.1,12,25.6,14.2c107.2,27.6,273-15.7,285.9-17.5c1.5-0.2,2.7,0.3,3,2c0.2,1.3-0.9,2.4-3,2.4 
 
    c-12.7-0.5-118.1-46.8-272.2-19.9c-11.3,2-26.1,4.4-33.2,8.4c-3.7,2.2-5,5.4-5,5.4s-1.4,2.2-1,5.4" 
 
      stroke="#CECECE" stroke-width="0.619" 
 
      fill="none" id="apollo11"/> 
 

 
    <!-- EARTH --> 
 
    <path id="path2764" sodipodi:ry="17.946428" sodipodi:type="arc" sodipodi:cy="337.375" sodipodi:cx="276.16071" sodipodi:rx="17.946428" d=" 
 
     M16.6,206.9c0,3.1-2.5,5.6-5.5,5.6c-3.1,0-5.6-2.5-5.6-5.5c0,0,0,0,0,0c0-3.1,2.5-5.6,5.5-5.6C14.1,201.3,16.6,203.8,16.6,206.9 
 
     C16.6,206.9,16.6,206.9,16.6,206.9z"/> 
 

 
    <!-- MOON --> 
 
    <path id="path2766" sodipodi:ry="4.987628" sodipodi:type="arc" sodipodi:cy="347.08206" sodipodi:cx="660.63977" sodipodi:rx="4.987628" fill="#646464" stroke="#646464" stroke-width="0.3095" d=" 
 
     M318.7,206.9c0,0.9-0.7,1.5-1.5,1.5c-0.9,0-1.5-0.7-1.5-1.5c0,0,0,0,0,0c0-0.9,0.7-1.5,1.5-1.5C318,205.3,318.7,206,318.7,206.9 
 
     C318.7,206.9,318.7,206.9,318.7,206.9z"/> 
 

 

 
    <!-- APOLLO 11 CSM & LEM --> 
 
    <circle cx="" cy="" r="1" fill="black"> 
 
     <!--Animation --> 
 
     <animateMotion dur="256s" repeatCount="indefinite"> 
 
       <mpath xlink:href="#apollo11"/> 
 
     </animateMotion> 
 
    </circle> 
 
</svg>

Answer 1

あなたがanimateMotionがどのように振る舞うべきかを制御するためにはJavaScriptを使用すべきです。

ここにいくつかのヒントがあります。これは、訪問者がアニメーション再生範囲内であなたのページに来ると仮定しています。

まず、我々は必要がありますいくつかの変数を定義してみましょう：

代わり dur値をハードコーディングするの、あなたが間に残るどのくらいの時間を計算する必要があり、右 durエーション

を設定

var startDate = new Date('2016-06-10'), // when the animation starts 
    endDate = new Date('2016-06-16'), // when the animation stops 
    today = new Date() // visit date - should be between start and end dates 

訪問時間と終了日。 アニメーションは、右の瞬間

円はイベントの開始からの経過時間に比例した位置に開始すべきでアニメーションを開始する

var remainingDuration = (endDate - today)/1000 // in seconds 
// set this value in "dur" attribute 
// e.g. in jQuery: anim.attr('dur', remainingDuration + 's') 

（秒）のために再生し続ける必要があります。

var animationDuration = endDate - startDate 
    , timeElapsed = today - startDate 
    , percentElapsed = timeElapsed/animationDuration 

あなたはアニメーションがanimateMotionパスからpercentElapsedでの円の位置で開始したいです。このkeyTimesとkeyPoints属性にして制御することができる。

• keyTimesは、時間的に「点」のセットが含まれている必要があり、0と1の間（例えば、0.5途中アニメーションの総持続時間を介してである）
• keyPointsありますketTimeに各ポイントに対応するanimateMotionアニメーションの進捗を伝えるために使用されます。

Reference詳細については、

• keyTimesが"0;1"
• keyPointsにハードコード化することができるが、percentElapsed +";1"

P.S.に設定されるべきですあなたもここでcalcMode="linear"（reference）

を指定する必要があります（はるかに高速に実行するように設定が）上記のロジックを使用して、25％から始まるアニメーションの例です：

<?xml version="1.0"?> 
 
<svg version="1.1" 
 
     id="svg2" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docbase="/home/buck/Desktop/Wikipedia" sodipodi:version="0.32" inkscape:output_extension="org.inkscape.output.svg.inkscape" sodipodi:docname="Apollo 13 timeline.svg" inkscape:version="0.45.1" 
 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="4.5 180.6 315.2 51.1" 
 
     enable-background="new 4.5 180.6 315.2 51.1" xml:space="preserve"> 
 

 
    <!-- FLIGHT PATH --> 
 
    <path d="M4.9,208 
 
    c1.2,7.9,17.1,12,25.6,14.2c107.2,27.6,273-15.7,285.9-17.5c1.5-0.2,2.7,0.3,3,2c0.2,1.3-0.9,2.4-3,2.4 
 
    c-12.7-0.5-118.1-46.8-272.2-19.9c-11.3,2-26.1,4.4-33.2,8.4c-3.7,2.2-5,5.4-5,5.4s-1.4,2.2-1,5.4" 
 
      stroke="#CECECE" stroke-width="0.619" 
 
      fill="none" id="apollo11"/> 
 

 
    <!-- EARTH --> 
 
    <path id="path2764" sodipodi:ry="17.946428" sodipodi:type="arc" sodipodi:cy="337.375" sodipodi:cx="276.16071" sodipodi:rx="17.946428" d=" 
 
     M16.6,206.9c0,3.1-2.5,5.6-5.5,5.6c-3.1,0-5.6-2.5-5.6-5.5c0,0,0,0,0,0c0-3.1,2.5-5.6,5.5-5.6C14.1,201.3,16.6,203.8,16.6,206.9 
 
     C16.6,206.9,16.6,206.9,16.6,206.9z"/> 
 

 
    <!-- MOON --> 
 
    <path id="path2766" sodipodi:ry="4.987628" sodipodi:type="arc" sodipodi:cy="347.08206" sodipodi:cx="660.63977" sodipodi:rx="4.987628" fill="#646464" stroke="#646464" stroke-width="0.3095" d=" 
 
     M318.7,206.9c0,0.9-0.7,1.5-1.5,1.5c-0.9,0-1.5-0.7-1.5-1.5c0,0,0,0,0,0c0-0.9,0.7-1.5,1.5-1.5C318,205.3,318.7,206,318.7,206.9 
 
     C318.7,206.9,318.7,206.9,318.7,206.9z"/> 
 

 

 
    <!-- APOLLO 11 CSM & LEM --> 
 
    <circle r="1" fill="black"> 
 
    <!--Animation --> 
 
    <animateMotion dur="7s" calcMode="linear" keyTimes= "0;1" keyPoints= ".25;1"> 
 
     <mpath xlink:href="#apollo11" /> 
 
    </animateMotion> 
 
    </circle> \ 
 
</svg>

keyPointsが

に設定された後、あなたが追加する必要があり、アニメーションを開始属性をanimateMotionに設定し、 referenceを使用して、keyPointsとdurをjavacriptに設定した後にアニメーションを開始するようにトリガーします。私はこれを使用してアニメーションを開始させることはできませんでしたが、私は練習としてあなたに任せます:)