Flutter如何实现上下平移动画效果

在Flutter中，我想实现一个组件上下平移动画效果，比如让一个图标或文字在垂直方向来回移动。尝试了AnimatedContainer和Transform.translate，但动画不够流畅，且无法循环播放。请问如何用最简单的方式实现持续的上下平移动画？最好能自定义移动距离和速度，同时避免性能问题。有没有完整的代码示例可以参考？

2 回复

使用Flutter实现上下平移动画，可以通过Transform.translate结合AnimationController。步骤如下：

  1. 创建AnimationController控制动画时长和状态。
  2. 使用Tween定义位移范围，如Tween(begin: 0.0, end: 100.0)。
  3. 在build方法中，用Transform.translate包裹组件，设置offset为动画值。
  4. 调用controller.forward()启动动画。

示例代码片段：

AnimationController controller;
Animation<double> animation;

@override
void initState() {
  super.initState();
  controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
  animation = Tween(begin: 0.0, end: 100.0).animate(controller);
  controller.forward();
}

@override
Widget build(BuildContext context) {
  return Transform.translate(
    offset: Offset(0, animation.value),
    child: YourWidget(),
  );
}

更多关于Flutter如何实现上下平移动画效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现上下平移动画效果，可以使用Transform.translate结合动画控制器。以下是完整实现步骤：

1. 基础实现代码：

import 'package:flutter/material.dart';

class SlideAnimationDemo extends StatefulWidget {
  @override
  _SlideAnimationDemoState createState() => _SlideAnimationDemoState();
}

class _SlideAnimationDemoState extends State<SlideAnimationDemo> 
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    
    _animation = Tween<Offset>(
      begin: Offset(0, -1), // 从上方开始（-1表示向上偏移一个屏幕高度）
      end: Offset(0, 1),   // 移动到下方（1表示向下偏移一个屏幕高度）
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    _controller.repeat(reverse: true); // 循环往复运动
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.translate(
              offset: _animation.value * 100, // 偏移量（可根据需要调整）
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: const Icon(Icons.arrow_upward, color: Colors.white),
              ),
            );
          },
        ),
      ),
    );
  }

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

2. 关键参数说明：

  • Offset(0, -1)：y轴-1表示向上偏移完整高度，可根据实际需要调整比例
  • duration：控制动画速度
  • Curves.easeInOut：添加缓动效果使动画更自然
  • repeat(reverse: true)：实现往返循环动画

3. 其他实现方式： 如需简单上下移动，也可使用SlideTransition：

SlideTransition(
  position: _animation,
  child: YourWidget(),
)

4. 控制方法：

  • 启动动画：_controller.forward()
  • 停止动画：_controller.stop()
  • 重置动画：_controller.reset()

这种方法性能优化良好，能实现流畅的60fps动画效果。

回到顶部