在 React Native 中使用 ART 绘制波浪动画 [ Jvaeyhcd's Note ]

最近项目重构，使用了React Native来进行重写，在还原之前原生实现的波浪动画。之前不知道React Native中有ART这个库，本打算使用h5中的canvas来实现波浪动画，捣鼓了半天没有搞出来。后来又重新Google如何React Native来实现动画效果，找到几篇不错的文章介绍到了React Native ART库的使用。

今天刚好使用React Native还原了之前项目中的波浪动画，于是趁热打铁整理下我的实现思路和大家分享下我的心路历程。

React Native ART 究竟是什么?

所谓ART，是一个在React中绘制矢量图形的JS类库。这个类库抽象了一系统的通用接口，统一了SVG，canvas，VML这类矢量图形在React中的书写格式。你可以通过ART将SVG，canvas，VML的矢量图形拿到React中使用，也可以把ART反转回去。React Native ART是react-art在React Native中的移植版，接口基本完全一致，React Native中的ART很早之前就已经开源iOS版了，后来又在0.18.0中开源了Android版本。

如何在React Native中使用 ART？

在安卓中使用无需配置任何东西就可使用，在iOS中ART是可选的，你需要手动导入ART.xcodeproj文件，并手动导入libART.a静态库。
iOS项目中配置ART的具体方式如下：

在Xcode选中项目点击右键->Add Files to Your Project Name->选择添加Project path/node_modules/react-native/Libraries/ART/ART.xcodeproj。
在Build Phases中的Link Binary With Libraries中点击+号，选择添加libART.a。

波浪实现

接下来就可以尽情使用ART了，我用ART实现了我的充电波浪动画，效果图如下：

iOS

Android

以上效果代码，已经提交至GitHub，如有需要直接拿去。https://github.com/Jvaeyhcd/react-native-art-wave

如何使用

使用如下代码安装react-native-art-hcdwave到项目中。

1	npm i react-native-art-hcdwave

然后再需要使用的地方，按照如下方法使用即可。

import React, {Component} from 'react';
import {
  StyleSheet, 
  View
} from 'react-native';
 
import { HcdWaveView } from './src/components/HcdWaveView'
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <HcdWaveView
          surfaceWidth = {230} 
          surfaceHeigth ={230}
          powerPercent = {76}
          type="dc"
          style = {{backgroundColor:'#FF7800'}}></HcdWaveView>
        <HcdWaveView
          surfaceWidth = {230} 
          surfaceHeigth ={230}
          powerPercent = {76}
          type="ac"
          style = {{backgroundColor:'#FF7800'}}></HcdWaveView>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#18A4FD',
  }
});

React Native ART 究竟是什么?

如何在React Native中使用 ART？

波浪实现

iOS

Android

如何使用

参考文档