Flutter动画DecoratedBoxTransition详解

2019-10-2411:37:28APP与小程序开发Comments2,970 views字数 4243阅读模式

控件介绍

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

构造函数

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

使用方法

1、封装动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17059.html

我们可以将常用属性包装成一个控件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17059.html

  • 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、控制动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17059.html

  • 动画属性值的变化需要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、监听动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17059.html

  • 通过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();}}

效果图

Flutter动画DecoratedBoxTransition详解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17059.html

源代码

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,),),);}}
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17059.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/17059.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定