Flutter Tween实现抖动效果

 抖动效果实现起来并不难，主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等

效果图

所需知识

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();

完整代码

查看完整代码