背景
筆者最近有個(gè)RN項(xiàng)目摸柄，需要在與設(shè)備通話的時(shí)候，App側(cè)展示聲波紋UI效果既忆，以筆者的尿性又去折騰整理了一番驱负，同樣也非常適用想了解react-native art繪圖入門基礎(chǔ)的同學(xué)。
在React Native中有個(gè)ART庫(kù)患雇，它可以繪制各種線(實(shí)線跃脊、虛線、曲線)苛吱、圖形(矩形酪术、圓、扇形)組合翠储，讓非郴嫜悖酷炫的繪圖及動(dòng)畫變成了可能。
至于水波紋援所、波浪動(dòng)畫庐舟、聲波音頻這些常用的效果，一般都是貝塞爾曲線加持畫出來(lái)的任斋。
一继阻、UI效果展示
以下是我是整理和改進(jìn)UI效果，基本能滿足項(xiàng)目需要
水波紋波浪曲線
聲音聲波曲線
下載速率曲線
二废酷、源碼下載
源碼有需要的就拿去吧瘟檩，代碼實(shí)現(xiàn)就不一一貼出來(lái)解析了。然后針對(duì)ART這個(gè)知識(shí)點(diǎn)做一下梳理澈蟆，做了一個(gè)演示DEMO墨辛，這樣會(huì)有一個(gè)大概的了解。
=====> React-Native使用ART實(shí)現(xiàn)水波紋動(dòng)畫趴俘、波浪線睹簇、聲波音頻波動(dòng)效果(附源碼)
三奏赘、知識(shí)點(diǎn)梳理
添加依賴
Android默認(rèn)就包含ART庫(kù)，IOS需要單獨(dú)添加依賴庫(kù)太惠。
右鍵點(diǎn)擊項(xiàng)目 -> ‘Add Files to ProjectName -> 選擇 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
將 libART.a 添加到 Linked Frameworks and Libraries
導(dǎo)入ART庫(kù)
import {
ART
} from 'react-native';
const {
Surface, Shape, Path, Group, Text
} = ART;
基礎(chǔ)組件
?Surface:一個(gè)矩形可渲染的區(qū)域磨淌，是其他元素的容器
width:渲染區(qū)域的寬
height:定義渲染區(qū)域的高
? Group：可容納多個(gè)形狀、文本和其他的分組
? Shape：形狀定義凿渊，可填充
d:定義繪制路徑
stroke:描邊顏色
strokeWidth:描邊寬度
strokeDash:定義虛線
fill:填充顏色
? Text：文本形狀定義
font:字體樣式梁只，定義字體、大小埃脏、粗細(xì)等搪锣，如bold 35px Heiti SC
? Path：Shape的屬性值 表示繪制的路徑
moveTo(x,y):移動(dòng)到坐標(biāo)(x,y)
lineTo(x,y):連線到坐標(biāo)(x,y)
line(x,y): 相對(duì)于原來(lái)的偏移
arc():繪制弧線
close():封閉空間
Path().moveTo(20, 20).lineTo(10, 20) 得到的是一條(20, 20) 到(10, 20) 的線。
Path().moveTo(20, 20).line(10, 20) 得到的是一條(20, 20) 到(30, 40) 的線彩掐。
Path().moveTo(150,50).arc(50, 100,50) 繪制一半圓弧(150,50)起點(diǎn)构舟，(50, 100)偏移量(終點(diǎn)) 50 半徑。
四堵幽、DEMO示例
Demo圖效
效果如下狗超，代碼不復(fù)雜的，聰明如你看看就明白谐檀，基本組件的操作下面也舉例說(shuō)明了
基礎(chǔ)元素
圓形抡谐、圓環(huán)、扇形桐猬、橢圓
三角形、半圓
多邊形
直線
了解Path的moveTo和LineTo的使用
import React from 'react'
import {
View,
ART
} from 'react-native'
export default class Line extends React.Component{
render(){
const path = ART.Path();
path.moveTo(1,1); //將起始點(diǎn)移動(dòng)到(1,1) 默認(rèn)(0,0)
path.lineTo(300,1); //連線到目標(biāo)點(diǎn)(300,1)
return(
<View style={this.props.style}>
<ART.Surface width={300} height={2}>
<ART.Shape d={path} stroke="#000000" strokeWidth={1} />
</ART.Surface>
</View>
)
}
}
虛線
了解strokeDash的參數(shù)刽肠，
[10,5] : 表示繪10像素實(shí)線在繪5像素空白溃肪，如此循環(huán)
[10,5,20,5] : 表示繪10像素實(shí)線在繪制5像素空白在繪20像素實(shí)線及5像素空白
import React from 'react'
import {
View,
ART
} from 'react-native'
export default class Line extends React.Component{
render(){
const path = ART.Path();
path.moveTo(1,1); //將起始點(diǎn)移動(dòng)到(1,1) 默認(rèn)(0,0)
path.lineTo(300,1); //連線到目標(biāo)點(diǎn)(300,1)
return(
<View style={this.props.style}>
<ART.Surface width={300} height={2}>
<ART.Shape d={path} stroke="#000000" strokeWidth={2} strokeDash={[10,10]} />
</ART.Surface>
</View>
)
}
}
折線
import React from 'react'
import {
View,
ART
} from 'react-native'
const {width,height} = Dimensions.get('window');
export default class Line extends React.Component{
render(){
// 構(gòu)建折線路徑
const brokenLine = Path()
.move(10,60)
.line(80, 23)
.line(60, -43)
.line(70, 20);
return(
<View style={this.props.style}>
<Surface width={width} height={100}>
<Shape d={brokenLine} stroke="#000000" strokeWidth={2} />
</Surface>
</View>
)
}
}
曲線
了解curve的用法
import React from 'react'
import {
View,
ART
} from 'react-native'
const {width,height} = Dimensions.get('window');
export default class Line extends React.Component{
render(){
// 構(gòu)建貝斯路徑
const curveLine = Path()
.move(10,60)
.curve(50, 23, 100, -23, 200, 0);
return(
<View style={this.props.style}>
<Surface width={width} height={100}>
<Shape d={curveLine} stroke="#000000" strokeWidth={2} />
</Surface>
</View>
)
}
}
矩形
了解close()的使用，close的意思是創(chuàng)建一個(gè)密閉的路徑音五。首先通過(guò)lineTo繪制三條邊惫撰，在使用close鏈接第四條邊。fill做顏色填充
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Shape, Path} = ART;
export default class Rect extends React.Component{
render(){
const path = new Path()
.moveTo(1,1)
.lineTo(1,99)
.lineTo(99,99)
.lineTo(99,1)
.close();
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Shape d={path} stroke="#000000" fill="#892265" strokeWidth={1} />
</Surface>
</View>
)
}
}
圓
了解arc(x,y,radius)的使用, 終點(diǎn)坐標(biāo)距離起點(diǎn)坐標(biāo)的相對(duì)距離
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Shape, Path} = ART;
export default class Circle extends React.Component{
render(){
const path = new Path()
.moveTo(50,1)
.arc(0,99,25)
.arc(0,-99,25)
.close();
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Shape d={path} stroke="#000000" strokeWidth={1}/>
</Surface>
</View>
)
}
}
文本
了解font屬性的使用躺涝，規(guī)則是“粗細(xì) 字號(hào) 字體”
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Text, Path} = ART;
export default class ArtText extends React.Component{
render(){
return(
<View style={this.props.style}>
<Surface width={200} height={100}>
<Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC" path={new Path().moveTo(40,40).lineTo(99,10)} >Hello World</Text>
</Surface>
</View>
)
}
}
扇形
注意這里封裝了一個(gè)Wedge組件厨钻，內(nèi)部還是使用arc做路徑繪制，感興趣的同學(xué)可以閱讀一下代碼
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface} = ART;
import Wedge from './Wedge'
export default class Fan extends React.Component{
render(){
return(
<View style={this.props.style}>
<Surface width={100} height={100}>
<Wedge
outerRadius={50}
startAngle={0}
endAngle={60}
originX={50}
originY={50}
fill="blue"/>
</Surface>
</View>
)
}
}
圖層
了解Group的使用
import React from 'react'
import {
View,
ART
} from 'react-native'
const {Surface, Shape,Text, Path,Group} = ART;
export default class GroupTest extends React.Component{
render(){
const pathRect = new Path()
.moveTo(1,1)
.lineTo(1,99)
.lineTo(99,99)
.lineTo(99,1)
.close();
const pathCircle = new Path()
.moveTo(50,1)
.arc(0,99,25)
.arc(0,-99,25)
.close();
const pathText = new Path()
.moveTo(40,5)
.lineTo(40,99);
return(
<View>
<Surface width={100} height={100}>
<Group>
<Shape d={pathRect} stroke="#000000" fill="#000000" strokeWidth={1}/>
<Shape d={pathCircle} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={1}/>
<Text strokeWidth={1} strokeDash={[2,1,2,1]} stroke="#000" font="bold 30px Heiti SC" path={pathText} >Swipe</Text>
</Group>
</Surface>
</View>
)
}
}
以上整理坚嗜，希望能幫助到有需要的同學(xué)夯膀，加油共勉！
