根据特定日期启动 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

您应该使用 javascript 来控制 animateMotion 的行为方式。

这里有一些提示。这是假设访问者在动画播放范围内来到您的页面。

首先，让我们定义一些我们需要的变量：

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

设置正确的duration

您应该计算访问时间和结束日期之间的剩余时间，而不是硬编码 dur 值。 动画应持续播放（以秒为单位）

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"

附：您还必须指定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 中添加begin="indefinite" 属性，然后在javascript 中设置keyPoints 和dur 后触发动画开始，使用beginElement() reference。我没有设法让动画开始使用它，我把它留给你作为练习:)