javascript - 如何在给定值列表的情况下动态地为 SVG 圆圈设置动画？

问题描述

我有一个值列表，例如：

[10, 20, 20, 30, 10, 10, 10, 20, 20, ...]

这可以在动画开始之前改变。

目标是获取一个 SVG 圆圈并执行以下操作：

索引 i = 0
在 X 秒内平滑设置半径到 list[i]
增加我
在 X 秒内平滑设置半径到 list[i]
增加我
...

我目前正在使用Animate.timing并onComplete开始一个新的，但它似乎是一种低效的方式（也许它会增加一些延迟）来设置预先计划的动画。有没有办法告诉 SVG 对象在给定的时间和给定的持续时间改变形状？

我想能够告诉圈子：

[{from_radius: 10, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 30, duration: 0.25}, ...]

并将其交给圆圈以自动处理它。

标签： javascriptreact-nativesvgreact-native-svg

javascript - 如何在给定值列表的情况下动态地为 SVG 圆圈设置动画？

问题描述

解决方案

推荐阅读