Flutter，Transform.scale with Duration？

Question

嗨，我正在寻找一个示例 Transform.scale with Duration(milliseconds: 300..)

我可以看看例子吗？

我搜索过没有例子

Answer 1

Flutter 中有两种动画：隐式和显式。 在您的情况下，您似乎想要一个隐式小部件来为某物的比例变化设置动画。 幸运的是，有一个为您准备的小部件，称为AnimatedScale 。 如果这适合您的需要，您应该更喜欢使用该小部件。 如果没有，例如，如果您想应用其他更高级的转换，您可以尝试将Transform小部件与TweenAnimationBuilder一起使用，以保持在“隐式动画”中。 这样您就可以避免处理AnimationController ，并且可以使您的代码简洁。

完整示例，将main.dart替换为以下代码以运行它。 单击该按钮将在 1.0x 和 5.0x 比例之间切换 Flutter 徽标：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _big = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            AnimatedScale(
              duration: Duration(seconds: 1),
              scale: _big ? 5.0 : 1.0,
              child: FlutterLogo(),
            ),
            ElevatedButton(
              child: Text('change size'),
              onPressed: () => setState(() => _big = !_big),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

你可以这样使用

class TransformWithDuration extends StatefulWidget {
  final Widget child;
  final void Function()? onTap;
  final void Function()? onLongTap;
  const TransformWithDuration({Key? key, required this.child, this.onTap, this.onLongTap}) : super(key: key);

  @override
  _TransformWithDurationState createState() => _TransformWithDurationState();
}

class _TransformWithDurationState extends State<TransformWithDuration>
    with TickerProviderStateMixin {
  double squareScaleA = 1;
  late AnimationController _controllerA;

  @override
  void initState() {
    _controllerA = AnimationController(
      vsync: this,
      lowerBound: 0.94,
      upperBound: 1.0,
      value: 1,
      duration: Duration(milliseconds: 200),
    );
    _controllerA.addListener(() {
      setState(() {
        squareScaleA = _controllerA.value;
      });
    });

    _controllerA.drive(CurveTween(curve: Curves.fastOutSlowIn));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        _controllerA.reverse();
        if (widget.onTap != null) widget.onTap!();
      },
      onTapDown: (dp) {
        _controllerA.reverse();
      },
      onTapUp: (dp) {
        Timer(Duration(milliseconds: 150), () {
          _controllerA.fling();
        });
      },
      onTapCancel: () {
        _controllerA.fling();
      },
      onLongPress: () {
        if (widget.onLongTap != null) widget.onLongTap!();
      },
      child: Transform.scale(
        scale: squareScaleA,
        child: widget.child,
      ),
    );
  }

  @override
  void dispose() {
    _controllerA.dispose();
    super.dispose();
  }
}