让React Native应用图标动起来——react-native-svg动画的运用

2023-10-08 07:55:27

1. 简介

在React Native应用中，经常需要使用图标来表示各种元素，例如菜单项、按钮、加载动画等。通常，这些图标都是静态的，但如果能让他们动起来，无疑会让你的应用界面更加生动和有趣。

React Native SVG（可缩放矢量图形）库是一个非常强大的库，它可以让我们轻松地创建和使用SVG动画。SVG动画是一种基于矢量图形的动画技术，与传统的位图动画相比，它具有更高的清晰度和可扩展性。

2. 安装react-native-svg

npm install react-native-svg --save

3. 使用react-native-svg

3.1 导入库

import Svg, { G, Path } from 'react-native-svg';

3.2 创建动画

<Svg width="100" height="100">
  <G>
    <Path
      d="M 10 10 L 90 90"
      stroke="black"
      strokeWidth="2"
      fill="none"
    />
    <Path
      d="M 90 10 L 10 90"
      stroke="black"
      strokeWidth="2"
      fill="none"
    />
  </G>
</Svg>

上面的代码创建了一个简单的X形动画。我们使用<Path>元素来创建两条线，并使用<G>元素将它们组合在一起。

3.3 添加动画效果

我们可以使用<Animate>元素来为动画添加效果。例如，我们可以让线条的颜色随着时间而改变。

<Svg width="100" height="100">
  <G>
    <Path
      d="M 10 10 L 90 90"
      stroke="black"
      strokeWidth="2"
      fill="none"
    >
      <Animate attributeName="stroke" values="black;red;blue" dur="2s" repeatCount="indefinite" />
    </Path>
    <Path
      d="M 90 10 L 10 90"
      stroke="black"
      strokeWidth="2"
      fill="none"
    >
      <Animate attributeName="stroke" values="black;red;blue" dur="2s" repeatCount="indefinite" />
    </Path>
  </G>
</Svg>