我想在这个页面上添加一个按钮,以便(播放或暂停)后台的波浪动画。
代码链接:https://github.com/apgapg/flutter_profile/blob/master/lib/page/intro_page.dart我尝试了很多方法,但由于我对Flutter动画还不熟悉,所以没有取得任何结果。
谢谢提前。
我想在这个页面上添加一个按钮,以便(播放或暂停)后台的波浪动画。
代码链接:https://github.com/apgapg/flutter_profile/blob/master/lib/page/intro_page.dart我尝试了很多方法,但由于我对Flutter动画还不熟悉,所以没有取得任何结果。
谢谢提前。
AnimationController _controller = ...;
// To stop animation
_controller.stop();
// To start from beginning
_controller.forward();
// To start from a point other than the very beginning.
_controller.forward(from: 0.8);
我不知道那段代码,这是我的方法。你只需要使用Controller.reset()
来停止动画并使用Controller.repeat()
来开始它。
但是如果你只需要启动动画一次,请使用Controller.forward()
和Controller.reverse()
。
void main() => runApp(MaterialApp(home: Scaffold(body: HomePage())));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
bool _isPlaying = true;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
lowerBound: 0.3,
duration: Duration(seconds: 3),
)..repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Animation")),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
_buildCircularContainer(200),
_buildCircularContainer(250),
_buildCircularContainer(300),
Align(child: CircleAvatar(backgroundImage: AssetImage("assets/images/profile.png"), radius: 72)),
Align(
alignment: Alignment(0, 0.5),
child: RaisedButton(
child: Text(_isPlaying ? "STOP" : "START"),
onPressed: () {
if (_isPlaying) _controller.reset();
else _controller.repeat();
setState(() => _isPlaying = !_isPlaying);
},
),
),
],
),
);
}
Widget _buildCircularContainer(double radius) {
return AnimatedBuilder(
animation: CurvedAnimation(parent: _controller, curve: Curves.fastLinearToSlowEaseIn),
builder: (context, child) {
return Container(
width: _controller.value * radius,
height: _controller.value * radius,
decoration: BoxDecoration(color: Colors.black54.withOpacity(1 - _controller.value), shape: BoxShape.circle),
);
},
);
}
}
当您直接访问动画控制器时,此代码片段将启动/停止动画,无论其离开的位置在哪里。
animationController.isAnimating
? animationController.stop()
: animationController.forward();
这里的 .isAnimating
属性是布尔类型,当 animationController 正在进行动画时为 true。根据结果,.stop()
/ .forward()
分别停止/开始动画。