最近项目重构, 使用了 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 是 https://github.com/reactjs/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 的具体方式如下:
在 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 实现了我的充电波浪动画, 效果图如下:
react-native-art-hcdwave
图中所有元素均有 ART 组件实现, 代码我已提交至我的 GitHub https://github.com/Jvaeyhcd/react-native-art-wave , 欢迎大家参考.
关于波浪的绘制逻辑与之前的一篇《CGContextRef 绘图 - iOS 球形波浪加载进度控件 - HcdProcessView 详解》 https://www.jianshu.com/p/20d71da174e6 是一样的.
如何使用
使用如下代码安装 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',
- }
- });
参考文章
《在 React Native 中使用 ART》
《react-native 之 ART 绘图详解》
来源: https://juejin.im/entry/5beaedbaf265da61620cf1d6