《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
程序员文章站
2022-06-01 18:38:35
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
AnimatedPositionedDirectional是一个隐式的动画组件,提供动态改变位置的动画组件,用法如下:
Stack(
children: <Widget>[
AnimatedPositionedDirectional(
start: _start,
width: 50,
height: 50,
duration: Duration(seconds: 2),
child: Container(color: Colors.red),
),
],
)
相关参数说:
-
duration
参数是动画执行的时间。 -
提供
top
、bottom
、start
、end
四种定位属性,分别表示距离上、下、开始、结尾的距离。 -
只能用于Stack组件中。
-
start
、end
和width
3个参数只能设置其中2个,因为设置了其中2个,第三个已经确定了,同理top
、bottom
和height
也只能设置其中2个。
仅仅是构建这样一个组件是不会有动画效果,需要让_start
参数发生变化,点击按钮设置新的_start
值:
RaisedButton(
onPressed: () {
setState(() {
_start = 180;
});
},
)
效果如下:
通过curve
参数设置动画执行的曲线,默认直线执行,系统提供了很多中动画执行曲线,比如加速、减速、弹簧等,用法如下:
AnimatedOpacity(
curve: Curves.easeIn,
...
)
如果想要在动画执行结束时处理一些事情,可以在onEnd
回调中处理,用法如下:
AnimatedOpacity(
onEnd: (){
//动画执行结束回调
},
...
)
上一篇: 数据可视化之matplotlib实战:plt.barh() 绘制条形图
下一篇: JS--烟花效果
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper