preface

The previous section introduced the wave realization of the curve with the same amplitude. In this section, we introduce the realization principle and code realization process of the curve shown in the effect picture

  • First of all to have a precise analysis of the demand, clear about the implementation of the idea of demand, then the demand has been achieved half

Analysis of the

1. Is the animation regular?

  • Is a sine function whose amplitude increases and decreases regularly. If it does not, it cannot be realized

2. What is the function expression of the curve?

  • The sine function y is equal to A sine (ωx+φ), what is the sine function with the amplitude increasing and decreasing regularly? , you need to specify the function expression

Train of thought

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

To do a good job, he must sharpen his tools

Recommend a tool, not only more intuitive function of the image expression, but also can set parameters debugging animation effect

  • www.desmos.com/calculator

It is a necessary medicine for home travel and killing

Expression of a curve

Unfortunately, mathematics was left in the campus, but the shape of the curve felt like a signal and the 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) {
    // Get the sample point
    initPoints();
    / / brushPaint paint = Paint() .. color = Colors.red .. strokeWidth =2
      ..style = PaintingStyle.stroke;
    / / path
    Path path = Path();
    canvas.translate(0, size.height / 2);
    // Determine the curve path through points
    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 painting
    canvas.drawPath(path, paint);
  }
Copy the code
   // The curve function expression
   double funcSquaredSinx(double x) {
    double p = 30 * sin(3 * pi * x / 400) * sin(x * pi / 400);
    return p;
  }
Copy the code
  • Sampling points [x1, x2, x3,… afterfuncSquaredSinxSo let’s figure out the y value
  • throughpath.quadraticBezierTo(x1, y1, x2, y2)The sample points are connected and a curve is drawn

Curve wave effect

The first thing we need to think about is, how do we make the curve wave?

  • The curve with the same amplitude fluctuates through canvas movement, which is definitely not suitable here
  • We are drawing the path of the sample point link, and only change the y value of the sample point required from the functionfuncSquaredSinxStarting with

The translation of sine function y=A sin(ωx+φ) is determined by φ, so it is only necessary to control φ of sin(3 * PI * x / 400 +φ) in funcsquare sin x to translate the curve. Use the tool to demonstrate the following

Curve wave code implementation

  • We just need to pass in Animation *repaintChanging a function expression
   Tween(begin: 0.0, end: 1.0).animate(_controller)
   // The curve function expression
   double funcSquaredSinx(double x) {
    double p = 
    30 * sin(3 * pi * x / 400 - 100 * repaint.value) * sin(x * pi / 400);
    return p;
  }
Copy the code
  • The animation is constantly redrawing, sampling pointsyThe value keeps changing,The path is constantly changing, gradually changing from frame to frame, generating animation
  • Canvas can draw multiple curves with different initial phases and amplitudes. The thickness and color of each line can be customized to produce the effect of the first picture


conclusion

  • advantages
    • Any curve dynamic effect can be achieved
    • Supporting gradient
  • disadvantages
    • Constantly redrawing the path is more expensive than canvas moving but within acceptable limits

Two ways of drawing curves

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

The source code will be posted to Github or released as a plug-in to dart Pub

Reprint without authorisation is prohibited