React Native-贝塞尔曲线实现波浪效果

一、背景

项目需要开发一个自定义组件，需要有波浪流动的效果，准备使用贝塞尔曲线作为模型来实现，发现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

六、源码

查看源码点击这里