抖动效果实现起来并不难,主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等
效果图
所需知识
Tween动画
Curve曲线
实现代码
- 定义变量
//平移动画控制器
AnimationController mAnimationController;
//提供一个曲线,使动画感觉更流畅
CurvedAnimation offsetCurvedAnimation;
//平移动画
Animation<double> offsetAnim;
- 在init中实例化()
mAnimationController = AnimationController(duration: Duration(milliseconds: _milliseconds), vsync: this);
offsetCurvedAnimation = new CurvedAnimation( parent: mAnimationController, curve: MyCurve());
offsetAnim = new Tween(begin: -1.0, end: 1.0).animate(offsetCurvedAnimation);
- 使用动画
AnimatedBuilder(
animation: offsetAnim,//添加动画
builder: (context, _) {
return Transform.translate(
offset: Offset(offsetAnim.value,0),// 1,0 水平移动 -- 0,1垂直移动
child: Container(
height: 200,
width: 200,
color: Colors.red,
),
);
},
)
- 执行动画
mAnimationController.forward();