flutter - Flutter 实现重复 Elastic 动画
问题描述
用于实现这个动画
我在下面的代码中写了这个,但是弹性动画在项目上不起作用,我不确定是什么问题,
我想重复这个动画
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)),
),
),
),
],
),
);
}
}
推荐阅读
- java - ScheduledExecutorService 用于在异常后仍然存在的任务
- javascript - AngularJS Material Datepicker 更改格式
- python - 替换 JSON 文件中的方括号和逗号
- python - 将 Numpy 数组转换为 datetime.date pandas DataFrame
- visual-studio-code - 如何在另存为对话框中添加新的文件类型过滤器
- c - mac的多点触控代码
- scala - 将异常结果转换为迭代器
- swift - 可以创建从视图控制器的角落出现的 UITableView
- c - “使用带二进制位运算符的有符号整数操作数” - 使用无符号短时
- c# - 设置 ShowDialog 的 UIaccess 更改行为