Android利用ScaleTransition实现吹气球动画

目录
  • 前言
  • ScaleTransition 介绍
    • 应用
  • 总结

前言

这是最后一篇介绍如何使用基本动画组件的文章，我们继续 Transition 的动画，本篇来介绍 ScaleTransition。我们在之前的文章介绍过使用 Animation 和 AnimationController 来实现组件的缩放，那是通过更改图片的尺寸实现的，具体可以参考：Flutter 实现爱心三连动画。

而对于只需要放大或缩小的场合，可以直接使用 ScaleTransition 来完成，例如我们本篇实现了一个气球从小到大，感觉像被用力吹起来一样的动画效果。

balloon.gif

ScaleTransition 介绍

ScaleTransition  的使用非常简单，只有三个参数，构造方法定义如下。

const ScaleTransition({
  Key? key,
  required Animation<double> scale,
  this.alignment = Alignment.center,
  this.child,
})

参数对应的说明如下：

  • scale：即组件的缩放尺寸，为 Animation 对象，组件实际的尺寸等于组件的实际尺寸乘以该对象的值。。
  • alignment：即缩放的起始对齐位置，通过这个参数可以控制组件的缩放方向，比如我们的气球就是从bottomCenter 开始缩放的，这样气球嘴那边感觉没有动一样。
  • child：要缩放的子组件。

应用

我们要实现的气球动画非常简单，找一张气球图片 (推荐一个找免费 png 图素材的国外网站：https://www.pngpix.com）。然后使用一个 Animation 对象控制缩放的时间和大小即可。因为气球后面越来越难吹，因此我们将曲线设置为 easeOut（先快后慢），源代码如下：

class ScaleTransitionDemo extends StatefulWidget {
  ScaleTransitionDemo({Key? key}) : super(key: key);

  @override
  _ScaleTransitionDemoState createState() => _ScaleTransitionDemoState();
}

class _ScaleTransitionDemoState extends State<ScaleTransitionDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller =
      AnimationController(duration: const Duration(seconds: 10), vsync: this)
        ..repeat();

  //使用自定义曲线动画过渡效果
  late Animation<double> _animation =
      CurvedAnimation(parent: _controller, curve: Curves.easeOut);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScaleTransition'),
        brightness: Brightness.dark,
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: balloon(),
      ),
    );
  }

  @override
  void dispose() {
    _controller.stop();
    _controller.dispose();
    super.dispose();
  }

  Widget balloon() {
    return ScaleTransition(
      alignment: Alignment.bottomCenter,
      child: Image.asset(
        'images/balloon.png',
      ),
      scale: _animation,
    );
  }
}

总结

本篇介绍了使用 ScaleTransition 控制组件尺寸实现类似吹气球的动画。ScaleTransition 的实际应用有不少，例如点击图片查看大图、缩小转场切换、以及镜头从近拉到远或从远处走过来的那种感觉等等。有兴趣的可以自己尝试一些有趣的动画 —— 毕竟玩动画比单纯写界面更有趣一些！

以上就是Android利用ScaleTransition实现吹气球动画的详细内容，更多关于Android 吹气球动画的资料请关注我们其它相关文

赞 (0)

