15、深入探索 Lottie 动画：声明式与命令式 API 及常见问题解答

深入探索 Lottie 动画：声明式与命令式 API 及常见问题解答

1. 声明式 API

声明式 API 为开发者提供了一种简洁直观的方式来控制 Lottie 动画。以下是几个重要的属性及其用法：

1.1 speed 属性

speed 属性是一个数值，用于设置动画的播放速度，它基于默认速度的倍数来调整。例如：

<LottieView 
    source={require('./assets/animations/myLottieFile.json')} 
    speed={2} 
/>

上述代码会使动画以原始速度的两倍播放。若将 speed 设置为负数，则动画会反向播放，如 speed={-1} 会使动画以原始速度反向播放。

我们还可以创建一个循环，让动画每 2 秒来回播放一次，而不是简单地重复播放：

const App = ({}) => {
  const [speed, setSpeed] = useState(1);
  const reverseSpeed = useCallback(() => {
    if (speed === 1) {
      setSpeed(-1);
    } else {
      setSpeed(1);
    }
  }, [speed]);

  useEffect(() => {