Flutter 在项目中使用动画(不使用包)

Flutter 在项目中使用动画(不使用包)

前言

动画对于 web 和移动应用程序都非常重要。但是在移动应用程序中不应该使用夸张的动画。简单但是很多动画使你的应用程序更好用。以至于当你点击一个按钮时，一种平滑的感觉或者页面过渡都会影响到你。

正文

1 按下按钮柔软的感觉

class _CustomButtonState extends State<CustomButton>
    with SingleTickerProviderStateMixin {
   
  late double _scale;
  late AnimationController _controller;

  @override
  void initState() {
   
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 350),
      lowerBound: 0.0,
      upperBound: 0.1,
    )..addListener(() {
   
        setState(() {});
      });
  }

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

  void _tapDown(TapDownDetails details) {
   
    _controller.forward();
  }

  void _tapUp(TapUpDetails details) {
   
    _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
   
    _scale = 1 - _controller.value;
    return GestureDetector(
      onTap: widget.onTap,
      onTapDown: _tapDown,
      onTapUp: _tapUp,
      child: Transform.scale(
        scale: _scale,
        child:
1
2
3
4
5
6
7
8

首先，我们创建一个名为 CustomButton 的 StatewWidget。我们将在应用程序的任何地方使用这个按