Flutter

Question

我正在尝试创建一个动画，该动画 "pops" 小部件位于前面，return 位于前面

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

对于旋转，我会使用变换和 return 矩阵。但是我应该return 怎样才能完成缩放动画呢？

提前致谢

Answer 1

如果您要手动调整内容的大小，您可以在构建器函数中读取 controller.value 并使用它来设置容器的大小。

或者，您可以考虑为每个轴设置一对 SizeTransition。 Align class 也可能有用，因为您可以在每个维度中设置一个 sizeFactor。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.sort),
        onPressed: () {},
      ),
      body: new Center(
        child: new ScoreCounter(),
      ),
    );
  }
}

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: 1),
      vsync: this,
    )
      ..forward();
  }


  @override
  build(BuildContext context){
    return new AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        double size = _controller.value * 200.0;
        return new Container(width: size, height: size, color: Colors.green);
      },
    );
  }
}

Answer 2

作为替代方案，为特定 Widget 设置比例。

Transform.scale(
  scale: 1.0,
  child: Container(
    height: 200.0,
    width: 200.0,
    color: Colors.pink,
  ),
),

Answer 3

另一种方法是创建广义尺度变换。

只需将此方法添加到您的组件中

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

Flutter - 设置小部件的比例

Flutter - Set the scale of a widget

dart

另一种方法是创建广义尺度变换。