我正试着给这个页面添加一个按钮,它将在背景中播放或暂停海浪动画. 编码链接:https://github.com/apgapg/flutter_profile/blob/master/lib/page/intro_page.dart
我试过很多方法,但是我还是不擅长拍打动画,所以还是没有结果.
提前谢谢.
我正试着给这个页面添加一个按钮,它将在背景中播放或暂停海浪动画. 编码链接:https://github.com/apgapg/flutter_profile/blob/master/lib/page/intro_page.dart
我试过很多方法,但是我还是不擅长拍打动画,所以还是没有结果.
提前谢谢.
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),
);
},
);
}
}