为了实现这个动画
我在下面写了这段代码,但是弹性动画在项目上不起作用,我不确定是什么问题,
我想重复这个动画
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: Avatar(),));
class Avatar extends StatefulWidget {
@override
State<StatefulWidget> createState()=>_Avatar();
}
class _Avatar extends State<Avatar> with TickerProviderStateMixin{
AnimationController avatarController;
Animation<double> avatarSize;
@override
void initState() {
super.initState();
avatarController= AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
avatarSize = new Tween(begin: 0.0, end: 1.0).animate(
new CurvedAnimation(
parent: avatarController,
curve: new Interval(
0.100,
0.400,
curve: Curves.elasticOut,
),
),
);
avatarController.repeate();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit:StackFit.expand,
children: <Widget>[
AnimatedBuilder(
animation: avatarController,
builder: (context, widget) => Align(
child: Container(
width: 50.0,
height: 50.0,
color:Colors.green
),
),
)
],
),
);
}
}
最佳答案
输出:
您可以使用 duration
和 Tween
来细化它。
void main() => runApp(MaterialApp(home: Avatar()));
class Avatar extends StatefulWidget {
@override
State<StatefulWidget> createState() => _Avatar();
}
class _Avatar extends State<Avatar> with TickerProviderStateMixin {
AnimationController _controller;
Tween<double> _tween = Tween(begin: 0.75, end: 2);
@override
void initState() {
super.initState();
_controller = AnimationController(duration: const Duration(milliseconds: 700), vsync: this);
_controller.repeat(reverse: true);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Align(
child: ScaleTransition(
scale: _tween.animate(CurvedAnimation(parent: _controller, curve: Curves.elasticOut)),
child: SizedBox(
height: 100,
width: 100,
child: CircleAvatar(backgroundImage: AssetImage(chocolateImage)),
),
),
),
],
),
);
}
}
关于Flutter实现重复弹性动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57553062/