当前位置：首页 > news >正文

flutter开发实战-实现左右来回移动的按钮引导动画效果

news 2025/7/22 11:15:48

最近开发过程中需要实现左右来回移动的按钮引导动画效果

在这里插入图片描述

一、动画

AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。AnimationController两个监听Listener如下

addListener
addListener()；它可以用于给Animation添加帧监听器，在每一帧都会被调用。帧监听器中最常见的行为是改变状态后调用setState()来触发UI重建。
addStatusListener
addStatusListener()；它可以给Animation添加“动画状态改变”监听器；动画开始、结束、正向或反向（见AnimationStatus定义）时会调用状态改变的监听器。

二、实现左右来回移动的按钮引导动画效果

在使用动画时候需要TickerProviderStateMixin或者SingleTickerProviderStateMixin
当需要多个Animation，则使用TickerProviderStateMixin

注意：在使用AnimationController的时候需要结合TickerProvider，因为只有在TickerProvider下才能配置AnimationController中的构造参数vsync。TickerProvider是一个抽象类，所以我们一般使用它的实现类TickerProviderStateMixin和SingleTickerProviderStateMixin。

实现左右来回移动的按钮引导动画效果代码效果

import 'package:flutter/material.dart';class ShakeContainer extends StatefulWidget {const ShakeContainer({required this.child, Key? key}) : super(key: key);final Widget child;@override_ShakeContainerState createState() => _ShakeContainerState();
}class _ShakeContainerState extends State<ShakeContainer>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation<double> _animation;@overridevoid initState() {// TODO: implement initStatesuper.initState();_animationController =AnimationController(vsync: this, duration: Duration(milliseconds: 600));//使用弹性曲线_animation =CurvedAnimation(parent: _animationController, curve: Curves.easeOut);_animation = Tween(begin: 0.0, end: 1.0).animate(_animation);_animationController.addListener(() {if (mounted) {setState(() {});}});_animationController.addStatusListener((status) {if (status == AnimationStatus.completed) {_animationController.reverse();} else if (status == AnimationStatus.dismissed) {_animationController.forward();}});_animationController.forward();}void animationDispose() {_animationController.dispose();}@overridevoid dispose() {// TODO: implement disposeanimationDispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.center,child: Transform(///构建Matrix4transform: buildMatrix4(),///中心对齐alignment: Alignment.center,child: widget.child,),);}Matrix4 buildMatrix4() {double dx = 0;double dy = 0;///x轴方向平移dx = _animation.value * 60;return Matrix4.translationValues(dx, dy, 0);}
}/// 左右摆动的心
class HeartItem extends StatelessWidget {const HeartItem({Key? key}): super(key: key);@overrideWidget build(BuildContext context) {return Container(width: 200.0,height: 150.0,alignment: Alignment.center,child: Image.asset("assets/images/touch_here.png",width: 200.0,height: 150,),);}
}

在代码中用到了Matrix4.translationValues(dx, dy, 0); 可以在指定的x、或者y轴方向平移。

在这里插入图片描述