相关推荐

  • 基于Flutter制作一个火箭发射动画

    基于Flutter制作一个火箭发射动画

    目录 总结 前言 北京时间10月16日0时23分,神舟十三号飞船成功发射,目前三名航天员已经顺利进驻空间站,开始为期6个月的“太空差旅”生活. 国家的航天技术的突飞猛进也让岛上码农很自豪,今天看 Flutter 的动画知识,看到了 AnimatedPositioned 这个组件,可以用于控制组件的相对位置移动.结合这个神舟十三号的发射,灵机一动,正好可以使用AnimatedPositioned 这个组件实现火箭发射动画.话不多说,先上效果! 效果说明 这里其实是两张图片叠加,一张是背景地球星空的

  • Android Flutter实现五种酷炫文字动画效果详解

    Android Flutter实现五种酷炫文字动画效果详解

    目录 前言 波浪涌动效果 波浪线跳动文字组 彩虹动效 滚动广告牌效果 打字效果 其他效果 自定义效果 总结 前言 偶然逛国外博客,看到了一个介绍文字动画的库,进入 pub 一看,立马就爱上这个动画库了,几乎你能想到的文字动画效果它都有!现在正式给大家安利一下这个库:animated_text_kit.本篇我们介绍几个酷炫的效果,其他的效果大家可以自行查看官网文档使用. 波浪涌动效果 波浪涌动 上面的动画效果只需要下面几行代码,其中loadUntil用于控制波浪最终停留的高度,取值是0-1.0,如

  • Flutter实现抽屉动画

    Flutter实现抽屉动画

    这篇会深化View拖拽实例,利用Flutter Animation.插值器以及AnimatedBuilder教大家实现带动画的抽屉效果.先来看效果: 通过构思,我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示,用GestureDetector监听手势滑动,动态移动顶层的Widget,当监听到手势结束的时候根据手势滑动的距离动态将顶部Widget利用动画效果滑动到结束位置即可. 实现底部Widget class DownDrawerWidget extends State

  • Flutter实现心动的动画特效

    Flutter实现心动的动画特效

    目录 实现动画 混入 SingleTickerProviderStateMixin 创建动画 抽离成小组件 完整代码 为了追求更好的用户体验,有时候我们需要一个类似心跳一样跳动着的控件来吸引用户的注意力,这是一个小小的优化需求,但是在 Flutter 里动画两件套就像裹脚布一样臭长,所以需要像封装一个 AnimatedWidget,解放生产力. 实现动画 混入 SingleTickerProviderStateMixin 当创建一个 AnimationController 时,需要传递一个vsy

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

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

  • 基于Flutter实现爱心三连动画效果

    基于Flutter实现爱心三连动画效果

    目录 前言 Animation 简介 AnimationController 简介 应用 - 爱心三连 总结 前言 我们开始 Flutter 动画相关篇章之旅,在应用中通过动效能够给用户带来更愉悦的体验,比较典型的例子就是一些直播平台的动效了,比如送火箭能做出来那种火箭发射的动效——感觉倍有面子,当然这是土豪的享受,我等码农只在视频里看过.本篇我们来介绍基于 Animation 类实现的基本动画构建. Animation 简介 Animation 是一个抽象类,它并不参与屏幕的绘制,而是在设定的

  • Android利用ScaleTransition实现吹气球动画

    Android利用ScaleTransition实现吹气球动画

    目录 前言 ScaleTransition 介绍 应用 总结 前言 这是最后一篇介绍如何使用基本动画组件的文章,我们继续 Transition 的动画,本篇来介绍 ScaleTransition.我们在之前的文章介绍过使用 Animation 和 AnimationController 来实现组件的缩放,那是通过更改图片的尺寸实现的,具体可以参考:Flutter 实现爱心三连动画. 而对于只需要放大或缩小的场合,可以直接使用 ScaleTransition 来完成,例如我们本篇实现了一个气球从小

  • Android利用贝塞尔曲线绘制动画的示例代码

    Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • Android利用animation-list实现帧动画

    本文实例为大家分享了利用animation-list实现帧动画的具体代码,供大家参考,具体内容如下 将要顺序播放的图片放在资源目录下 再drawable目录下新建animation1文件和animation2文件  一个是按顺序显示动画,一个是倒序显示动画, 顺序显示动画文件:animation1.xml <?xml version="1.0" encoding="utf-8"?> <!-- 根标签为animation-list,其中oneshot

  • Android利用属性动画实现优酷菜单

    利用属性动画实现优酷菜单,供大家参考,具体内容如下 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_p

  • Android利用Hero实现列表与详情页无缝切换动画

    Android利用Hero实现列表与详情页无缝切换动画

    目录 前言 思路 列表元素 详情页面 源码 总结 前言 介绍了几篇 Hero 动画,我们来一个 Hero 动画应用案例.在一些应用中,列表的元素和详情的内容是一致的,这个时候利用 Hero 动画切换到详情会感觉无缝过渡,用户体验会更好.例如本篇我们要实现下面的效果: Hero 应用:列表与详情切换 思路 上面的效果是列表和详情共用了头像和头像的背景色.二者的组合是一个 Stack 组件,因此可以使用 Hero 组件完成.然后是 Hero 组件的移动,我们先做了水平移动,再做垂直方向移动,这样过渡

  • Android利用Canvas标点画线并加入位移动画(1)

    Android利用Canvas标点画线并加入位移动画(1)

    本文实例为大家分享了Android利用Canvas标点画线,并加入位移动画的具体代码,供大家参考,具体内容如下 1.背景 最近由于公司业务需要,需要自己实现一个点画线,移动的需求,这自然就想到了利用Canvas进行描点,画线连线. 过程比较简单,查阅了网上文章,发现写的都特别片面,很多人也会遇到类似需求,这里把整个实现过程讲一下,并且在实现过程遇到的一些小坑讲给大家. 先看效果图 其实点击检索,小人可以按照画好的路线进行移动. 具体代码: Canvas画点连线 class DrawView ex

  • Android利用Canvas标点画线并加入位移动画(2)

    Android利用Canvas标点画线并加入位移动画(2)

    本文实例为大家分享了Android利用Canvas标点画线,并加入位移动画的具体代码,供大家参考,具体内容如下 1.背景 继上次公司需求实现Canvas面板标记点,画折现,并利用属性动画进行沿线移动之后,又有了新问题. 发现公司提供的坐标有正值有负值,并且值很大,很容易超出屏幕范围,而且由于我们Canvas坐标方向与正常坐标系不符合,由此发现做的图方向也不对. 2.问题 Canvas坐标系位于屏幕左上角,且Y正向坐标向下,如何转换? 由于坐标有正有负,而Canvas默认只显示正方向,如何解决显示

  • 利用Android实现一种点赞动画效果的全过程

    目录 前言 点击后的缩放效果 拇指的散开效果 示例 总结 前言 最近有个需求,需要仿照公司的H5实现一个游戏助手,其中一个点赞的按钮有动画效果,如下图: 分析一下这个动画,点击按钮后,拇指首先有个缩放的效果,然后有5个拇指朝不同的方向移动,其中部分有放大的效果. 点击后的缩放效果 本文通过ScaleAnimation 实现缩放效果,代码如下: private fun playThumbUpScaleAnimator() { // x.y轴方向都从1倍放大到2倍,以控件的中心为原点进行缩放 Sca

  • Android中Property Animation属性动画编写的实例教程

    Android中Property Animation属性动画编写的实例教程

    1.概述 Android提供了几种动画类型:View Animation .Drawable Animation .Property Animation .View Animation相当简单,不过只能支持简单的缩放.平移.旋转.透明度基本的动画,且有一定的局限性.比如:你希望View有一个颜色的切换动画:你希望可以使用3D旋转动画:你希望当动画停止时,View的位置就是当前的位置:这些View Animation都无法做到.这就是Property Animation产生的原因,本篇则来详细介绍

  • Android利用Sensor(传感器)实现指南针小功能

    Android利用Sensor(传感器)实现指南针小功能

    首先来说一说该指南针的实现思路: 程序先准备一张指南针图片,该图片上方向指针指向北方.接下来开发一个检测方向的传感器,程序检测到手机顶部绕Z轴转过多少度,让指南针图片反向转多少度即可.由此可见指南针应用只要在界面中添加一张图片,并让图片总是反向转过反向传感器返回的第一个角度值即可. 下面介绍一下方向传感器:方向传感器用于感应手机设备的摆放状态.方向传感器可以返回三个角度,这三个角度即可确定手机的摆放状态.关于方向传感器返回的三个角度的说明如下. 第一个角度:表示手机顶部朝向正北方的夹角.当手机绕

随机推荐