序文
前のセクションでは、同じ振幅曲線の変動の実現を紹介しました。このセクションでは、次のレンダリングに示す曲線の実現原理とコード実現プロセスを紹介します。
- まず、要件を正確に分析し、要件のおおよその実現アイデアを明確にした後、要件は途中で実現されました。
分析する
1.アニメーションは定期的ですか？
- 振幅が規則的に増減する正弦関数であると判断されます。規則性がないと実現できません。
2.曲線の機能的表現は何ですか？
- 正弦関数の式y=Asin（ωx+φ）、振幅が規則的に増減する正弦関数は何ですか？、明示的な関数式が必要です
アイデア
- 曲線関数の式を決定することにより、増加および減少する静的曲線を描画します
- 曲線の変動は、静的曲線の機能のいくつかのパラメータを変更することによって実現されます
労働者が良い仕事をしたいのなら、彼は最初に彼の道具を研ぐ必要があります
関数のより直感的な画像表現だけでなく、アニメーション効果をデバッグするためのパラメータを設定できるツールをお勧めします
それは本当に家の旅行のための良い薬であり、殺す*殺す*
曲線の表現
数学がキャンパスに残っているのは残念ですが、曲線の形は以前に見たような感じです。システム内の信号と搬送波信号のように感じます。上記のツールを計算すると、最終的な式は次のようになります。実際には2つの正弦関数の積
- f（x）= A * sin（b * x）* sin（c * x）
曲線図
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;
}
复制代码
- サンプリングポイント[x1、x2、x3、....]後
funcSquaredSinxのy値を計算しますpath.quadraticBezierTo(x1, y1, x2, y2)サンプリングポイントで接続し、最後に曲線を描きます
曲線波効果
まず、曲線に変動効果を持たせるにはどうすればよいかという問題を考える必要があります。
- 同じ振幅の曲線は、キャンバス内を移動して曲線の変動を実現できますが、ここでは絶対に適していません。
- パスを描画するためのサンプリングポイントリンクです。サンプリングポイントのy値を変更するだけで、関数から
funcSquaredSinx開始する必要があります。
正弦関数
y=A sin(ωx+φ)のはによって決定されるため、曲線を移動するには中心φ制御するだけで済みます。次のようなツールを使用してデモンストレーションしますfuncSquaredSinxsin(3 * pi * x / 400 + φ)φ
曲線変動のコード実装
Animation *repaint関数式の変更を渡す必要があります
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;
}
复制代码
- アニメーションは絶えず再描画され、
yサンプリングポイントの値は絶えず変化し、パスは絶えず変化し、各フレームのパスは徐々に変化し、アニメーションが生成されます- Canvasは複数の曲線を描くことができます。3つの曲線の初期位相と振幅は異なります。各線の太さと色をカスタマイズして、最初の画像の効果を生み出すことができます。
要約する
- アドバンテージ
- 任意のカーブダイナミック効果を実現できます
- グラデーションカラーをサポート
- 欠点
- パスを絶えず再描画します。これは、キャンバスの移動よりもパフォーマンスが低下しますが、許容範囲内です。
曲線を描く2つの方法
- 固定小数点位置、固定パス描画、移動アートボードキャンバス
- ポイントの位置を更新し、常にパスを再描画し、アニメーションを生成します
将来的には、ソースコードがgithubにリリースされるか、プラグインがdart pubにリリースされる予定ですので、ご期待ください。
未经作者授权，禁止转载