Question

所以我有这个SVG动画我正在努力工作，我在下面制作了一个快速小版本的真实图像来解释我想要做的事情。

我遇到的最大问题是制作<line>元素＆＃34;关注＆＃34; <path>或甚至<circle>元素的位置。

这是动画的第一阶段

＆＃13;

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }
    </style>
  </defs>
  <title>Untitled-5</title>
  <path d="M107,94a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-95 -34)"/>
  <path d="M139,36a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-95 -34)"/>
  <path d="M207,69a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-95 -34)"/>
  <line class="cls-1" x1="38" y1="21" x2="17" y2="61"/>
  <line class="cls-1" x1="54" y1="16" x2="102" y2="40"/>
</svg>

＆＃13;

然后几秒钟之后，我希望它能够平滑地动画到下一个SVG的位置。之后，它应该在两者之间顺畅地交替。

＆＃13;

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 68">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }
    </style>
  </defs>
  <title>Untitled-5</title>
  <path d="M104,53A10,10,0,1,1,94,63a10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-92 -28)"/>
  <path d="M151,74a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-92 -28)"/>
  <path d="M192,30a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-92 -28)"/>
  <line class="cls-1" x1="49" y1="52" x2="22" y2="39"/>
  <line class="cls-1" x1="66" y1="48" x2="92" y2="20"/>
</svg>

＆＃13;

提前感谢您的帮助！

Answer 1

使用SMIL动画尝试动画连接圆圈边缘的线条会非常困难。端点将在屏幕上采用非线性路径。

但是，如果您更改线条以便它们连接圆圈的中心，那么事情会变得更加更多更简单。要隐藏圆圈内部线条的部分，您可以将它们移动到圆圈后面，然后为圆圈指定实心填充。或者，如果你真的需要透明圆圈，你可以使用圆形遮罩隐藏延长线。

＆＃13;

public class SomeClass : INotifyPropertyChanged
{

    private string m_caption;
    private bool m_isSelected;

    public string Caption
    {
        get { return m_caption; }
        set
        {
            if (m_caption != value)
            {
                m_caption = value;
                RaisePropertyChanged("Caption");
            }
        }
    }

    public bool IsSelected
    {
        get { return m_isSelected; }
        set
        {
            if (m_isSelected != value)
            {
                m_isSelected = value;
                RaisePropertyChanged("IsSelected");
            }
        }
    }

    public SomeClass(string _caption)
    {
        if (string.IsNullOrWhiteSpace(_caption))
            m_caption = Guid.NewGuid().ToString();
        Caption = _caption;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string _property)
    {
        PropertyChangedEventHandler hanlder = PropertyChanged;
        if (hanlder != null)
        {
            hanlder.Invoke(null, new PropertyChangedEventArgs(_property));
        }
    }
}

＆＃13;

SVG从路径转换到另一个

1 个答案: