dart - 毎秒ランダムにベジエ曲線を描く方法は? また、transition.dart を使用する

Question

アニメーションで毎秒変化するベジェ曲線をランダムに描く方法を知りたいです。

Answer 1

それは非常に具体的な質問です。一般的な答えは、グラフィックス クラスの各描画コマンドがオブジェクトを返すことです。このオブジェクトを使用して、後で描画コマンドのプロパティ (x、y、色、幅など) を変更できます。この例はあなたにアイデアを与えるはずです:

import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';

void main()  {

  var canvas = html.querySelector('#stage');
  var stage = new Stage(canvas, width: 800, height: 600);
  var renderLoop = new RenderLoop();
  renderLoop.addStage(stage);

  var shape = new Shape();
  var movetoCommand = shape.graphics.moveTo(100, 100);
  var bezierCommand = shape.graphics.bezierCurveTo(500, 200, 200, 500, 500, 500);
  var strokeCommand = shape.graphics.strokeColor(Color.Red, 15);
  stage.addChild(shape);

  stage.juggler.translation(500, 200, 5.0, Transition.sine).listen((v) {
    // change "controlX1" of the bezier draw command in an animation
    bezierCommand.controlX1 = v.toDouble();
  });

  stage.juggler.translation(200, 500, 5.0, Transition.sine).listen((v) {
    // change "controlX2" of the bezier draw command in an animation
    bezierCommand.controlX2 = v.toDouble();
  });

  stage.juggler.translation(15, 50, 15.0, Transition.sine).listen((v) {
    // change "width" of the stroke draw command in an animation
    strokeCommand.width = v.toDouble();
  });

}

ベジエ曲線の位置をランダムにする方法については説明しません。これは、上記の例の特殊なケースです。