Flutter CustomPaint draws sound wave curve (2)

foreword

The previous section introduced the realization of the fluctuation of the same amplitude curve . In this section, we introduce the realization principle and code realization process of the curve shown in the following renderings.

• First of all, after having an exact analysis of the requirements, and clarifying the approximate realization ideas of the requirements, then the requirements have been realized halfway.

analyze

1. Is the animation regular?

• It is determined to be a sinusoidal function with a regularly increasing and decreasing amplitude . If there is no regularity, it cannot be realized.

2. What is the functional expression of the curve?

• The expression y=A sin(ωx+φ) of the sine function, what is the sine function whose amplitude increases and decreases regularly? , requires explicit function expressions

ideas

1. By determining the curve function expression, draw an increasing and decreasing static curve
2. The fluctuation of the curve is realized by changing some parameters of the function of the static curve

If a worker wants to do a good job, he must first sharpen his tools

Recommend a tool, not only a more intuitive image expression of functions, but also can set parameters to debug animation effects

• www.desmos.com/calculator

It is really a good medicine for home travel, killing *killing *

expression of the curve

It's a pity that mathematics has stayed on campus, but the shape of the curve feels like I've seen it before. It feels like a signal and a carrier signal in the system . After the calculation of the above tools, the final expression is actually the product of two sine functions

• f(x) = A * sin(b * x) * sin(c * x)

curve drawing

 void paint(Canvas canvas, Size size) {
    // 获取采样点
    initPoints();
    // 画笔
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;
    // 路径
    Path path = Path();
    canvas.translate(0, size.height / 2);
    // 通过点确定曲线路径
    for (var i = 1; i < xAliax.length - 1; i++) {
      double x1 = xAliax[i];
      double y1 = funcSquaredSinx(x1);
      double x2 = (xAliax[i] + xAliax[i + 1]) / 2;
      double y2 = (y1 + funcSquaredSinx(xAliax[i + 1])) / 2;
      path.quadraticBezierTo(x1, y1, x2, y2);
    }
    // 画布绘制
    canvas.drawPath(path, paint);
  }
复制代码

   //曲线函数表达式
   double funcSquaredSinx(double x) {
    double p = 30 * sin(3 * pi * x / 400) * sin(x * pi / 400);
    return p;
  }
复制代码

• Sampling points [x1,x2,x3,....] funcSquaredSinxCalculate the y value after
• path.quadraticBezierTo(x1, y1, x2, y2)Connected by sampling points, and finally draw a curve

Curve wave effect

First of all, we need to think about a question, how can we make the curve achieve the fluctuation effect?

• Curves with the same amplitude can move through canvas to realize curve fluctuations , which are definitely not suitable here.
• We are the sampling point link to draw the path, only to change the y value of the sampling point, we need to funcSquaredSinxstart with the function

y=A sin(ωx+φ)The translation of the sine function is φdetermined by , so you only need to control funcSquaredSinxthe sin(3 * pi * x / 400 + φ)center move the φcurve. Demonstrate with tools as follows

Code Implementation of Curve Fluctuation

• Just need us to pass in Animation *repaint Change the function expression

   Tween(begin: 0.0, end: 1.0).animate(_controller)
   //曲线函数表达式
   double funcSquaredSinx(double x) {
    double p = 
    30 * sin(3 * pi * x / 400 - 100 * repaint.value) * sin(x * pi / 400);
    return p;
  }
复制代码

• The animation is constantly redrawn, the yvalue of the sampling point is constantly changing, the path is constantly changing, the path of each frame is gradually changed, and the animation is generated
• Canvas can draw multiple curves. The initial phase and amplitude of the three curves are different. You can customize the thickness and color of each line to produce the effect of the first image.

Summarize

• advantage
  • Any curve dynamic effect can be realized
  • Support gradient color
• shortcoming
  • Constantly redrawing the path, which consumes more performance than canvas movement, but is within the acceptable range

Two ways to draw the curve

1. Fixed point position, fixed path drawing, moving artboard canvas
2. Refresh the position of the point, constantly redraw the path, and generate animation

In the future, the source code will be released to github or a plugin will be released to dart pub , so stay tuned

未经作者授权，禁止转载