颤振中的气泡波纹动画
颤振中的气泡波纹动画
提问于 2019-09-16 17:37:48
气泡效果动画点击：
如何使用颤振应用程序制作这个气泡效果动画？
回答 1
Stack Overflow用户
发布于 2019-09-18 08:14:19
您可以使用按钮包创建类似于此的气泡效应。这个软件包不在pub.dev上，所以您需要通过github安装它。
您可以按以下方式安装它
pimp_my_button:
git:
url: git://github.com/Norbert515/pimp_my_button.git之后，您需要按以下方式实现该按钮
PimpedButton(
particle: DemoParticle(),
pimpedWidgetBuilder: (context, controller) {
return FloatingActionButton(onPressed: () {
controller.forward(from: 0.0);
},);
},
),你可以测试它，你可以看到你有这个烟花效果在你的按钮。
现在，要创建一个自定义动画，您必须创建自己的粒子动画。我是附加一个简单的气泡动画下面，你可以调整它，以您的需要。
class MyParticle extends Particle {
@override
void paint(Canvas canvas, Size size, progress, seed) {
int randomMirrorOffset = 6;
CompositeParticle(children: [
// Firework(),
CircleMirror(
numberOfParticles: 16,
child: AnimatedPositionedParticle(
begin: Offset(0.0, 20.0),
end: Offset(0.0, 60.0),
child: FadingCircle(radius: 3.0, color: Colors.pink),
),
initialRotation: -pi / randomMirrorOffset),
CircleMirror.builder(
numberOfParticles: 16,
particleBuilder: (index) {
return IntervalParticle(
child: AnimatedPositionedParticle(
begin: Offset(0.0, 30.0),
end: Offset(0.0, 50.0),
child: FadingCircle(radius: 3.0, color: Colors.pink),
),
interval: Interval(
0.5,
1,
));
},
initialRotation: -pi / randomMirrorOffset ),
]).paint(canvas, size, progress, seed);
}
}现在，将DemoParticle()替换为MyParticle() &您将产生泡沫涟漪效应。
若要继续重复气泡动画，请执行以下操作。变化
Controller.forward(出发地: 0.0)；
至
Controller.repeat(周期:持续时间(秒: 1))；
在这里，您可以使用句点属性更改或跳过动画持续时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57961852
复制相关文章
相似问题
腾讯云开发者
