Flutter怎么实现不同缩放动画效果

蜗牛 互联网技术资讯 2022-06-22 20 0

本篇内容主要讲解“Flutter怎么实现不同缩放动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Flutter怎么实现不同缩放动画效果”吧!

    需求背景

    组件缩放可以向着一个方向进行缩放,放大列表中某一个Cell期望它是向后进行放大而非组件中心点开始缩放。具体效果如下图所示:

    Flutter怎么实现不同缩放动画效果  flutter 第1张

    可缩放组件介绍

    ScaleTransition

    ScaleTransition具体实现如下代码,设置AnimationController控制器若需要增加数值操作可以再增加Animate再调用forward方法执行。

    PS:动画实现在以前文章中有介绍过

    动画控制器
    _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,
      ),
    )

    如图所示默认缩放是以组件中心点进行缩放效果,设置alignment则向着相反位置进行缩放。

    Flutter怎么实现不同缩放动画效果  flutter 第2张

    ScaleTransition并不能满足需求功能,无法做到向着一个方向进行缩放动画。

    SizeTransition

    SizeTransition是以更改子组件尺寸实现动画效果,支持垂直或水平方向动画。

    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"),
      ),
    )

    Flutter怎么实现不同缩放动画效果  flutter 第3张

    但在需求要求上还是不满足期望的结果,SizeTransition更适用在实现展开或是飞入的动画效果。

    AnimatedSize

    AnimatedSize是自带动画效果的组件,修改组件尺寸大小就能够执行缩放动画。

    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的问题在于它只作用于自身,若子布局设置了自身的尺寸就不会随着父组件大小而变化。

    AnimatedBuilder

    AnimatedBuilder主要结合Transform.scale组件设置alignmentAlignment.centerLeft即可对组件实现向右缩放动画。

    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();
        },
      ),
    );

    Flutter怎么实现不同缩放动画效果  flutter 第4张

    AnimatedBuilder方式实现缩放需要为组件缩放预留好足够空间进行缩放放大操作,避免组件缩放后与其他组件出现重叠现象。

    到此,相信大家对“Flutter怎么实现不同缩放动画效果”有了更深的了解,不妨来实际操作一番吧!这里是蜗牛博客网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    评论