6

ウィジェットを前面に「ポップ」して元に戻すアニメーションを作成しようとしています

import "package:flutter/material.dart";

class ScoreCounter extends StatefulWidget {
  @override
  _ScoreCounter createState() => new _ScoreCounter();
}

class _ScoreCounter extends State<ScoreCounter> with SingleTickerProviderStateMixin{
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..forward();
  }

  @override
  build(BuildContext context){
    return new AnimatedBuilder(
      animation: _controller,
      child: new Container(width: 200.0, height: 200.0, color: Colors.green),
      builder: (BuildContext context, Widget child) {
        //What to return that scales the element
      },
    );
  }
}

回転には、Transform を使用して Matrix を返します。しかし、スケーリング アニメーションを実現するには、何を返す必要がありますか?

前もって感謝します

4

3 に答える 3

2

別のアプローチは、一般化されたスケール変換を作成することです。

このメソッドをコンポーネントに追加するだけです

  Matrix4 scaleXYZTransform({
    double scaleX = 1.00,
    double scaleY = 1.00,
    double scaleZ = 1.00,
  }) {
    return Matrix4.diagonal3Values(scaleX, scaleY, scaleZ);
  }

これで、ウィジェットをラップすることで簡単にスケーリングできます。

 Transform(
          transform: scaleXYZTransform(scaleX: .5, scaleY: .5),
          child: Container(
            child: myAwesomeWidget(),
          ));
于 2021-07-30T14:29:38.763 に答える