日常Flutter

Flutter-PositionedTransition位置变化

2022-08-20  本文已影响0人  三千烦恼风_eefa

PositionedTransition定位控件动画,需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置;

构造函数

PositionedTransition({
    Key key,
    this.rect,                       //动画矩形位置值的变化
    Widget child,                    //动画子元素
})
PositionedTransition必须作为Stack的一级child Widget来使用;

使用方法

1、RelativeRectTween 缩放动画

rect:表示由外传递进来的动画属性值的变化,通过获取其值,填充到child的矩形位置上;

//初始位置设置
begin:

//结束位置设置
end:

image.png

2、动画控制器AnimationController

image.png image.png

forward():动画正向执行,RelativeRectTween begin 到 end

reverse():动画反向执行,RelativeRectTween end 到 begin

案列

1、右进左出的动画

image.png
上一篇下一篇

猜你喜欢

热点阅读