Flutter，Transform.scale with Duration？

Question

您好，我正在寻找一个示例Transform.scale与持续时间(毫秒: 300..)

我可以看一个例子吗？

我已经搜索过了，没有例子

Answer 1

Flutter中有两种动画:隐式动画和显式动画。在您的例子中，您似乎想要一个隐式的小部件来动态地改变某些东西的比例。幸运的是，有一个预制的小部件，叫做AnimatedScale。如果这符合您的需要，您应该更喜欢使用该小部件。如果没有，例如，如果你想应用其他花哨的转换，你可以尝试使用带有TweenAnimationBuilder的Transform小部件来保持“隐式动画”。通过这种方式，您可以避免处理AnimationController，并且可以使您的代码简洁。

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

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