flutter开发实战-实现左右来回移动的按钮引导动画效果
最近开发过程中需要实现左右来回移动的按钮引导动画效果
一、动画
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。
实现左右来回移动的按钮引导动画效果代码效果
dart
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;
@override
void initState() {
// TODO: implement initState
super.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();
}
@override
void dispose() {
// TODO: implement dispose
animationDispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Transform(
///构建Matrix4
transform: 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);
@override
Widget 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轴方向平移。
三、小结
flutter开发实战-实现左右来回移动的按钮引导动画效果。
学习记录,每天不停进步。