1

いくつかのアニメーションをプログラムしようとしていますが、Future が Dart でどのように機能するかを理解するのに苦労しています。

主な問題は、アニメーション自体が非同期プロセスであり、いくつかのポイントをチェーンしようとすると、それらが積み重なり、スプライトが最後のポイントに直接移動することです。私が見たすべての例は、関数が値を返すときに機能しますが、アニメーションを扱う場合はそうではありません。

次の動きをトリガーするために、アニメーションが終了したことを検出できるようにしたいのですが、これまでのところあまり成功していません。

これが私のコードです：

class MovingThing {
  String         name;
  DivElement     sprite    = new DivElement();

  MovingThing(this.name){
    sprite.id   = name;
    sprite.text = name;
    sprite.style..width      = "30px"
                ..height     = "30px"
                ..border     = "1px solid black"
                ..position   = "absolute"
                ..transition = "all 2000ms ease-in-out";
    querySelector("body").children.add(sprite);
  }

  Future move(Point p) {
    sprite.style..top  = p.y.toString() + "px"
                ..left = p.x.toString() + "px";

    return Future.wait([sprite.onTransitionEnd.first]);
  }
}

main () {
  List<Point> points = [
    new Point(20, 20)
    , new Point(200, 20)
    , new Point(20, 200)
    , new Point(100, 100)
  ];

  MovingThing mt = new MovingThing("MT");
  Future.forEach(points, (Point p) => mt.move(p));
}
4

1 に答える 1

1

私はいくつかのこと

  • Future.wait()onTransitionEndが発射されたときではなく、すぐに戻ります。
  • Future.wait複数を待機するためのものであるFutureため、List パラメータです。return sprite.onTransitionEnd.first;代わりにこの行を使用できます。
  • アクションを追加する必要がありますmt.move(p).then((v) => doThisAfterTransitionEnd);
  • 私はあなたのコードを試しonTransitionEndましたが、解雇されませんでした。

完璧ではありませんが、開始方法を示す必要があります。

new Future()アニメーションを連鎖させないように、イベント ループに時間を与えるためにのみ使用されます。アニメーションの次の繰り返しは、イベントから始まりますonSubscriptionEnd。

import 'dart:html';
import 'dart:async';

class MovingThing {
  String         name;
  DivElement     sprite    = new DivElement();
  List<Point>    points;

  MovingThing(this.name){
    sprite.id   = name;
    sprite.text = name;
    sprite.style
      ..top        = "30px"
      ..left       = "30px"
      ..width      = "30px"
      ..height     = "30px"
      ..border     = "1px solid black"
      ..position   = "absolute"
      ..transition = "all 1.5s ease-in-out";

    document.body.children.add(sprite);
  }

  void move(int idx) {

    if(idx >= points.length) {
      return;
    } else {
      var f = sprite.onTransitionEnd.first.then((TransitionEvent e) {
        new Future(() {
        print('transitionEnd$idx');
        move(idx + 1);
        });
      });

      sprite.style
      ..top  = '${points[idx].x}px'
      ..left = '${points[idx].y}px';
      sprite.text = '$idx';

    }
  }
}

main () {
  List<Point> points = [
    new Point(120, 120)
    , new Point(200, 20)
    , new Point(20, 200)
    , new Point(100, 100)
    , new Point(150, 30)
    , new Point(30, 150)
    , new Point(20, 20)
    , new Point(120, 120)
  ];

  MovingThing mt = new MovingThing("MT");
  mt.points = points;
  new Future(() => mt.move(0)); 
}
于 2014-01-24T09:47:53.820 に答える