Flutter:实现红包晃动效果

简介: 很多app打开会有红包悬浮在某个角落,然后为了吸引注意力,会将红包晃动起来,这个效果非常简单

很多app打开会有红包悬浮在某个角落,然后为了吸引注意力,会将红包晃动起来,这个效果非常简单,代码如下:


class RedPackageSmall extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _RedPackageSmall();
  }
}
class _RedPackageSmall extends State<RedPackageSmall> with SingleTickerProviderStateMixin{
  Animation _animation;
  AnimationController _animationController;
  @override
    void initState() {
      super.initState();
      _animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds:200),
        reverseDuration: Duration(milliseconds: 200),
      );
      _animation = Tween(
        begin: -0.03,
        end: 0.03
      ).animate(_animationController);
    }
    @override
    void dispose() {
      _animationController.dispose();
      super.dispose();
    }
  @override
  Widget build(BuildContext context) {
    _animationController.repeat(reverse: true);
    return RotationTransition(
      turns: _animation,
      child: TextButton(
          onPressed: (){
              ...
          },
          child: Image.asset("红包图片"),
        ),
    );
  }
}


目录
相关文章
|
JSON Dart IDE
Flutter实现国际化
开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐进行国际化开发
1393 0
Flutter实现国际化
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
350 0
|
Dart IDE 开发工具
Flutter 图文并茂列表实现
Flutter使用 ListView 完成列表的构建,界面实现的关键工作实际是布局子元素的拆分。剩下的实现方式存在多种,看各人喜好。但是,需要注意避免过多嵌套导致代码不好维护,并需要提高复用性。
877 2
Flutter 图文并茂列表实现
|
数据安全/隐私保护 UED
Flutter 使用自定义fluro 路由实现访问权限控制
本篇介绍了利用 Fluro 路由管理实现路由权限拦截的两种方式,两种方式各有好处,使用过程中可以根据实际情况决定使用哪一种方法。
626 1
Flutter 使用自定义fluro 路由实现访问权限控制
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷,通过路由管理可以降低页面耦合,提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
1357 1
Flutter App页面路由及路由拦截实现
|
存储 前端开发
Flutter 实现多选底部弹窗
本篇介绍了底部弹窗实现多选的方式,其中实现的方式还可以有很多种,例如直接在自定义组件中使用有状态组件。这里介绍的方法可以作为一个参考,通过动态构建有状态组件能够简单快速地实现底部弹窗的多选功能。
689 0
Flutter 实现多选底部弹窗
|
前端开发 API Android开发
Flutter实现动画
对于一个前端的App来说,添加适当的动画,可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android,还是前端开发中都会提供完成某些动画的API。 Flutter有自己的渲染闭环,我们当然可以给它提供一定的数据模型,来让它帮助我们实现对应的动画效果。
205 0
Flutter实现动画
|
前端开发
在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。
为避免贴大段代码,文中代码部分仅作为参考,并非全部代码,请理解后自行补全或者下载源码进行学习。
278 0
在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。
|
编解码 Dart Java
【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | Android 端实现 BasicMessageChannel 通信 )(一)
【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | Android 端实现 BasicMessageChannel 通信 )(一)
295 0
【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | Android 端实现 BasicMessageChannel 通信 )(一)
Flutter中实现整个App变为灰色
Flutter中实现整个App变为灰色 在Flutter中实现整个App变为灰色是非常简单的, 只需要在最外层的控件上包裹ColorFiltered,用法如下:
365 0
Flutter中实现整个App变为灰色