在 React Native 中使用 ART 繪製波浪動畫

摘要： 最近專案重構，使用了React Native來進行重寫，在還原之前原生實現的波浪動畫。之前不知道React Native中有ART這個庫，本打算使用h5中的canvas來實現波浪動畫，搗鼓了半天沒有搞出來。後來又重新Google如何React Native來實現動畫效果，找到幾篇不錯的文章介紹...

最近專案重構，使用了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 是 ofollow,noindex">react-art 在React Native中的移植版，介面幾乎完全一致，

React Native中的ART很早之前就已經開源了iOS版，最近又在0.18.0中開源了Android版本

因為缺少官方文件，一直不為人所知。但是通過萬能的Google，搜尋到一篇文章，裡面詳細介紹了ART的使用（請參考文章末尾的參考連結）。

如何在React Native中使用 ART？

在安卓中使用無需配置任何東西就可使用，在iOS中ART是可選的，你需要手動匯入ART.xcodeproj檔案，並手動匯入 libART.a 靜態庫。

iOS專案中配置ART的具體方式如下：

1. 在Xcode選中專案點選右鍵->Add Files to Your Project Name ->選擇新增 Project path /node_modules/react-native/Libraries/ART/ART.xcodeproj。
2. 在Build Phases中的Link Binary With Libraries中點選+號，選擇新增 libART.a 。

波浪實現

接下來就可以盡情使用ART了，我用ART實現了我的充電波浪動畫，效果圖如下：

圖中所有元素均有ART元件實現，程式碼我已提交至我的 GitHub ，歡迎大家參考。

關於波浪的繪製邏輯與之前的一篇 《CGContextRef繪圖－iOS球形波浪載入進度控制元件－HcdProcessView詳解》 是一樣的。

如何使用

使用如下程式碼安裝 react-native-art-hcdwave 到專案中。

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',
}
});