Flutter学习之路->缩放动画的5种实现方式

冲啊 呼叫呼叫 想做缩放动画怎么做 下面记录了5种思路

1.自带隐式动画组件

import 'package:flutter/material.dart';

class ScaleAnimatedScale extends StatefulWidget {

  bool big = true;

  ScaleAnimatedScale({Key? key,required this.big}) : super(key: key);

  @override
  State<ScaleAnimatedScale> createState() => _ScaleAnimatedScaleState();
}

class _ScaleAnimatedScaleState extends State<ScaleAnimatedScale> {

  @override
  Widget build(BuildContext context) {
    return AnimatedScale(
        duration:const  Duration(milliseconds: 500),
        scale: widget.big ? 1.0 : 0.5,
        child:const FlutterLogo(size: 100,)
    );
  }
}

2.自定义隐式动画

import 'package:flutter/material.dart';

class ScaleTweenWidget extends StatefulWidget {

  bool big = true;

  ScaleTweenWidget({Key? key,required this.big}) : super(key: key);

  @override
  State<ScaleTweenWidget> createState() => _ScaleTweenWidgetState();
}

class _ScaleTweenWidgetState extends State<ScaleTweenWidget> with SingleTickerProviderStateMixin {

  @override
  void initState() {
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
        tween: Tween<double>(begin:widget.big ? 0.5 : 1.0, end: widget.big ? 1.0 : 0.5),
        duration:const Duration(milliseconds: 500),
        builder: (context, value, child) {
          return Transform.scale(
            scale: value,
            child: child,
          );
        },
        child:const FlutterLogo(size: 100)
    )
    ;
  }
}

3.自带显式动画组件

class ScaleTransitionWidget extends StatefulWidget {

  bool big = true;

  ScaleTransitionWidget({Key? key,required this.big}) : super(key: key);

  @override
  State<ScaleTransitionWidget> createState() => _ScaleTransitionWidgetState();
}

class _ScaleTransitionWidgetState extends State<ScaleTransitionWidget> with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.5, end: 1.0).animate(_controller);

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    if (widget.big) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
    return ScaleTransition(
        scale: _animation,
        child:const FlutterLogo(size: 100)
    );
  }
}

4.自定义显式动画

import 'package:flutter/material.dart';

class ScaleAnimatedBuilderWidget extends StatefulWidget {

  bool big = true;

  ScaleAnimatedBuilderWidget({Key? key,required this.big}) : super(key: key);

  @override
  State<ScaleAnimatedBuilderWidget> createState() => _ScaleAnimatedBuilderWidgetState();
}

class _ScaleAnimatedBuilderWidgetState extends State<ScaleAnimatedBuilderWidget> with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.5, end: 1.0).animate(_controller);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    if (widget.big) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.scale(
            scale: _animation.value,
            child:const FlutterLogo(size: 100)
        );
      },
    );
  }
}

5.自定义缩放动画组件

import 'package:flutter/material.dart';

class CustomAnimatedScale extends ImplicitlyAnimatedWidget {
  const CustomAnimatedScale(this.child, {
    Key? key,
    required this.scale,
    required Duration duration,
    Curve curve = Curves.linear,
    VoidCallback? onEnd,
  }) : super(key: key, duration: duration, curve: curve, onEnd: onEnd);

  final double scale;
  final Widget child;

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

class _CustomAnimatedOpacityState
    extends AnimatedWidgetBaseState<CustomAnimatedScale> {

  Tween<double>? _scale;

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: _scale?.evaluate(animation) ?? widget.scale,
      child: widget.child,  // 使用新增的 child 属性
    );
  }

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _scale = visitor(_scale, widget.scale,
            (dynamic value) => Tween<double>(begin: value as double)) as Tween<double>?;
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