Flutter实现不同缩放动画效果详解

目录
  • 需求背景
  • 可缩放组件介绍
    • ScaleTransition
    • SizeTransition
    • AnimatedSize
    • AnimatedBuilder
  • 小结

需求背景

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

可缩放组件介绍

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则向着相反位置进行缩放。

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

但在需求要求上还是不满足期望的结果,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();
    },
  ),
);

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

小结

实现缩放方式有多种但对于比较定制化缩放要求需求配合上Transform.scale才能达到最终效果。Transform.scale可以帮助动画实现上对于组件尺寸大小控制方向有所帮助。因此采用AnimatedBuilder结合Transform.scale是需求实现最优方案。

以上就是Flutter实现不同缩放动画效果详解的详细内容,更多关于Flutter缩放动画的资料请关注我们其它相关文章!

时间: 2022-06-20

flutter PositionedTransition实现缩放动画

本文实例为大家分享了flutter实现缩放动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字 //用来控制动画的开始与结束以及设置

Android列表实现单选点击缩放动画效果

recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了.也就是点击选中的元素放大,同时之前选中的item缩小,不便截gif图,只能放一张静态图,大家脑补脑补~ 图中的CheckBox,代码实现其实是imageview,它的选中.取消也是有动画的,不是控制visible,而是通过改变图片透明度来实现选中取消的. 具体看代码: import android.animation.ObjectAnimator; import and

Flutter实现可以缩放拖拽的图片示例代码

前言 在pub上面找了下,没有发现一个效果跟微信一样的支持缩放拖拽效果的image,所以就自己撸了一个,之前写过Flutter 什么功能都有的Image,于是就在这个上面新增了这个功能. 主要功能: 缩放拖拽 在PageView里面缩放拖拽 支持缩放拖拽 用法 1.将extended_image的mode参数设置为ExtendedImageMode.Gesture 2.设置GestureConfig ExtendedImage.network( imageTestUrl, fit: BoxFit

Flutter Animation实现缩放和滑动动画效果

本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下 Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值.Animation对象知道动画的当前状态(例如,它是开始.停止还是向前或向后移动),但它不知道屏幕上显示的内容.AnimationController管理Animation.CurvedAnimation 将过程抽象为一个非线性曲线.Tween在正在执行动画的对象所使用的数据范围之间生成值.例如,Tween可

利用swift实现卡片横向滑动动画效果的方法示例

本文主要给大家介绍了关于利用swift实现卡片横向滑动动画效果的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 根据惯例,首先上效果图: 那天去面试,面试官突然拿出手机点开了一个app,自个在那点了一会,然后问我 这个效果怎么实现,当时一看可以滑动,肯定用scrollView 或者 collectionView实现,就大概的说了下.今天刚好闲下来,就敲一敲这个效果. 先来分析下这个效果: 卡片是横向滚动,并且每个卡片的位置都是保持在屏幕中间的,而且 左右相邻的卡片都露出来一点边

jQuery实现菜单感应鼠标滑动动画效果的方法

本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

https://github.com/383514580/any-touch 先看demo demo 说点湿的 iscroll其实代码量挺大的(近2100行, 还有另一个类似的库 betterScroll 他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码 发现里面很多逻辑 其实都是在做手势判断 , 比如拖拽(pan), 和划(swipe), 还有部分元素(表单元素等)需要单独判断点击(tap), 这部分代码接近1/3, 所以我决定用自己开发的手势库(any-touch)

Android点击WebView实现图片缩放及滑动浏览效果

最近做的项目有一个要求,就是在WebView中显示的html,需要在点击其中的图片时进行放大,并进行缩放和滑动 浏览,我第一想到的是这是和js进行交互的事情,但是怎么获取html中图片的url,并保存起来进行显示,我就不知道 了,所以去查了下资料,最后找到了解决的办法: 博客地址:Android WebView中图片浏览及缩放效果 首先说一下处理这个要求的思路,首先我们要获取到html中的所有图片的url,并保存到集合中,当点击图片时,跳转 一个Activity用ViewPager进行显示,这样

利用Flutter实现“孔雀开屏”的动画效果

前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在评论处告诉我,下面来说下如何实现此效果. 在使用Navigator进入一个新的页面时,通常用法如下: Navigator.of(context).push(MaterialPageRoute( builder: (context){ return PageB(); } )); MaterialPageRout

AngularJS中实现显示或隐藏动画效果的方式总结

AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage →依赖:var app = angular.module("app",["ngAnimate"]); →

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)

内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

jQuery学习笔记之jQuery动画效果

基本动画代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery!</title><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type=&quo

Android编程实现ViewPager多页面滑动切换及动画效果的方法

本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片: 2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解,只是拿过