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。放慢速度，并将缓动函数更改为线性。

SVG动画到路径

SVG anime to path

svg

anime.js