flutter闪烁动画效果

最新推荐文章于 2025-01-20 20:56:01 发布

原创

最新推荐文章于 2025-01-20 20:56:01 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #动画

该博客介绍了如何在Flutter中创建一个闪烁浮动的动画效果，通过使用Tween和CurvedAnimation来控制图标在60%的时间内改变透明度，剩余时间改变内边距，从而实现动画。代码示例中展示了动画控制器的设置、监听和状态切换，以及最终的 AnimatedBuilder 组件来构建动画效果。

闪烁浮动效果：


import 'package:flutter/material.dart';

class FlickerAnimation extends StatefulWidget {
  final String iconPath;
  FlickerAnimation({this.iconPath});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FlickerAnimation();
  }
}
class _FlickerAnimation extends State<FlickerAnimation> with TickerProviderStateMixin{

  /*height = Tween<double>(
      begin:.0 ,
      end: 300.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );*/

  /*color = ColorTween(
      begin:Colors.green ,
      end:Colors.red,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.6,//间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );*/

  /*padding = Tween<EdgeInsets>(
      begin:EdgeInsets.only(left: .0),