大家好，如果您还对动漫社区网站源码分享不太了解，没有关系，今天就由本站为大家分享动漫社区网站源码分享的知识，包括动漫社区 新闻的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
和尚前段时间自定义ACEStepper步进器时，在ACEStep中尝试过AnimatedCrossFade用于在两个Widget切换过度，简单实用，今天和尚重点学习一下并尝试相关隐式动画Widget；
AnimatedCrossFade淡入淡出动画
源码分析
constAnimatedCrossFade({\nKeykey,\n@requiredthis.firstChild,//首个展示Widget\n@requiredthis.secondChild,//第二展示Widget\nthis.firstCurve=Curves.linear,//首个Widget展示动画\nthis.secondCurve=Curves.linear,//第二Widget展示动画\nthis.sizeCurve=Curves.linear,//切换时尺寸动画\nthis.alignment=Alignment.topCenter,//对齐方式\n@requiredthis.crossFadeState,//切换状态(是否切换)\n@requiredthis.duration,//切换动画时长\nthis.reverseDuration,//切换反向动画时长\nthis.layoutBuilder=defaultLayoutBuilder,//Widget布局构造器\n})\n
分析源码可知，AnimatedCrossFade可以在指定时间内从一个Widget到另一个Widget的平滑过渡或反向过渡；其中切换状态和时长是必要属性；
案例尝试
和尚尝试一个基本的动画过程，两个方块之间进行切换；
returnGestureDetector(\nonTap:(){setState(()=>isChanged=!isChanged);},\nchild:Container(\nchild:AnimatedCrossFade(\nfirstChild:Container(width:100,height:100,color:Colors.purpleAccent.withOpacity(0.4)),\nsecondChild:Container(width:200,height:200,color:Colors.blueGrey.withOpacity(0.4)),\nduration:Duration(milliseconds:1500),\ncrossFadeState:isChanged?CrossFadeState.showSecond:CrossFadeState.showFirst)));\n
reverseDuration为切换反向动画时长；
reverseDuration:Duration(milliseconds:500),\n
firstCurve/secondCurve为两个Widget切换时动画效果；动画效果有多种，和尚不在此赘述；
firstCurve:Curves.fastOutSlowIn,\nsecondCurve:Curves.easeInExpo,\n
alignment为尺寸动画切换时对齐位置，当两个Widget大小不同时效果明显，和尚尝试了两种位置进行对比；
alignment:Alignment.bottomRight,\n\nalignment:Alignment.center,\n
sizeCurve为尺寸切换动画，当两个Widget大小不同时效果明显；
sizeCurve:Curves.easeInExpo,\n\nsizeCurve:Curves.fastOutSlowIn,\n
layoutBuilder为布局构造器，这个是和尚认为最值得研究的地方，构造器并不陌生，但在这里的作用却比较特殊，通过Stack将两个Widget层级叠放，底部Widget默认尺寸位置以上层Widget为基准，默认Position边距均为0.0；我们可以自定义调整动画起始位置；
//默认\nstaticWidgetdefaultLayoutBuilder(WidgettopChild,KeytopChildKey,WidgetbottomChild,KeybottomChildKey){\nreturnStack(\noverflow:Overflow.visible,\nchildren:<Widget>[\nPositioned(key:bottomChildKey,left:0.0,top:0.0,right:0.0,child:bottomChild),\nPositioned(key:topChildKey,child:topChild)\n]);\n}\n//调整Position位置\nlayoutBuilder:(topChild,topChildKey,bottomChild,bottomChildKey){\nreturnStack(children:<Widget>[\nPositioned(key:bottomChildKey,left:50.0,top:50.0,right:50.0,bottom:50.0,child:bottomChild),\nPositioned(key:topChildKey,child:topChild)\n]);\n}\n
[AnimatedCrossFade源码]()
AnimatedSwitcher切换动画
源码分析
constAnimatedSwitcher({\nKeykey,\nthis.child,\n@requiredthis.duration,//切换动画时长\nthis.reverseDuration,//反向切换动画时长\nthis.switchInCurve=Curves.linear,//切换显示时动画曲线\nthis.switchOutCurve=Curves.linear,//切换隐藏时动画曲线\nthis.transitionBuilder=AnimatedSwitcher.defaultTransitionBuilder,//Widget动画构造器\nthis.layoutBuilder=AnimatedSwitcher.defaultLayoutBuilder,//Widget布局构造器\n})\n
分析源码可知，AnimatedSwitcher更加灵活，可自由设置切换动画之间显示隐藏动画效果；当childWidget内容或Key在变更时，oldchild会执行隐藏动画，newchild会执行展现动画；
案例尝试
和尚尝试切换两个基本的方块，但刚开始切换动画时长和反向切换动画时长没有效果，两个Widget只有参数更新，动画效果未执行；和尚尝试加入Key区分之后正常；
returnGestureDetector(\nonTap:()=>setState(()=>isChanged=!isChanged),\nchild:AnimatedSwitcher(\nduration:Duration(milliseconds:500),\nreverseDuration:Duration(milliseconds:1500),\nchild:isChanged\n?Container(key:UniqueKey(),color:Colors.purpleAccent.withOpacity(0.4),width:100,height:100)\n:Container(key:UniqueKey(),color:Colors.green.withOpacity(0.4),width:150,height:120)));\n
和尚在切换过程中尝试不同的显示隐藏动画效果；
switchInCurve:Curves.easeInCubic,\nswitchOutCurve:Curves.fastLinearToSlowEaseIn,\n\nswitchInCurve:Curves.easeInExpo,\nswitchOutCurve:Curves.fastOutSlowIn,\n
transitionBuilder为动画构造器，可以自定义动画效果；和尚尝试了两种简单的缩放动画和平移动画，暂未尝试复杂动画；且动画属性与显示隐藏的switchInCurve/switchOutCurve动画曲线共同展示效果；
//缩放动画效果\nreturnGestureDetector(\nonTap:()=>setState(()=>isChanged=!isChanged),\nchild:AnimatedSwitcher(\nduration:Duration(milliseconds:500),\nreverseDuration:Duration(milliseconds:1500),\nswitchInCurve:Curves.easeInCubic,\nswitchOutCurve:Curves.fastLinearToSlowEaseIn,\nchild:isChanged\n?Container(key:UniqueKey(),color:Colors.purpleAccent.withOpacity(0.4),width:100,height:100)\n:Container(key:UniqueKey(),color:Colors.green.withOpacity(0.4),width:150,height:120),\ntransitionBuilder:(Widgetchild,Animation<double>animation){\nreturnScaleTransition(scale:animation,child:child);\n}));\n\n//平移动画效果\nreturnGestureDetector(\nonTap:()=>setState(()=>isChanged=!isChanged),\nchild:AnimatedSwitcher(\nduration:Duration(milliseconds:500),\nreverseDuration:Duration(milliseconds:1500),\nswitchInCurve:Curves.easeInExpo,\nswitchOutCurve:Curves.fastOutSlowIn,\nchild:isChanged\n?Container(key:UniqueKey(),color:Colors.purpleAccent.withOpacity(0.4),width:100,height:100)\n:Container(key:UniqueKey(),color:Colors.green.withOpacity(0.4),width:150,height:120),\ntransitionBuilder:(Widgetchild,Animation<double>animation){\nreturnSlideTransition(child:child,position:Tween<Offset>(begin:Offset(1,0),end:Offset(0,0)).animate(animation));\n}));\n
child中old/newWidget一般是以Stack层级存储，在动画过程中两个Widget均要展示，可以通过layoutBuilder布局构造器进行自定义；和尚尝试调整对齐方式和只展示currentWidget动画效果；
//调整层级对齐方式\nlayoutBuilder:(WidgetcurrentChild,List<Widget>previousChildren){\nreturnStack(children:<Widget>[\n…previousChildren,\nif(currentChild!=null)currentChild\n],alignment:Alignment.bottomRight);\n}\n\n//只展示当前Widget动画效果\nlayoutBuilder:(WidgetcurrentChild,List<Widget>previousChildren){\nreturncurrentChild;\n}\n
AnimatedSwitcher可以设置多个Widget平滑切换，相对于AnimatedCrossFade可扩展性更高；和尚尝试三个Widget平移切换；
returnGestureDetector(\nonTap:()=>setState((){\n++index;\nindex=index%3;\n}),\nchild:AnimatedSwitcher(\nduration:Duration(milliseconds:500),\nchild:_animatedItemWid(index),\ntransitionBuilder:(Widgetchild,Animation<double>animation){\nreturnSlideTransition(child:child,position:Tween<Offset>(begin:Offset(1,0),end:Offset(0,0)).animate(animation));\n}));\n\nWidget_animatedItemWid(index){\nswitch(index){\ncase0:\nreturnContainer(key:UniqueKey(),color:Colors.purpleAccent.withOpacity(0.4),width:100,height:100);\nbreak;\ncase1:\nreturnContainer(key:UniqueKey(),color:Colors.green.withOpacity(0.4),width:150,height:120);\nbreak;\ncase2:\nreturnContainer(key:UniqueKey(),color:Colors.orange.withOpacity(0.4),width:120,height:140);\nbreak;\n}\n}\n
[AnimatedSwitcher源码]()
Flutter还提供了很多灵活的隐式动画Widget，和尚认为这两类最灵活，使用场景最多；和尚对隐式动画研究还不够深入，如有错误请多多指导！
好了，文章到这里就结束啦，如果本次分享的动漫社区网站源码分享和动漫社区 新闻问题对您有所帮助，还望关注下本站哦！