34、Flutter之组件过度动画

34、Flutter之组件过度动画

Widget属性发生变化时会执行过渡动画的组件统称为”动画过渡组件“，而动画过渡组件最明显的一个特征就是它会在内部自管理AnimationController。我们知道，为了方便使用者可以自定义动画的曲线、执行时长、方向等，在前面介绍过的动画封装方法中，通常都需要使用者自己提供一个AnimationController对象来自定义这些属性值。但是，如此一来，使用者就必须得手动管理AnimationController，这又会增加使用的复杂性。因此，如果也能将AnimationController进行封装，则会大大提高动画组件的易用性。

自定义动画过渡组件

我们要实现一个AnimatedDecoratedBox，它可以在decoration属性发生变化时，从旧状态变成新状态的过程可以执行一个过渡动画。根据前面所学的知识，我们实现了一个AnimatedDecoratedBox1组件：

/// @Author wywinstonwy
/// @Date 2022/1/16 10:15 上午
/// @Description: 
import "package:flutter/material.dart";class AnimatedDecoratedBox1 extends StatefulWidget {final BoxDecoration decoration;final Widget child;final Duration duration;final Curve ?curve;final Duration? reverseDuration;const AnimatedDecoratedBox1({required this.decoration,required this.child,required this.duration,this.verseDuration});@override_AnimatedDecoratedBox1State createState() => _AnimatedDecoratedBox1State();
}class _AnimatedDecoratedBox1State extends State<AnimatedDecoratedBox1> with SingleTickerProviderStateMixin{AnimationController get controller=>_controller;late AnimationController _controller;late Animation<double> _animation;late DecorationTween _tween;@overridevoid initState() {// TODO: implement initStatesuper.initState();_controller = AnimationController(duration: widget.duration,reverseDuration: verseDuration,vsync: this);_tween = DecorationTween(begin: widget.decoration);_updateCurve();}void _updateCurve(){_animation = CurvedAnimation(parent: _controller, curve: widget.curve!);}@overridevoid didUpdateWidget(covariant AnimatedDecoratedBox1 oldWidget) {super.didUpdateWidget(oldWidget);if(widget.curve != oldWidget) _updateCurve();_controller.duration = widget.duration;_verseDuration = verseDuration;//正在执行过度动画if(widget.decoration !=(_d??_tween.begin)){_tween..begin =_tween.evaluate(_animation)..end = widget.decoration;_controller..value=0.0..forward();}}@overrideWidget build(BuildContext context) {return AnimatedBuilder(builder: (BuildContext context, Widget? child) {return DecoratedBox(decoration: _tween.animate(_animation).value);},animation: _animation,child:widget.child,);}@overridevoid dispose() {_controller.dispose();super.dispose();}}

下面我们来使用AnimatedDecoratedBox1来实现按钮点击后背景色从蓝色过渡到红色的效果：

class MyExcessiveAnimation extends StatefulWidget {const MyExcessiveAnimation({Key? key}) : super(key: key);@override_MyExcessiveAnimationState createState() => _MyExcessiveAnimationState();
}class _MyExcessiveAnimationState extends State<MyExcessiveAnimation> {Color _decorationColor = Colors.blue;var duration = Duration(seconds: 1);// Curve curve = CurvedAnimation(parent: ) as Curve;// Tween doubleTween =  Tween<double>(begin: -200.0, end: 0.0);@overrideWidget build(BuildContext context) {return Scaffold(appBar: getAppBar("组件过度动画"),body: Column(children: [ElevatedButton(onPressed: (){setState(() {_decorationColor = d;});}, child: const Text('测试')),Container(height: 44,width: 200,child: AnimatedDecoratedBox1(decoration: BoxDecoration(color: _decorationColor),child: ElevatedButton(onPressed: (){setState(() {_decorationColor = d;});},child: const Text('AnimatedDecoratedBox',style: TextStyle(color: Colors.black,fontSize: 14),)),duration: duration,curve: Curves.linear,),)],),);}
}

点击后，按钮背景色会从蓝色向红色过渡，上图是过渡过程中的一帧，有点偏紫色，整个过渡动画结束后背景会变为红色。 

demo完整代码：flutter_demo: flutter组件测试学习demo