写点什么

用 Flutter 来一颗跳动的心

作者:岛上码农
  • 2022 年 7 月 16 日
  • 本文字数:1918 字

    阅读完需:约 6 分钟

用 Flutter 来一颗跳动的心

紫霞仙子:我在你心里留下了一样东西……

至尊宝:原来那个女孩子在我心里留下了一滴眼泪,我完全可以感受到当时她是多么的伤心。——《大话西游》

前言

引用的是《大话西游》的经典台词之一作为本篇的开头(里面的经典台词太多,数不过来👍🏻👍🏻👍🏻),这篇也算致敬一下星爷。昨天就开始在看 AnimatedPadding 的使用,感觉好像做动画没什么有趣的地方,自己折腾了一个类似水波的效果,但是效果不是很满意。然后,就突然想到了大话西游的那一段场景。



如果当时至尊宝能够看到他自己心里的紫霞仙子流的眼泪……可惜没有如果。

AnimatedPadding 介绍

AnimatedPadding 组件使用动画的方式调整其子组件与其父组件的内边距。通过调整内部边距可以改变子组件的尺寸,从而会有感觉子组件在放大缩小,例如下面的效果。



AnimatedPadding 的构造方法定义如下:


 AnimatedPadding({    Key? key,    required this.padding,    this.child,    Curve curve = Curves.linear,    required Duration duration,    VoidCallback? onEnd,  });
复制代码


与其他 AnimatedXX 组件一样,其实差别就在于多了一个 padding 参数,这个参数就是调节子组件和父组件之间的内边距的。

应用:一颗跳动的心

我们来简单地复刻一下紫霞仙子在至尊宝心里流泪的场景,效果如下:



其实就是两张图片用 Stack 组件堆叠,然后使用AnimatedPadding 调整爱心Stack 的内边距实现动画效果,这样就有心跳的效果了。这里为了实现反复动画,使用了 onEnd 回调来重启动画。源码如下:


class AnimatedPaddingDemo extends StatefulWidget {  AnimatedPaddingDemo({Key? key}) : super(key: key);
@override _AnimatedPaddingDemoState createState() => _AnimatedPaddingDemoState();}
class _AnimatedPaddingDemoState extends State<AnimatedPaddingDemo> { final initialPadding = 60.0; var padding; final duration = 800; bool started = false; @override void initState() { padding = initialPadding; super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AnimatedPadding'), brightness: Brightness.dark, backgroundColor: Colors.black, ), backgroundColor: Colors.black, body: Center( child: Container( width: 300.0, height: 300.0, child: AnimatedPadding( padding: EdgeInsets.all(padding), duration: Duration(milliseconds: duration), curve: Curves.easeInCubic, child: Stack( alignment: Alignment.center, children: [ Image.asset( 'images/heart.png', ), ClipOval( child: Image.asset( 'images/zixia.png', width: 60, height: 60, fit: BoxFit.fitHeight, ), ), ], ), onEnd: () { if (started) { setState(() { if (padding < initialPadding) { padding = initialPadding; } else { padding -= 20.0; } }); } }, ), ), ), floatingActionButton: FloatingActionButton( child: Icon(started ? Icons.stop : Icons.play_arrow, color: Colors.white), onPressed: () { setState(() { if (padding < initialPadding) { padding = initialPadding; } else { padding -= 20.0; } started = !started; }); }, ), ); }}
复制代码

总结

本篇介绍了 AnimatedPadding 的使用,通过 AnimatedPadding可以使用动画的方式调节子组件在父组件中的内边距。AnimatedPadding 具体的应用场景想不出太多,如果是放大缩小这种方式确实可以,但是也可以使用 Matrix4scale 方法来实现,而使用AnimatedPadding好处之一应该是不会超出父组件的边界(padding 值不允许是负数,会抛异常)。关于AnimatedPadding的应用场景,各位掘友如果有好的想法也可以在评论区分享一下🙏🏻。


发布于: 刚刚阅读数: 3
用户头像

岛上码农

关注

用代码连接孤岛,公众号@岛上码农 2022.03.03 加入

从南漂到北,从北漂到南的业余码农

评论

发布
暂无评论
用 Flutter 来一颗跳动的心_flutter_岛上码农_InfoQ写作社区