返回顶部
首页 > 资讯 > 移动开发 >Android利用ScaleTransition实现吹气球动画
  • 491
分享到

Android利用ScaleTransition实现吹气球动画

2024-04-02 19:04:59 491人浏览 八月长安
摘要

目录前言ScaleTransition 介绍应用总结前言 这是最后一篇介绍如何使用基本动画组件的文章,我们继续 Transition 的动画,本篇来介绍 

前言

这是最后一篇介绍如何使用基本动画组件的文章,我们继续 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 吹气球动画的资料请关注编程网其它相关文

--结束END--

本文标题: Android利用ScaleTransition实现吹气球动画

本文链接: https://lsjlt.com/news/146280.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Android利用ScaleTransition实现吹气球动画
    目录前言ScaleTransition 介绍应用总结前言 这是最后一篇介绍如何使用基本动画组件的文章,我们继续 Transition 的动画,本篇来介绍 ...
    99+
    2024-04-02
  • Android怎么利用ScaleTransition实现吹气球动画
    这篇文章主要介绍“Android怎么利用ScaleTransition实现吹气球动画”,在日常操作中,相信很多人在Android怎么利用ScaleTransition实现吹气球动画问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
    99+
    2023-06-30
  • Android实现气泡动画
    本文实例为大家分享了Android实现气泡动画的具体代码,供大家参考,具体内容如下 一、前言 本来想做一个类似window气泡屏保的动画效果。 奈何小球间的非对心碰撞公式没研究出来,...
    99+
    2024-04-02
  • Android自定义View实现气泡动画
    本文实例为大家分享了Android自定义View实现气泡动画的具体代码,供大家参考,具体内容如下 一、前言 最近有需求制作一个水壶的气泡动画,首先在网上查找了一番,找到了一个文章:A...
    99+
    2024-04-02
  • Android实现左右摆动的球体动画效果
    首先,看一下效果   可能各位在别处看到过类似的东西,我在微信的文章末尾看到有个玩意,感觉有意思,就用代码实现一下。这篇文章主要把握写代码的思路展示一下。 ...
    99+
    2022-06-06
    动画 Android
  • Android实现跳动的小球加载动画效果
    先来看看效果图 跳动的小球做这个动画,需掌握:      1、属性动画      2、Pa...
    99+
    2022-06-06
    动画 Android
  • Android怎么实现小球自由碰撞动画
    这篇文章主要介绍“Android怎么实现小球自由碰撞动画”,在日常操作中,相信很多人在Android怎么实现小球自由碰撞动画问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android怎么实现小球自由碰撞动画...
    99+
    2023-06-22
  • 利用JetpackCompose绘制可爱的天气动画
    目录1. 项目背景2. MyApp:CuteWeatherApp界面构成3. Compose自定义绘制声明式地创建和使用Canvas强大的DrawScope4.简单易用的API使用原...
    99+
    2024-04-02
  • Android利用动画实现背景逐渐变暗
    前言 之前写了一篇Android-实现底部弹出PopupWindow并让背景逐渐变暗,介绍利用Handler动态改变背景透明度从而达到变暗的效果。现在补充一种方法,使用动画来实...
    99+
    2022-06-06
    动画 Android
  • JavaScript canvas实现水球加载动画
    本文实例为大家分享了canvas实现水球加载动画的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> ...
    99+
    2024-04-02
  • p5.js如何实现小球动画
    这篇文章主要介绍p5.js如何实现小球动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、运动的小球本节将用p5.js做一个在屏幕上运动的小球。思路是用变量记录小球的位置,然后在d...
    99+
    2024-04-02
  • Android实现移动小球和CircularReveal页面切换动画实例代码
    前言本文主要给大家介绍了关于Android如何实现移动小球和CircularReveal页面切换动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。效果图如下是在fragment中跳转activity实现的效果,...
    99+
    2023-05-30
    android 小球移动 circularreveal
  • 利用Android中的TextView实现逐字显示动画
    前言 Android的TextView只能设置整个TextView的动画,而不能设置每个文字的动画。即使是使用TextSwitcher,也很难实现我想要的效果。   ...
    99+
    2022-06-06
    动画 Android
  • C语言实现弹跳小球动画
    目录一、项目描述和最终成果展示二、实现一个移动的球三、弹跳一个小球四、弹跳一个小球(改进版)五、多个球碰撞六、多个球碰撞(升级版)本文实例为大家分享了C语言实现弹跳小球动画的具体代码...
    99+
    2024-04-02
  • jQuery实现小球点击发射动画
    今天花了两个小时使用jQuery写了一个小动画游戏,如下图所示,通过鼠标点击,发射球。 代码: <!DOCTYPE html> <html>     &...
    99+
    2024-04-02
  • Android中怎么利用Xfermode实现动态文字加载动画
    这篇文章将为大家详细讲解有关Android中怎么利用Xfermode实现动态文字加载动画,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。第一步:我们要熟悉一下这个图16个图形结果,其实现在有1...
    99+
    2023-05-30
    android
  • css怎么实现弹跳球动画效果
    小编给大家分享一下css怎么实现弹跳球动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   1、定义动画关键帧   对...
    99+
    2024-04-02
  • JavaScript仿小米实现球体分解动画
    目录演示技术栈源码演示 用过小米手机的应该见过这个动画 它这个球体会随着垃圾的清理被例子画分解 随着这个思路我们给他改造一下实现这种效果 技术栈 首先我们使用了一些好用的js脚本...
    99+
    2024-04-02
  • JavaScript canvas怎么实现水球加载动画
    这篇文章主要讲解了“JavaScript canvas怎么实现水球加载动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript canvas怎么实现水球加载...
    99+
    2023-06-30
  • CSS3如何实现弹跳的小球动画
    小编给大家分享一下CSS3如何实现弹跳的小球动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!这个案例关键点在于小球弹跳的节奏感和布局定位。一、案例知识点相对和绝...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作