温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Android怎么利用ScaleTransition实现吹气球动画

发布时间:2022-04-18 10:12:13 来源:亿速云 阅读:145 作者:iii 栏目:开发技术

这篇文章主要介绍“Android怎么利用ScaleTransition实现吹气球动画”,在日常操作中,相信很多人在Android怎么利用ScaleTransition实现吹气球动画问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android怎么利用ScaleTransition实现吹气球动画”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

前言

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

Android怎么利用ScaleTransition实现吹气球动画

ScaleTransition 介绍

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

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

参数对应的说明如下:

  • scale:即组件的缩放尺寸,为 Animation 对象,组件实际的尺寸等于组件的实际尺寸乘以该对象的值。。

  • alignment:即缩放的起始对齐位置,通过这个参数可以控制组件的缩放方向,比如我们的气球就是从bottomCenter 开始缩放的,这样气球嘴那边感觉没有动一样。

  • child:要缩放的子组件。

应用

我们要实现的气球动画非常简单,找一张气球图片 。然后使用一个 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,
    );
  }
}

到此,关于“Android怎么利用ScaleTransition实现吹气球动画”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

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

AI