Flutter动画DecoratedBoxTransition详解

控件介绍

1. DecoratedBoxTransition表示一个边框动画，可以通过控制器去控制动画边框值的改变，从而控制动画边框

构造函数

DecoratedBoxTransition({
    Key key,this.decoration,this.position,this.child,})

使用方法

1、封装动画

我们可以将常用属性包装成一个控件

• child：表示由外传递进来的元素，由DecoratedBoxTransition包裹
• decoration：表示由外传递进来的动画属性值的变化，通过获取其值，填充到child的边框上
• position：表示边框动画的位置，可以是前景位置或者是背景位置，前景位置会盖住child元素

classAnimatorTransitionextendsStatelessWidget{final Widget child;final Animation<Decoration> animation;AnimatorTransition({this.child,this.animation});@override
  Widget build(BuildContext context){returnCenter(
      child:DecoratedBoxTransition(
        position: DecorationPosition.background,
        decoration: animation,
        child:Container(
          child:this.child,),),);}}

2、控制动画

• 动画属性值的变化需要AnimationController来控制
• 通过CurvedAnimation设置其插值器
• 通过DecorationTween设置其值的变化范围

classWeWidgetStateextendsState<WeWidget>
    with SingleTickerProviderStateMixin {
    
  Animation<Decoration> _animation;
  AnimationController _controller;
  Animation _curve;@overridevoidinitState(){super.initState();
    _controller =AnimationController(
      duration:constDuration(milliseconds:3000),
      vsync:this,);
    _curve =CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    _animation =DecorationTween(
      begin:BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular()),
        color: Colors.red,),
      end:BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        color: Colors.green,),).animate(_curve);
    _controller.forward();}}

3、监听动画

• 通过addStatusListener监听动画状态的变化和通过addListener监听动画值的变化

classWeWidgetStateextendsState<WeWidget>
    with SingleTickerProviderStateMixin {
  Animation<Decoration> _animation;
  AnimationController _controller;
  Animation _curve;double _animationValue;
  AnimationStatus _state;@overridevoidinitState(){super.initState();
    _controller =AnimationController(
      duration:constDuration(milliseconds:3000),
      vsync:this,);
    _curve =CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    _animation =DecorationTween(
      begin:BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular()),
        color: Colors.red,),
      end:BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        color: Colors.green,),).animate(_curve)..addListener((){setState((){
          _animationValue = _animation.value;});})..addStatusListener((AnimationStatus state){if(state == AnimationStatus.completed){
          _controller.reverse();}elseif(state == AnimationStatus.dismissed){
          _controller.forward();}setState((){
          _state = state;});});
    _controller.forward();}}

效果图

源代码

import'package:flutter/';classDay11extendsStatelessWidget{@override
  Widget build(BuildContext context){returnMaterialApp(
      theme:ThemeData(
        primaryColor: Colors.white,),
      home:WeWidget(),);}}classWeWidgetextendsStatefulWidget{@override
  State<StatefulWidget>createState(){returnWeWidgetState();}}classWeWidgetStateextendsState<WeWidget>
    with SingleTickerProviderStateMixin {
  Animation<Decoration> _animation;
  AnimationController _controller;
  Animation _curve;

  Decoration _animationValue;
  AnimationStatus _state;@overridevoidinitState(){super.initState();

    _controller =AnimationController(
      duration:constDuration(milliseconds:3000),
      vsync:this,);
    _curve =CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    _animation =DecorationTween(
      begin:BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular()),
        color: Colors.red,),
      end:BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        color: Colors.green,),).animate(_curve)..addListener((){setState((){
          _animationValue = _animation.value;});})..addStatusListener((AnimationStatus state){if(state == AnimationStatus.completed){
          _controller.reverse();}elseif(state == AnimationStatus.dismissed){
          _controller.forward();}setState((){
          _state = state;});});
    _controller.forward();}@override
  Widget build(BuildContext context){returnScaffold(
      appBar:AppBar(
        title:Text("day11"),),
      body:_buildColumn(),);}

  Widget _buildColumn(){returnColumn(
      children:<Widget>[AnimatorTransition(
          child:FlutterLogo(
            style: FlutterLogoStyle.horizontal,
            size:200,),
          animation: _animation,),Text("动画值："+ _animationValue.toStringShort()),Text("动画状态："+ _state.toString()),],);}@overridevoiddispose(){
    _controller.dispose();super.dispose();}}classAnimatorTransitionextendsStatelessWidget{final Widget child;final Animation<Decoration> animation;AnimatorTransition({this.child,this.animation});@override
  Widget build(BuildContext context){returnCenter(
      child:DecoratedBoxTransition(
        position: DecorationPosition.background,
        decoration: animation,
        child:Container(
          child:this.child,),),);}}