Flutter Tween实现抖动效果

最新推荐文章于 2024-06-01 09:11:41 发布

原创最新推荐文章于 2024-06-01 09:11:41 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Tween实现抖动效果 #Flutter 抖动效果

Flutter 基础同时被 2 个专栏收录

73 篇文章

订阅专栏

Flutter扩展

8 篇文章

订阅专栏

本文介绍如何在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,
      ),
    );
  },
)