美文网首页日常Flutter
Flutter-PositionedTransition位置变化

Flutter-PositionedTransition位置变化

作者: 三千烦恼风_eefa | 来源:发表于2022-08-20 19:26 被阅读0次

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

相关文章

网友评论

    本文标题:Flutter-PositionedTransition位置变化

    本文链接:https://www.haomeiwen.com/subject/vuavgrtx.html