Android利用ScaleTransition实现吹气球动画

 更新时间:2022年04月18日 08:46:23   作者:岛上码农  
这篇文章主要为大家介绍了如何将利用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 吹气球动画的资料请关注脚本之家其它相关文

相关文章

  • Android中转场动画的实现与兼容性处理

    Android中转场动画的实现与兼容性处理

    大家都知道Android 中的动画有很多,除了在一个界面上使用帧动画、属性动画将一个或多个 View 进行动画处理以外,还可以用于两个界面之间过渡、跳转。本文的内容包括:Android 5.0+ 的转场动画和Android 4.X 模拟实现 Android 5.0+ 转场效果。有需要的可以参考借鉴。
    2016-10-10
  • Android RecycleView和线型布局制作聊天布局

    Android RecycleView和线型布局制作聊天布局

    大家好,本篇文章主要讲的是Android RecycleView和线型布局制作聊天布局,感兴趣的同学赶紧来看一看吧,对你有帮助的话记得收藏一下
    2022-01-01
  • Android编程之简单计时器实现方法

    Android编程之简单计时器实现方法

    这篇文章主要介绍了Android编程之简单计时器实现方法,涉及Android开发中ContextMenu及Chronometer的相关使用技巧,需要的朋友可以参考下
    2016-01-01
  • Android开发MQTT协议的模型及通信浅析

    Android开发MQTT协议的模型及通信浅析

    这篇文章主要W为大家介绍了Android开发MQTT协议的模型及通信浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Android 中按home键和跳转到主界面的实例代码

    Android 中按home键和跳转到主界面的实例代码

    本文通过实例代码给大家分享Android 中按home键和跳转到主界面的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-04-04
  • Android通过手机拍照或从本地相册选取图片设置头像

    Android通过手机拍照或从本地相册选取图片设置头像

    微信、QQ、微博等社交类APP如何更换自己的头像,这篇文章主要介绍了Android通过手机拍照或从本地相册选取图片设置头像,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android 混淆代码详解及实例

    Android 混淆代码详解及实例

    本文主要介绍Android 混淆代码的资料,这里整理了详细资料及代码实例,有需要做Android 混淆代码的朋友可以参考下
    2016-09-09
  • Android自适应不同屏幕大小的全部方法

    Android自适应不同屏幕大小的全部方法

    这篇文章主要介绍了Android自适应不同屏幕大小的全部方法,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧
    2018-05-05
  • 详解android特性之CoordinatorLayout用法探析实例

    详解android特性之CoordinatorLayout用法探析实例

    本篇文章主要介绍了android特性之CoordinatorLayout用法探析实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Android EditText限制输入字数的方法

    Android EditText限制输入字数的方法

    这篇文章主要介绍了Android EditText限制输入字数的方法,涉及Android针对EditText文本与字符串操作相关技巧,需要的朋友可以参考下
    2016-01-01

最新评论