Flutter 如何实现类似示例效果的易上手摇摆抖动动画？

不需要依赖第三方库，用Flutter内置动画组件即可快速实现近似效果，核心是控制组件沿中心点做往复旋转，实现门槛极低。

实现步骤 #

• 第一步：在StatefulWidget的State类中混入SingleTickerProviderStateMixin，用来提供动画所需的Ticker
• 第二步：初始化AnimationController，设置动画时长，以及重复往复播放的属性
• 第三步：创建Animation<double>类型的旋转值对象，通过Tween把数值范围映射到你需要的旋转弧度区间即可，常用范围是-0.1到0.1弧度，对应大概正负6度的摇摆角度，想要幅度更大直接调整这个区间数值即可
• 第四步：用RotationTransition组件包裹你要加摇摆效果的组件，把动画对象赋值给turns属性即可

可直接运行的完整示例代码 #

import 'package:flutter/material.dart';

class ShakeWidget extends StatefulWidget {
  // 要加摇摆效果的子组件
  final Widget child;
  // 摇摆幅度，默认正负0.1弧度
  final double shakeAngle;
  // 单次摇摆周期时长，默认500毫秒
  final Duration duration;

  const ShakeWidget({
    super.key,
    required this.child,
    this.shakeAngle = 0.1,
    this.duration = const Duration(milliseconds: 500),
  });

  @override
  State<ShakeWidget> createState() => _ShakeWidgetState();
}

class _ShakeWidgetState extends State<ShakeWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    );
    // 让动画往复重复播放
    _controller.repeat(reverse: true);
    _animation = Tween<double>(begin: -widget.shakeAngle, end: widget.shakeAngle).animate(
      CurvedAnimation(
        parent: _controller,
        // 用easeInOut曲线让摇摆更自然，你也可以换其他曲线调整效果
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _animation,
      child: widget.child,
    );
  }
}

// 调用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(
        // 直接包裹你要摇摆的组件即可
        child: ShakeWidget(
          child: Text(
            '摇摆测试',
            style: TextStyle(fontSize: 32),
          ),
        ),
      ),
    ),
  ));
}

效果调整方式 #

• 调整摇摆幅度：修改shakeAngle参数，数值越大摇摆越明显
• 调整摇摆速度：修改duration参数，时长越短摇摆越快
• 调整摇摆节奏：更换CurvedAnimation的curve属性，比如用Curves.bounceOut可以做出带弹动的摇摆效果

内容的提问来源于stack exchange，提问作者who-aditya-nawandar