要播放和暂停一个Flutter动画,可以使用AnimationController和Tween来管理动画的状态和值。下面是一个示例代码,演示了如何实现播放和暂停动画的功能:
import 'package:flutter/material.dart';
class AnimatedLogo extends StatefulWidget {
@override
_AnimatedLogoState createState() => _AnimatedLogoState();
}
class _AnimatedLogoState extends State
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
// 创建动画控制器
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
// 创建补间动画
_animation = Tween(begin: 0, end: 300).animate(_controller);
// 添加动画状态监听器
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
// 动画完成后,反向播放动画
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
// 反向播放动画完成后,重新正向播放动画
_controller.forward();
}
});
// 启动动画
_controller.forward();
}
@override
void dispose() {
// 销毁动画控制器
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget child) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: _animation.value,
width: _animation.value,
child: FlutterLogo(),
);
},
);
}
}
class PlayPauseAnimationPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Play and Pause Animation'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedLogo(),
SizedBox(height: 20),
RaisedButton(
onPressed: () {
// 播放动画
_playAnimation();
},
child: Text('播放'),
),
RaisedButton(
onPressed: () {
// 暂停动画
_pauseAnimation();
},
child: Text('暂停'),
),
],
),
),
);
}
void _playAnimation() {
// 检查动画是否已经完成
if (_controller.isCompleted) {
// 重新正向播放动画
_controller.forward(from: 0);
} else {
// 继续播放动画
_controller.forward();
}
}
void _pauseAnimation() {
// 暂停动画
_controller.stop();
}
}
void main() {
runApp(MaterialApp(
home: PlayPauseAnimationPage(),
));
}
在这个示例中,AnimatedLogo是一个继承自StatefulWidget的小部件,它使用AnimationController和Tween来创建动画,并在build方法中使用AnimatedBuilder来构建动画的UI。PlayPauseAnimationPage是一个包含播放和暂停按钮的页面,当点击播放按钮时,调用_playAnimation方法来播放动画,当点击暂停按钮时,调用_pauseAnimation方法来暂停动画。