SVG动画到路径

Question

试图让云在 SVG 的路径上移动，但是当我做所有事情时，云从视图部分移开......不知道为什么会发生这种情况。

[这是在代码笔上][1]

enter code here[1]：https://codepen.io/paul-santi/pen/MWvMaKp

Answer 1

导致问题的是转换。您的云和云路径上的变换都将云推离您想要的动画位置。

修复

首先，当云跟随路径时，云从原点 (0,0) 的任何 X、Y 偏移都将包括在内。所以你需要做的第一件事是移动你的云，使它们位于 (0,0)。

我为解决这个问题所做的快速修复是通过在#Cloued2 中插入一个组元素来添加一个变换回原点

Updated codepen: https://codepen.io/PaulLeBeau/pen/WNEVbrO

    <g id="cloued2" transform="translate(0 0)">
      <g transform="translate(-1270,-307)">
        <circle id="Ellipse_1-2" data-name="Ellipse 1"  r="36" transform="translate(1198 325)" fill="#fff"/>
        <circle id="Ellipse_2-2" data-name="Ellipse 2"  r="36" transform="translate(1234 325)" fill="#fff"/>
        <circle id="Ellipse_3-2" data-name="Ellipse 3"  r="36" transform="translate(1270 325)" fill="#fff"/>
        <circle id="Ellipse_4-2" data-name="Ellipse 4" r="36" transform="translate(1306 325)" fill="#fff"/>
        <circle id="Ellipse_5-2" data-name="Ellipse 5"  r="36" transform="translate(1342 325)" fill="#fff"/>
        <circle id="Ellipse_6-2" data-name="Ellipse 6"  r="36" transform="translate(1306 289)" fill="#fff"/>
        <circle id="Ellipse_7-2" data-name="Ellipse 7" r="36" transform="translate(1270 289)" fill="#fff"/>
        <circle id="Ellipse_8-2" data-name="Ellipse 8"  r="36" transform="translate(1234 289)" fill="#fff"/>
      </g>
    </g>

下一个问题是#Path_Cloued2 的transform。 Anime.js 将读取路径定义，但不会考虑转换。所以云会在页面的其他地方设置动画。

为了解决这个问题，我删除了transform 并调整了路径定义以进行补偿。

旧

<path id="Path_cloued2" data-name="Path cloued2" d="M2323,184l712-25-328,75Z" transform="translate(-2069 114)" fill="none" stroke="#707070" stroke-width="1"/>

新的

<path id="Path_cloued2" data-name="Path cloued2" d="M254,298 l 712-25 -328,75Z" fill="none" stroke="#707070" stroke-width="1"/>

现在云跟随路径。它仍然会做一些奇怪的事情，但我怀疑这只是调整动画配置的问题。 IE。放慢速度，将缓动函数改为线性。