Flutter實(shí)現(xiàn)不同縮放動畫效果詳解

更新時(shí)間：2022年06月22日 08:32:20 作者：JulyYu

這篇文章主要為大家詳細(xì)介紹了Flutter利用不同組件（ScaleTransition、SizeTransition、AnimatedSize和AnimatedBuilder）實(shí)現(xiàn)不同縮放動畫效果，感興趣的可以動手嘗試一下

需求背景

組件縮放可以向著一個(gè)方向進(jìn)行縮放，放大列表中某一個(gè)Cell期望它是向后進(jìn)行放大而非組件中心點(diǎn)開始縮放。具體效果如下圖所示：

可縮放組件介紹

ScaleTransition

ScaleTransition具體實(shí)現(xiàn)如下代碼，設(shè)置AnimationController控制器若需要增加數(shù)值操作可以再增加Animate再調(diào)用forward方法執(zhí)行。

PS:動畫實(shí)現(xiàn)在以前文章中有介紹過

動畫控制器
_scaleAnimationController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 3000),
);
scale = Tween(begin: 1.0, end: 1.29).animate(_scaleAnimationController);

ScaleTransition(
  scale: scale,
  alignment: Alignment.centerLeft,
  child: Container(
    margin: EdgeInsets.all(50),
    color: Colors.yellow,
    height: 200,
    width: 100,
  ),
)


_scaleAnimationController.forward();

如果希望修改縮放方向，可以為ScaleTransition添加alignment配置。例如centerLeft表示組件靠左向右縮放。

ScaleTransition(
  scale: scale,
  alignment: Alignment.centerLeft,
  child: Container(
    margin: EdgeInsets.all(50),
    color: Colors.yellow,
    height: 200,
    width: 100,
  ),
)

如圖所示默認(rèn)縮放是以組件中心點(diǎn)進(jìn)行縮放效果，設(shè)置alignment則向著相反位置進(jìn)行縮放。

但ScaleTransition并不能滿足需求功能，無法做到向著一個(gè)方向進(jìn)行縮放動畫。

SizeTransition

SizeTransition是以更改子組件尺寸實(shí)現(xiàn)動畫效果，支持垂直或水平方向動畫。

AnimationController _animationController =
    AnimationController(vsync: this, duration: Duration(seconds: 1));
_animationController.value = 1.0;
Animation<double>
  _animation = CurvedAnimation(
    parent: _animationController, curve: Curves.fastLinearToSlowEaseIn);

SizeTransition(
  sizeFactor: _animation,
  axis: Axis.horizontal,
  child: Container(
    color: Colors.blue,
    height: 100,
    width: 100,
    alignment: Alignment.center,
    child: Text("SizeTransition"),
  ),
)

但在需求要求上還是不滿足期望的結(jié)果，SizeTransition更適用在實(shí)現(xiàn)展開或是飛入的動畫效果。

AnimatedSize

AnimatedSize是自帶動畫效果的組件，修改組件尺寸大小就能夠執(zhí)行縮放動畫。

GestureDetector(
  child: AnimatedSize(
    duration: Duration(seconds: 2),
    child: Container(
      color: Colors.red,
      width: 100,
      height: height,
      alignment: Alignment.center,
      child: Container(
        height: 50,
        width: 50,
        color: Colors.yellow,
        child: Text("AnimatedSize"),
      ),
    ),
  ),
  onTap: () {
    height = 150;
    width = 150;
    setState(() {});
  },
),

但AnimatedSize的問題在于它只作用于自身，若子布局設(shè)置了自身的尺寸就不會隨著父組件大小而變化。

AnimatedBuilder

AnimatedBuilder主要結(jié)合Transform.scale組件設(shè)置alignment為Alignment.centerLeft即可對組件實(shí)現(xiàn)向右縮放動畫。

AnimationController _scaleAnimationController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 3000),
);
Animation<double> scale = Tween(begin: 1.0, end: 1.29).animate(_scaleAnimationController);

 AnimatedBuilder(
  animation: scale,
  builder: (context, widget) {
    return Transform.scale(
      alignment: Alignment.centerLeft,
      scale: scale.value,
      child: widget,
    );
  },
  child: GestureDetector(
    child: Container(
      margin: EdgeInsets.only(left: 15, right: 15),
      color: Colors.blue,
      width: 100,
      height: 50,
      child: Text("AnimatedBuilder"),
    ),
    onTap: (){
      _scaleAnimationController.forward();
    },
  ),
);

AnimatedBuilder方式實(shí)現(xiàn)縮放需要為組件縮放預(yù)留好足夠空間進(jìn)行縮放放大操作，避免組件縮放后與其他組件出現(xiàn)重疊現(xiàn)象。

小結(jié)

實(shí)現(xiàn)縮放方式有多種但對于比較定制化縮放要求需求配合上Transform.scale才能達(dá)到最終效果。Transform.scale可以幫助動畫實(shí)現(xiàn)上對于組件尺寸大小控制方向有所幫助。因此采用AnimatedBuilder結(jié)合Transform.scale是需求實(shí)現(xiàn)最優(yōu)方案。

以上就是Flutter實(shí)現(xiàn)不同縮放動畫效果詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter縮放動畫的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: