Matrix4Tweenが正しく動作していませんか？

Question

私はフラッターでゲームを作っていますが、この問題が見つかりました。 アニメーションの開始と終了は正しく行われますが、その間にあるものはすべて、hereのようにミスです。

最初のベクトルが正確に同じであっても、マトリックスアニメーションは何もしませんが、アニメーションが新しい状態で終了した後に表示されます。

だから、後の状態のコード（私は不要だと思いますが、あなたはより多くの情報が必要な場合、私はクラス全体を貼り付けることができ、すべてを削除）

class _GameState extends State<GameWindow> with TickerProviderStateMixin{ 
     static Matrix4 originalTransformation = new Matrix4.compose(
      new vector.Vector3(1.0, 1.0, 1.0), 
      new vector.Quaternion.euler(0.0, 0.0, 0.0), 
      new vector.Vector3(1.0, 1.0, 1.0)); 

     static Matrix4 animatedTransformation = new Matrix4.compose(
      new vector.Vector3(5.0, 260.0, 1.0), 
      new vector.Quaternion.euler(0.0, 1.0, -0.7), 
      new vector.Vector3(0.6, 0.6, 0.6)); 

     Matrix4 currentMatrix = originalTransformation; 

     @override 
     Widget build(BuildContext context){ 
      return new Scaffold(
       body: new Column(
        mainAxisSize: MainAxisSize.max, 
        mainAxisAlignment: MainAxisAlignment.end, 
        children: [ 
         new Container(
          // Applying default transformation matrix 
          transform: currentMatrix, 
          child: _buildSquares(), // Builds GridView with custom squares 
        ), 
         _getFooter(), // Footer 
        ], 
      ), 
     ); 
     } 


     @override 
     void initState(){ 
      // Init animation tween 
      animationTween = new Matrix4Tween(
       begin: originalTransformation, 
       end: animatedTransformation 
     ); 

      // Init animation controller 
      animationController = new AnimationController(
       vsync: this, 
       duration: new Duration(milliseconds: 800), 
     )..addListener((){ 
       this.setState((){ 
        currentMatrix = animationTween.evaluate(animationController); 
       }); 
      }); 
     } 

     _clickListener(){ 
      // Trigger animation 
      animationController.forward(from: 0.0); 

      if(_squares[_currentSquareIndex].state.isClicked()){ 
       _increaseScore(); 
      }else{ 
       _showGameOver(); 
      } 
     } 
    } 

クリックアニメーションに明らかにAで始まり、行列が変化しているではなく、滑らかな方法。なぜどんなアイデア？私は何か見落としてますか？

import 'package:flutter/material.dart'; 
import 'package:vector_math/vector_math_64.dart' as vector; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
     return new MaterialApp(
      title: 'Flutter Demo', 
      theme: new ThemeData(
       primarySwatch: Colors.blue, 
      ), 
      home: new MyHomePage(), 
     ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    MyHomePage({Key key}) : super(key: key); 

    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{ 
    static Matrix4 originalTransformation = new Matrix4.compose(
      new vector.Vector3(1.0, 1.0, 1.0), 
      new vector.Quaternion.euler(0.0, 0.0, 0.0), 
      new vector.Vector3(1.0, 1.0, 1.0)); 

    static Matrix4 animatedTransformation = new Matrix4.compose(
      new vector.Vector3(5.0, 260.0, 1.0), 
      new vector.Quaternion.euler(0.0, 1.0, -0.7), 
      new vector.Vector3(0.6, 0.6, 0.6)); 

    Matrix4 currentMatrix = originalTransformation; 
    AnimationController animationController; 
    Matrix4Tween animationTween; 

    @override 
    Widget build(BuildContext context) { 
     return new Scaffold(
      resizeToAvoidBottomPadding: true, 
      body: new Column(
       mainAxisSize: MainAxisSize.max, 
       mainAxisAlignment: MainAxisAlignment.center, 
       children: [ 
        new AnimatedBuilder(
         // Pass animation controller 
         animation: animationController, 
         builder: (BuildContext context, Widget child) => new Container(
          // Apply transformation 
          transform: animationTween.evaluate(animationController), 
          child: child, 
         ), 
         // Passing child argument 
         child: new GestureDetector(
          onTap: _onClick, 
          child: new Container(
           height: 400.0, 
           width: 400.0, 
           color: Colors.red, 
          ), 
         ), 
        ), 
       ], 
      ), 
     ); 
    } 

    _onClick() { 
     // Start animation 
     animationController.forward(from: 0.0); 
     return; 
    } 

    @override 
    void initState() { 
     super.initState(); 

     // Init tween for matrix 
     animationTween = new Matrix4Tween(
       begin: originalTransformation, 
       end: animatedTransformation 
     ); 

     // Init animation controller 
     animationController = new AnimationController(
      vsync: this, 
      duration: new Duration(milliseconds: 800), 
     ); 
    } 
} 

は編集：私は、リスナーを削除し、このようAnimatedBuilderにアニメーションを渡してみましたが、それはどちらか動作しませんでした1平方で例の作業

。

編集2：1つの正方形でこれの実例を追加しました。

Answer 1

AnimationをaddListenerの代わりにAnimatedBuilderに渡してください。これにより、持ち歩いている私的な状態の量が少なくなり、_buildSquares()の結果をchild引数として使用できるようになり、アニメーションが動くときにすべてのフレームのすべてを再計算する必要がなくなります。アニメーションの滑らかさが向上するはずです。

編集：下記の作業コードサンプルを追加しました。

編集2：私が経験していないバグが発生しているようですので、問題を提出してください。

編集3：issueがすでにマスターに修正されているようです。

import 'package:flutter/material.dart'; 
import 'package:vector_math/vector_math_64.dart' as vector; 

class HomeScreen extends StatefulWidget { 
    HomeScreenState createState() => new HomeScreenState(); 
} 

class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin { 

    AnimationController _controller; 

    @override initState() { 
    _controller = new AnimationController(
     vsync: this, duration: const Duration(milliseconds: 300)); 
    } 

    static Matrix4 originalTransformation = new Matrix4.compose(
    new vector.Vector3(1.0, 1.0, 1.0), 
    new vector.Quaternion.euler(0.0, 0.0, 0.0), 
    new vector.Vector3(1.0, 1.0, 1.0)); 

    static Matrix4 animatedTransformation = new Matrix4.compose(
    new vector.Vector3(5.0, 260.0, 1.0), 
    new vector.Quaternion.euler(0.0, 1.0, -0.7), 
    new vector.Vector3(0.6, 0.6, 0.6)); 


    Widget build(BuildContext context) { 
    return new Scaffold(
     floatingActionButton: new FloatingActionButton(
     child: new Icon(Icons.play_arrow), 
     onPressed:() => _controller.forward(from: 0.0), 
    ), 
     body: new Column(
     mainAxisSize: MainAxisSize.max, 
     mainAxisAlignment: MainAxisAlignment.start, 
     children: [ 
      new AnimatedBuilder(
      builder: (BuildContext context, Widget child) { 
       return new Container(
       color: Colors.red, 
       width: 100.0, 
       height: 100.0, 
       transform: new Matrix4Tween(
        begin: originalTransformation, 
        end: animatedTransformation 
       ).evaluate(_controller) 
      ); 
      }, 
      animation: _controller, 
     ), 
     ], 
    ), 
    ); 
    } 
} 

class ExampleApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     theme: new ThemeData(
     primarySwatch: Colors.teal, 
    ), 
     home: new HomeScreen(), 
     debugShowCheckedModeBanner: false, 
    ); 
    } 
} 

void main() { 
    runApp(new ExampleApp()); 
}