Flutter动画详解DecoratedBoxTransition

控件介绍

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

构造函数

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

用法

1.动画封装

常用属性可以打包到控件中

• child：表示从外部传入的元素，用 DecolatedBoxTransition 进行包裹
• decoration：表示从外部传入的动画外部。属性值更改通过检索其值来填充边框 child。
• position：表示边框动画的位置，可以是前景，也可以是背景。前景位置将被子元素

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来控制
• 设置其插值设备
• Done
  • 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,),),);}}