动画元素移动到路径的 beginning/end？
Animating element moving to the beginning/end of a path?
我正在沿路径为元素设置动画，虽然动画工作正常，但我需要能够为元素设置动画，然后沿着路径移动。
我找不到任何执行此操作的示例，我是否应该创建一个不可见元素，以便我有一个目标在该元素开始路径之前将该元素设置为动画？如果可以，我该怎么做，或者有更好的方法吗？
这是我的路。
<svg width="100%" height="100%" viewBox="0 0 840 840" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="rg1" cx="0.474" cy="0.472" r="50%">
<stop offset="5%" style="stop-color:violet;" />
<stop offset="15%" style="stop-color:indigo;" />
<stop offset="30%" style="stop-color:blue;" />
<stop offset="40%" style="stop-color:lime;" />
<stop offset="75%" style="stop-color:yellow;" />
<stop offset="90%" style="stop-color:orange;" />
<stop offset="100%" style="stop-color:red;" />
</radialGradient>
</defs>
<g id="spirals" transform="translate(420,420) rotate(270)"
style="fill:none;stroke-width:6px;stroke-linecap:round;">
<path id="spiral" style="stroke:url(#rg1);"
d="M0,0C3.36,0.06,6.6,-2.82,7.07,-7.07C7.66,-11.26,5.28,-16.67,0,-20C-5.18,-23.4,-13.27,-24.43,-21.21,-21.21C-29.13,-18.12,-36.69,-10.51,-40,0C-43.42,10.46,-42.3,23.68,-35.36,35.36C-28.53,47,-15.79,56.71,0,60C15.69,63.43,34.14,60.2,49.5,49.5C64.88,38.98,76.71,21.03,80,0C83.43,-20.92,78.08,-44.6,63.64,-63.64C49.44,-82.74,26.27,-96.74,0,-100C-26.16,-103.45,-55.05,-95.94,-77.78,-77.78C-100.6,-59.88,-116.76,-31.53,-120,0C-123.48,31.43,-113.8,65.49,-91.92,91.92C-70.34,118.47,-36.76,136.79,0,140C36.66,143.5,75.94,131.67,106.07,106.07C136.34,80.79,156.81,42,160,0C163.53,-41.9,149.54,-86.4,120.21,-120.21C91.24,-154.2,47.24,-176.83,0,-180C-47.13,-183.56,-96.85,-167.4,-134.35,-134.35C-172.06,-101.7,-196.86,-52.47,-200,0C-203.55,52.4,-185.28,107.29,-148.49,148.49C-112.14,189.9,-57.74,216.9,0,220C57.63,223.58,117.75,203.14,162.63,162.63C207.77,122.6,236.92,62.97,240,0C243.62,-62.86,220.98,-128.21,176.78,-176.78C133.05,-225.63,68.21,-256.95,0,-260C-68.13,-263.64,-138.65,-238.85,-190.92,-190.92C-243.49,-143.49,-276.98,-73.47,-280,0C-283.66,73.36,-256.71,149.1,-205.06,205.06C-153.94,261.36,-78.71,297,0,300C78.6,303.69,159.56,274.58,219.2,219.2C279.23,164.4,317.02,83.94,320,0C323.72,-83.84,292.44,-170.01,233.35,-233.35C174.84,-297.12,89.21,-337.04,0,-340C-89.07,-343.71,-180.46,-310.32,-247.49,-247.49C-315,-185.31,-357.03,-94.41,-360,0C-363.74,94.33,-328.18,190.91,-261.63,261.63C-195.75,332.86,-99.67,377.06,0,380C99.57,383.76,201.36,346.05,275.77,275.77C350.73,206.2,397.08,104.91,400,0" />
</g>
</svg>
我能够创建一个解决方案。我想沿路径为元素设置动画，但该元素并没有完全从路径开始的地方开始。在我的示例中，路径从容器的中上侧开始，但元素更靠近容器的左上侧。这会将元素移向中上侧，然后在元素到达后沿路径开始动画。
代码可以适用于其他类似情况。我确信有更好的方法，但我已经浏览了 GSAP 和 anime.js 库，但如果没有来自 GSAP 的 Flip 插件，我无法找到一种方法来完成它，该插件已获得付费许可。
let element_position = element.getBoundingClientRect()
let path_container_position = path_container.getBoundingClientRect()
let tl = gsap.timeline()
tl.to(element, {
x: path_container_position.left - element_position.left + (path_container_position.width / 2) - (element_position.width / 2),
y: path_container_position.top - element_position.top - (element_position.height / 2),
ease: 'none',
duration: 5,
})
tl.to(element, {
motionPath: {
path: path_container,
align: path_container,
alignOrigin: [0.5, 0.5]
},
ease: "power4.easeInOut",
duration: 10,
yoyo: true,
repeat: -1,
})
也许这就是您所需要的。这是用 SMIL 动画完成的：
<svg width="100%" height="100%" viewBox="0 0 840 840" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="rg1" cx="0.474" cy="0.472" r="50%">
<stop offset="5%" style="stop-color:violet;" />
<stop offset="15%" style="stop-color:indigo;" />
<stop offset="30%" style="stop-color:blue;" />
<stop offset="40%" style="stop-color:lime;" />
<stop offset="75%" style="stop-color:yellow;" />
<stop offset="90%" style="stop-color:orange;" />
<stop offset="100%" style="stop-color:red;" />
</radialGradient>
</defs>
<g>
<path id="spiral" style="fill:none;stroke:url(#rg1);stroke-width:6px;stroke-linecap:round" d="m 420,420 c 0.06,-3.36 -2.82,-6.6 -7.07,-7.07 -4.19,-0.59 -9.6,1.79 -12.93,7.07 -3.4,5.18 -4.43,13.27 -1.21,21.21 3.09,7.92 10.7,15.48 21.21,18.79 10.46,3.42 23.68,2.3 35.36,-4.64 C 467,448.53 476.71,435.79 480,420 c 3.43,-15.69 0.2,-34.14 -10.5,-49.5 -10.52,-15.38 -28.47,-27.21 -49.5,-30.5 -20.92,-3.43 -44.6,1.92 -63.64,16.36 -19.1,14.2 -33.1,37.37 -36.36,63.64 -3.45,26.16 4.06,55.05 22.22,77.78 17.9,22.82 46.25,38.98 77.78,42.22 31.43,3.48 65.49,-6.2 91.92,-28.08 C 538.47,490.34 556.79,456.76 560,420 563.5,383.34 551.67,344.06 526.07,313.93 500.79,283.66 462,263.19 420,260 378.1,256.47 333.6,270.46 299.79,299.79 265.8,328.76 243.17,372.76 240,420 c -3.56,47.13 12.6,96.85 45.65,134.35 32.65,37.71 81.88,62.51 134.35,65.65 52.4,3.55 107.29,-14.72 148.49,-51.51 C 609.9,532.14 636.9,477.74 640,420 643.58,362.37 623.14,302.25 582.63,257.37 542.6,212.23 482.97,183.08 420,180 357.14,176.38 291.79,199.02 243.22,243.22 194.37,286.95 163.05,351.79 160,420 c -3.64,68.13 21.15,138.65 69.08,190.92 47.43,52.57 117.45,86.06 190.92,89.08 73.36,3.66 149.1,-23.29 205.06,-74.94 C 681.36,573.94 717,498.71 720,420 723.69,341.4 694.58,260.44 639.2,200.8 584.4,140.77 503.94,102.98 420,100 336.16,96.28 249.99,127.56 186.65,186.65 122.88,245.16 82.96,330.79 80,420 76.29,509.07 109.68,600.46 172.51,667.49 234.69,735 325.59,777.03 420,780 514.33,783.74 610.91,748.18 681.63,681.63 752.86,615.75 797.06,519.67 800,420 803.76,320.43 766.05,218.64 695.77,144.23 626.2,69.27 524.91,22.92 420,20"/>
</g>
<g><path style="fill:#ff0000" d="m 10,-50 30,0 c 5.54,0 10,4.46 10,10 l 0,30.0000001 C 50,-4.459999 45.54,0 40,0 L 10,0 C 4.46,0 0,-4.459999 0,-9.9999999 L 0,-40 c 0,-5.54 4.46,-10 10,-10 z"/>
<animateMotion id="animateMotion12-8" rotate="auto" repeatCount="indefinite" dur="15s" path="m 420,420 c 0.06,-3.36 -2.82,-6.6 -7.07,-7.07 -4.19,-0.59 -9.6,1.79 -12.93,7.07 -3.4,5.18 -4.43,13.27 -1.21,21.21 3.09,7.92 10.7,15.48 21.21,18.79 10.46,3.42 23.68,2.3 35.36,-4.64 C 467,448.53 476.71,435.79 480,420 c 3.43,-15.69 0.2,-34.14 -10.5,-49.5 -10.52,-15.38 -28.47,-27.21 -49.5,-30.5 -20.92,-3.43 -44.6,1.92 -63.64,16.36 -19.1,14.2 -33.1,37.37 -36.36,63.64 -3.45,26.16 4.06,55.05 22.22,77.78 17.9,22.82 46.25,38.98 77.78,42.22 31.43,3.48 65.49,-6.2 91.92,-28.08 C 538.47,490.34 556.79,456.76 560,420 563.5,383.34 551.67,344.06 526.07,313.93 500.79,283.66 462,263.19 420,260 378.1,256.47 333.6,270.46 299.79,299.79 265.8,328.76 243.17,372.76 240,420 c -3.56,47.13 12.6,96.85 45.65,134.35 32.65,37.71 81.88,62.51 134.35,65.65 52.4,3.55 107.29,-14.72 148.49,-51.51 C 609.9,532.14 636.9,477.74 640,420 643.58,362.37 623.14,302.25 582.63,257.37 542.6,212.23 482.97,183.08 420,180 357.14,176.38 291.79,199.02 243.22,243.22 194.37,286.95 163.05,351.79 160,420 c -3.64,68.13 21.15,138.65 69.08,190.92 47.43,52.57 117.45,86.06 190.92,89.08 73.36,3.66 149.1,-23.29 205.06,-74.94 C 681.36,573.94 717,498.71 720,420 723.69,341.4 694.58,260.44 639.2,200.8 584.4,140.77 503.94,102.98 420,100 336.16,96.28 249.99,127.56 186.65,186.65 122.88,245.16 82.96,330.79 80,420 76.29,509.07 109.68,600.46 172.51,667.49 234.69,735 325.59,777.03 420,780 514.33,783.74 610.91,748.18 681.63,681.63 752.86,615.75 797.06,519.67 800,420 803.76,320.43 766.05,218.64 695.77,144.23 626.2,69.27 524.91,22.92 420,20"/>
</g>
</svg>
我正在沿路径为元素设置动画，虽然动画工作正常，但我需要能够为元素设置动画，然后沿着路径移动。
我找不到任何执行此操作的示例，我是否应该创建一个不可见元素，以便我有一个目标在该元素开始路径之前将该元素设置为动画？如果可以，我该怎么做，或者有更好的方法吗？
这是我的路。
<svg width="100%" height="100%" viewBox="0 0 840 840" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="rg1" cx="0.474" cy="0.472" r="50%">
<stop offset="5%" style="stop-color:violet;" />
<stop offset="15%" style="stop-color:indigo;" />
<stop offset="30%" style="stop-color:blue;" />
<stop offset="40%" style="stop-color:lime;" />
<stop offset="75%" style="stop-color:yellow;" />
<stop offset="90%" style="stop-color:orange;" />
<stop offset="100%" style="stop-color:red;" />
</radialGradient>
</defs>
<g id="spirals" transform="translate(420,420) rotate(270)"
style="fill:none;stroke-width:6px;stroke-linecap:round;">
<path id="spiral" style="stroke:url(#rg1);"
d="M0,0C3.36,0.06,6.6,-2.82,7.07,-7.07C7.66,-11.26,5.28,-16.67,0,-20C-5.18,-23.4,-13.27,-24.43,-21.21,-21.21C-29.13,-18.12,-36.69,-10.51,-40,0C-43.42,10.46,-42.3,23.68,-35.36,35.36C-28.53,47,-15.79,56.71,0,60C15.69,63.43,34.14,60.2,49.5,49.5C64.88,38.98,76.71,21.03,80,0C83.43,-20.92,78.08,-44.6,63.64,-63.64C49.44,-82.74,26.27,-96.74,0,-100C-26.16,-103.45,-55.05,-95.94,-77.78,-77.78C-100.6,-59.88,-116.76,-31.53,-120,0C-123.48,31.43,-113.8,65.49,-91.92,91.92C-70.34,118.47,-36.76,136.79,0,140C36.66,143.5,75.94,131.67,106.07,106.07C136.34,80.79,156.81,42,160,0C163.53,-41.9,149.54,-86.4,120.21,-120.21C91.24,-154.2,47.24,-176.83,0,-180C-47.13,-183.56,-96.85,-167.4,-134.35,-134.35C-172.06,-101.7,-196.86,-52.47,-200,0C-203.55,52.4,-185.28,107.29,-148.49,148.49C-112.14,189.9,-57.74,216.9,0,220C57.63,223.58,117.75,203.14,162.63,162.63C207.77,122.6,236.92,62.97,240,0C243.62,-62.86,220.98,-128.21,176.78,-176.78C133.05,-225.63,68.21,-256.95,0,-260C-68.13,-263.64,-138.65,-238.85,-190.92,-190.92C-243.49,-143.49,-276.98,-73.47,-280,0C-283.66,73.36,-256.71,149.1,-205.06,205.06C-153.94,261.36,-78.71,297,0,300C78.6,303.69,159.56,274.58,219.2,219.2C279.23,164.4,317.02,83.94,320,0C323.72,-83.84,292.44,-170.01,233.35,-233.35C174.84,-297.12,89.21,-337.04,0,-340C-89.07,-343.71,-180.46,-310.32,-247.49,-247.49C-315,-185.31,-357.03,-94.41,-360,0C-363.74,94.33,-328.18,190.91,-261.63,261.63C-195.75,332.86,-99.67,377.06,0,380C99.57,383.76,201.36,346.05,275.77,275.77C350.73,206.2,397.08,104.91,400,0" />
</g>
</svg>
我能够创建一个解决方案。我想沿路径为元素设置动画，但该元素并没有完全从路径开始的地方开始。在我的示例中，路径从容器的中上侧开始，但元素更靠近容器的左上侧。这会将元素移向中上侧，然后在元素到达后沿路径开始动画。
代码可以适用于其他类似情况。我确信有更好的方法，但我已经浏览了 GSAP 和 anime.js 库，但如果没有来自 GSAP 的 Flip 插件，我无法找到一种方法来完成它，该插件已获得付费许可。
let element_position = element.getBoundingClientRect()
let path_container_position = path_container.getBoundingClientRect()
let tl = gsap.timeline()
tl.to(element, {
x: path_container_position.left - element_position.left + (path_container_position.width / 2) - (element_position.width / 2),
y: path_container_position.top - element_position.top - (element_position.height / 2),
ease: 'none',
duration: 5,
})
tl.to(element, {
motionPath: {
path: path_container,
align: path_container,
alignOrigin: [0.5, 0.5]
},
ease: "power4.easeInOut",
duration: 10,
yoyo: true,
repeat: -1,
})
也许这就是您所需要的。这是用 SMIL 动画完成的：
<svg width="100%" height="100%" viewBox="0 0 840 840" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="rg1" cx="0.474" cy="0.472" r="50%">
<stop offset="5%" style="stop-color:violet;" />
<stop offset="15%" style="stop-color:indigo;" />
<stop offset="30%" style="stop-color:blue;" />
<stop offset="40%" style="stop-color:lime;" />
<stop offset="75%" style="stop-color:yellow;" />
<stop offset="90%" style="stop-color:orange;" />
<stop offset="100%" style="stop-color:red;" />
</radialGradient>
</defs>
<g>
<path id="spiral" style="fill:none;stroke:url(#rg1);stroke-width:6px;stroke-linecap:round" d="m 420,420 c 0.06,-3.36 -2.82,-6.6 -7.07,-7.07 -4.19,-0.59 -9.6,1.79 -12.93,7.07 -3.4,5.18 -4.43,13.27 -1.21,21.21 3.09,7.92 10.7,15.48 21.21,18.79 10.46,3.42 23.68,2.3 35.36,-4.64 C 467,448.53 476.71,435.79 480,420 c 3.43,-15.69 0.2,-34.14 -10.5,-49.5 -10.52,-15.38 -28.47,-27.21 -49.5,-30.5 -20.92,-3.43 -44.6,1.92 -63.64,16.36 -19.1,14.2 -33.1,37.37 -36.36,63.64 -3.45,26.16 4.06,55.05 22.22,77.78 17.9,22.82 46.25,38.98 77.78,42.22 31.43,3.48 65.49,-6.2 91.92,-28.08 C 538.47,490.34 556.79,456.76 560,420 563.5,383.34 551.67,344.06 526.07,313.93 500.79,283.66 462,263.19 420,260 378.1,256.47 333.6,270.46 299.79,299.79 265.8,328.76 243.17,372.76 240,420 c -3.56,47.13 12.6,96.85 45.65,134.35 32.65,37.71 81.88,62.51 134.35,65.65 52.4,3.55 107.29,-14.72 148.49,-51.51 C 609.9,532.14 636.9,477.74 640,420 643.58,362.37 623.14,302.25 582.63,257.37 542.6,212.23 482.97,183.08 420,180 357.14,176.38 291.79,199.02 243.22,243.22 194.37,286.95 163.05,351.79 160,420 c -3.64,68.13 21.15,138.65 69.08,190.92 47.43,52.57 117.45,86.06 190.92,89.08 73.36,3.66 149.1,-23.29 205.06,-74.94 C 681.36,573.94 717,498.71 720,420 723.69,341.4 694.58,260.44 639.2,200.8 584.4,140.77 503.94,102.98 420,100 336.16,96.28 249.99,127.56 186.65,186.65 122.88,245.16 82.96,330.79 80,420 76.29,509.07 109.68,600.46 172.51,667.49 234.69,735 325.59,777.03 420,780 514.33,783.74 610.91,748.18 681.63,681.63 752.86,615.75 797.06,519.67 800,420 803.76,320.43 766.05,218.64 695.77,144.23 626.2,69.27 524.91,22.92 420,20"/>
</g>
<g><path style="fill:#ff0000" d="m 10,-50 30,0 c 5.54,0 10,4.46 10,10 l 0,30.0000001 C 50,-4.459999 45.54,0 40,0 L 10,0 C 4.46,0 0,-4.459999 0,-9.9999999 L 0,-40 c 0,-5.54 4.46,-10 10,-10 z"/>
<animateMotion id="animateMotion12-8" rotate="auto" repeatCount="indefinite" dur="15s" path="m 420,420 c 0.06,-3.36 -2.82,-6.6 -7.07,-7.07 -4.19,-0.59 -9.6,1.79 -12.93,7.07 -3.4,5.18 -4.43,13.27 -1.21,21.21 3.09,7.92 10.7,15.48 21.21,18.79 10.46,3.42 23.68,2.3 35.36,-4.64 C 467,448.53 476.71,435.79 480,420 c 3.43,-15.69 0.2,-34.14 -10.5,-49.5 -10.52,-15.38 -28.47,-27.21 -49.5,-30.5 -20.92,-3.43 -44.6,1.92 -63.64,16.36 -19.1,14.2 -33.1,37.37 -36.36,63.64 -3.45,26.16 4.06,55.05 22.22,77.78 17.9,22.82 46.25,38.98 77.78,42.22 31.43,3.48 65.49,-6.2 91.92,-28.08 C 538.47,490.34 556.79,456.76 560,420 563.5,383.34 551.67,344.06 526.07,313.93 500.79,283.66 462,263.19 420,260 378.1,256.47 333.6,270.46 299.79,299.79 265.8,328.76 243.17,372.76 240,420 c -3.56,47.13 12.6,96.85 45.65,134.35 32.65,37.71 81.88,62.51 134.35,65.65 52.4,3.55 107.29,-14.72 148.49,-51.51 C 609.9,532.14 636.9,477.74 640,420 643.58,362.37 623.14,302.25 582.63,257.37 542.6,212.23 482.97,183.08 420,180 357.14,176.38 291.79,199.02 243.22,243.22 194.37,286.95 163.05,351.79 160,420 c -3.64,68.13 21.15,138.65 69.08,190.92 47.43,52.57 117.45,86.06 190.92,89.08 73.36,3.66 149.1,-23.29 205.06,-74.94 C 681.36,573.94 717,498.71 720,420 723.69,341.4 694.58,260.44 639.2,200.8 584.4,140.77 503.94,102.98 420,100 336.16,96.28 249.99,127.56 186.65,186.65 122.88,245.16 82.96,330.79 80,420 76.29,509.07 109.68,600.46 172.51,667.49 234.69,735 325.59,777.03 420,780 514.33,783.74 610.91,748.18 681.63,681.63 752.86,615.75 797.06,519.67 800,420 803.76,320.43 766.05,218.64 695.77,144.23 626.2,69.27 524.91,22.92 420,20"/>
</g>
</svg>