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(); 
      } 
     } 
    } 

于是就点击动画后明显开始和矩阵正在改变，但不是在顺利的方式。任何想法为什么？我错过了什么？

工作实例有一个方形：

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这样，但没有任何工作。

编辑2：增加了一个正方形的工作示例。

Answer 1

将您的Animation传递给AnimatedBuilder而不是致电addListener。这可以减少您携带的私有状态的数量，并允许您使用_buildSquares()的结果作为child参数，因此当动画点击时您不会重新计算每帧中的所有内容。它应该改善动画的平滑度。

编辑：添加了一个工作代码示例如下。

编辑2：听起来好像您遇到了我没有遇到的错误，所以请提出问题。

编辑3：听起来好像issue已经在master上修复了。

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()); 
}