一、背景
项目需要开发一个自定义组件，需要有波浪流动的效果，准备使用贝塞尔曲线作为模型来实现，发现ART这个库可以用来绘制各种曲线，于是就打算使用它了。
二、设计思路
2.1 曲线模型
利用二阶贝塞尔模型来模拟：不熟悉贝塞尔曲线的可以先了解一下这个模型，先看下图：
bezier.png
图中用了两端二阶贝塞尔曲线的组合（P1、P3分别是控制点），把它当做构成波浪组件的一个基本单位。根据控件宽度决定至少需要几个这样的单位。
2.2 动态效果
- 想要曲线动起来我可以动态改变控制点P1和P3的纵坐标
- 想要有波浪流动的效果可以不断横向移动组件来实现。
三、实现方式
3.1使用ART绘制贝塞尔曲线
3.1.1 导入ART库
import {
Dimensions, View, ART, Animated, Easing,
} from 'react-native';
const {
Surface, Shape, Path,
} = ART;
3.1.2 获取贝塞尔曲线对应的Path
/**
* 获取贝塞尔曲线路径
*/
_getBezierPath= (temp, controlY) => {
const { waveHeight } = this.props;
const startX = -4 * temp;
const startY = waveHeight * (1 - baseRatiio);
const number = ScreenWidth / temp + 1;
let speedStr = `M${startX} ${waveHeight} L${startX}
${startY}`;
for (let i = 0; i <= number; i++) {
speedStr += `Q${startX + (i * 4 + 1) * temp} ${startY
- controlY}, ${startX + (i * 4 + 2) * temp} ${startY}`;
speedStr += `Q${startX + (i * 4 + 3) * temp} ${startY
+ controlY}, ${startX + (i * 4 + 4) * temp} ${startY}`;
}
const path = new Path(speedStr);
// 形成闭合区域
path.lineTo(startX + (number * 4 + 4) * temp,
waveHeight).close();
return path;
}
Path按照svg矢量指令，参考这篇文章,我用到M（移动到），L（画线），Q（画曲线）三个指令。
坐标系的原点在控件左上角，为了让曲线底部形成闭合区域便于填充颜色，我先将起点移动到控件左下角，temp是1/4个基础波浪的宽，用来控制凹凸程度，从屏幕左边开始画起，number是基础波浪的个数，这里数量应当满足刚好超出屏幕一个（方便之后作移动效果），通过一个for循环将number个基础波浪全部画出，controlY动态变化的从而控制点的Y坐标也会变化，最后将指针移动到控件右下角形成闭合区域。
3.1.3 动态改变控制点纵坐标
// 让控制点的Y坐标动态变化
_changecontrolY= () => {
this.interval = setInterval(() => {
const { controlY, startY, up } = this.state;
let p = controlY;
const y = startY;
let up0 = up;
if (up) {
p = controlY + 0.5;
up0 = p <= 25;
} else {
p = controlY - 0.5;
up0 = p < 20;
}
this.setState({
controlY: p,
startY: y,
up: up0,
});
}, 100);
}
动态改变controlY的值，使控制点的纵坐标在一个区间内波动，造成起伏的效果。
3.1.4 定义平移动画
_startAnimation1 = () => {
const { baseX1: baseX } = this.state;
baseX.setValue(-4 * tempX1);
Animated.timing(baseX, {
toValue: 0, // 目标值
duration: 5000, // 动画时间
easing: Easing.linear, // 缓动函数
}).start(() => {
this._startAnimation1();
});
};
启动一个线性动画，其值是View距左的距离，从0到5000不停重复，也就让控件从左到右不断平移，因为屏幕左侧预置一个基础波浪，所以每次向右平移一个基础波浪的宽度，不断重复就形成波浪连续流动的效果。
3.1.5 渲染布局
render() {
const {
waveHeight, waveWidth, wave1Color, wave2Color,
} = this.props;
const { baseX1: baseX, baseX2, controlY } = this.state;
const _path1 = this._getBezierPath(tempX1, controlY / 2);
const _path2 = this._getBezierPath(tempX2, controlY);
return (
<View
style={{
overflow: 'hidden',
}}
>
<View
style={{
height: waveHeight,
width:
waveWidth + 4 * tempX1 > tempX2 ? tempX1 : tempX2,
}}
>
<Animated.View
style={{
height: waveHeight,
width: waveWidth + 4 * tempX1,
position: 'absolute',
left: baseX,
}}
>
<Surface
height={waveHeight}
width={waveWidth + 8 * tempX1}
>
<Shape d={_path1} fill={wave1Color} />
</Surface>
</Animated.View>
<Animated.View
style={[
{
height: waveHeight,
width: waveWidth + 4 * tempX2,
position: 'absolute',
left: baseX2,
},
]}
>
<Surface
height={waveHeight}
width={waveWidth + 8 * tempX2}
>
<Shape d={_path2} fill={wave2Color} />
</Surface>
</Animated.View>
</View>
</View>
);
}
为了更加深动我画了两个波浪（Surface）交错进行动画，只看其中一个即可，将生成的Path传入Shape即可实现波浪效果。通过改变left属性实现View的平移滑动，需要注意的是设置了样式{overflow: 'hidden'}，是为了解决iOS系统上子布局超出父布局的部分不被遮挡的问题。
四、使用方式
import MUWave from './MUWave';
...
<MyWave
waveHeight={200}
waveWidth={ScreenHeight} />
五、运行效果
wave.gif
