Flutter CustomPaint dibuja la curva de onda de sonido (2)

prefacio

La sección anterior introdujo la realización de la fluctuación de la misma curva de amplitud En esta sección, presentamos el principio de realización y el proceso de realización del código de la curva que se muestra en las siguientes representaciones.

• En primer lugar, después de tener un análisis exacto de los requisitos y aclarar las ideas aproximadas de realización de los requisitos, los requisitos se han realizado a la mitad.

analizar

1. ¿La animación es regular?

• Se determina que es una función sinusoidal con amplitud , si no hay regularidad no se puede realizar.

2. ¿Cuál es la expresión funcional de la curva?

• La expresión y=A sen(ωx+φ) de la función seno, ¿cuál es la función seno cuya amplitud crece y decrece regularmente? , requiere expresiones de funciones explícitas

ideas

1. Al determinar la expresión de la función de curva, dibuje una curva estática creciente y decreciente
2. La fluctuación de la curva se realiza cambiando algunos parámetros de la función de la curva estática.

Si un trabajador quiere hacer un buen trabajo, primero debe afilar sus herramientas

Recomendar una herramienta, no solo una expresión de funciones de imagen más intuitiva, sino que también puede establecer parámetros para depurar efectos de animación

• www.desmos.com/calculator

Realmente es una buena medicina para viajar a casa, matando *matando*

expresión de la curva

Es una pena que las matemáticas se hayan quedado en el campus, pero la forma de la curva se siente como si la hubiera visto antes. Se siente como una señal y una señal portadora en el sistema . Después del cálculo de las herramientas anteriores, la expresión final es en realidad el producto de dos funciones seno

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

dibujo de curvas

 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;
  }
复制代码

• Puntos de muestreo [x1,x2,x3,....] funcSquaredSinxCalcular el valor y después
• path.quadraticBezierTo(x1, y1, x2, y2)Conectado por puntos de muestreo, y finalmente dibujar una curva.

Efecto de onda de curva

En primer lugar, debemos pensar en una pregunta, ¿cómo podemos hacer que la curva logre el efecto de fluctuación?

• Las curvas con la misma amplitud pueden moverse a través del lienzo para realizar fluctuaciones de curvas , que definitivamente no son adecuadas aquí.
• Somos el enlace del punto de muestreo para dibujar la ruta, solo para cambiar el valor y del punto de muestreo, necesitamos funcSquaredSinxcomenzar con la función

y=A sin(ωx+φ)La traslación de la función seno está φdeterminada por , por lo que solo necesitas controlar funcSquaredSinxel sin(3 * pi * x / 400 + φ)centro mover la φcurva. Demostrar con herramientas de la siguiente manera

Implementación de código de fluctuación de curva

• Solo necesitamos que pasemos Animation *repaint Cambiar la expresión de la función

   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;
  }
复制代码

• La animación se vuelve a dibujar constantemente, el yvalor del punto de muestreo cambia constantemente, la ruta cambia constantemente, la ruta de cada cuadro cambia gradualmente y se genera la animación.
• Canvas puede dibujar múltiples curvas. La fase inicial y la amplitud de las tres curvas son diferentes. Puede personalizar el grosor y el color de cada línea para producir el efecto de la primera imagen.

Resumir

• ventaja
  • Se puede realizar cualquier efecto dinámico de curva.
  • Admite color degradado
• defecto
  • Redibujar constantemente la ruta, lo que consume más rendimiento que el movimiento del lienzo, pero está dentro del rango aceptable

Dos formas de dibujar la curva.

1. Posición de punto fijo, dibujo de ruta fija, lienzo de mesa de trabajo en movimiento
2. Actualizar la posición del punto, redibujar constantemente la ruta, generar animación

En el futuro, el código fuente se lanzará en github o se lanzará un complemento en dart pub , así que estad atentos.

未经作者授权，禁止转载