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

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

1.自带隐式动画组件

import 'package:flutter/material.dart';

class AnimatedRotationWidget extends StatefulWidget {

  var turns = 0.0;

  AnimatedRotationWidget({Key? key,required this.turns}) : super(key: key);

  @override
  State<AnimatedRotationWidget> createState() => _AnimatedRotationWidgetState();
}

class _AnimatedRotationWidgetState extends State<AnimatedRotationWidget> {

  @override
  Widget build(BuildContext context) {
    return  AnimatedRotation(
        duration:const Duration(milliseconds: 500),
        turns: widget.turns,
        child:const FlutterLogo(size: 100)
    );
  }
}

2.自定义隐式动画

import 'package:flutter/material.dart';

class RotationTweenWidget extends StatefulWidget {

  const RotationTweenWidget({Key? key}) : super(key: key);

  @override
  State<RotationTweenWidget> createState() => _RotationTweenWidgetState();
}

class _RotationTweenWidgetState extends State<RotationTweenWidget> with SingleTickerProviderStateMixin {

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


  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
        tween: Tween<double>(begin:0.0, end: 1.0),
        duration:const Duration(milliseconds: 500),
        builder: (context, value, child) {
          return Transform.rotate(
            angle: value * 360.0,
            child: child,
          );
        },
        child:const FlutterLogo(size: 100)
    )
    ;
  }
}

3.自带显式动画组件

import 'package:flutter/material.dart';

class RotationTransitionWidget extends StatefulWidget {

  const RotationTransitionWidget({Key? key}) : super(key: key);

  @override
  State<RotationTransitionWidget> createState() => _RotationTransitionWidgetState();
}

class _RotationTransitionWidgetState extends State<RotationTransitionWidget> with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    )..repeat(reverse: false);
    _animation = Tween<double>(begin: 0.0, end: 90.0).animate(_controller)
    ..addStatusListener((status) {

    });
    _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
        turns:_animation,
      child: const FlutterLogo(size: 100)
    );
  }
}

4.自定义显式动画

import 'package:flutter/material.dart';

class RotationAnimatedBuilderWidget extends StatefulWidget {

  const RotationAnimatedBuilderWidget({Key? key}) : super(key: key);

  @override
  State<RotationAnimatedBuilderWidget> createState() => _RotationAnimatedBuilderWidgetState();
}

class _RotationAnimatedBuilderWidgetState extends State<RotationAnimatedBuilderWidget> with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..repeat(reverse: false);
    _animation = Tween<double>(begin: 0.0, end: 360.0).animate(_controller);
    _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.rotate(
            angle: _animation.value,
            child:const FlutterLogo(size: 100)
        );
      },
    );
  }
}

5.自定义旋转动画组件

import 'package:flutter/material.dart';

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

  final double angle;
  final Widget child;

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

class _CustomAnimatedRotateState
    extends AnimatedWidgetBaseState<CustomAnimatedRotate> {

  Tween<double>? _angle;

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _angle?.evaluate(animation) ?? widget.angle,
      child: widget.child,
    );
  }

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

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