贝塞尔点动画答案

【问题标题】：Animation by Bezier points贝塞尔点动画
【发布时间】：2016-02-14 03:57:43
【问题描述】：

我需要很多不同的路径来为幻灯片图片制作动画。动画将在贝塞尔曲线定义的点上进行。但我没有找到任何画廊或这条路径的例子。第二种方法是以点为单位转换 SVG 路径，但是如何实现呢？沿途是否有现成的动画画廊？

【问题讨论】：

要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。

【解决方案1】：

这是一个起点。这是直接从the Mozilla Developer Network site for the SVG animateMotion function复制而来的。

<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <!-- Draw the outline of the motion path in grey, along
         with 2 small circles at key points -->
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
          stroke="lightgrey" stroke-width="2" 
          fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"  />
    <circle cx="110" cy="10" r="3" fill="lightgrey"  />

    <!-- Here is a red circle which will be moved along the motion path. -->
    <circle cx="" cy="" r="5" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
           <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

【讨论】：