Flutter 入门与实战(九十七):看这一颗跳动的热心 —— AnimatedPadding 应用
紫霞仙子:我在你心里留下了一样东西……
至尊宝:原来那个女孩子在我心里留下了一滴眼泪,我完全可以感受到当时她是多么的伤心。 ——《大话西游》
前言
引用的是《大话西游》的经典台词之一作为本篇的开头(里面的经典台词太多,数不过来👍🏻👍🏻👍🏻),这篇也算致敬一下星爷。昨天就开始在看 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
具体的应用场景想不出太多,如果是放大缩小这种方式确实可以,但是也可以使用 Matrix4
的 scale
方法来实现,而使用AnimatedPadding
好处之一应该是不会超出父组件的边界(padding
值不允许是负数,会抛异常)。关于AnimatedPadding
的应用场景,各位掘友如果有好的想法也可以在评论区分享一下🙏🏻。