Hoạt ảnh (animation) là một phần quan trọng trong trải nghiệm người dùng trên ứng dụng di động. Trong Flutter, AnimationController là một công cụ mạnh mẽ giúp bạn tạo ra các hiệu ứng hoạt ảnh mượt mà và linh hoạt. Bài viết này sẽ hướng dẫn bạn cách sử dụng AnimationController để xây dựng hoạt ảnh tùy chỉnh trong Flutter.

1. AnimationController là gì?

AnimationController là một loại đặc biệt của Animation, hoạt động như một bộ điều khiển để quản lý trạng thái và tiến trình của hoạt ảnh. Nó cung cấp quyền kiểm soát toàn diện đối với thời gian và cách thức hoạt ảnh diễn ra.

Các thuộc tính quan trọng:

• vsync: Giúp tiết kiệm tài nguyên bằng cách đồng bộ hóa hoạt ảnh với tốc độ khung hình của thiết bị.
• duration: Xác định thời gian chạy của hoạt ảnh.
• value: Giá trị hiện tại của hoạt ảnh (thường từ 0 đến 1).
• status: Trạng thái của hoạt ảnh (forward, reverse, completed, dismissed).

2. Cách sử dụng AnimationController

Bước 1: Tạo AnimationController

Trong Flutter, bạn cần một TickerProvider để sử dụng AnimationController. Nếu widget của bạn là StatefulWidget, bạn có thể thêm SingleTickerProviderStateMixin vào State.

class MyAnimationScreen extends StatefulWidget {
  @override
  _MyAnimationScreenState createState() => _MyAnimationScreenState();
}

class _MyAnimationScreenState extends State<MyAnimationScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
  }

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

Bước 2: Bắt đầu và điều khiển hoạt ảnh

Bạn có thể bắt đầu, dừng hoặc đảo ngược hoạt ảnh bằng các phương thức:

_controller.forward();  // Chạy từ 0 -> 1
_controller.reverse();  // Chạy ngược từ 1 -> 0
_controller.repeat();   // Lặp vô hạn
_controller.stop();     // Dừng hoạt ảnh

Bước 3: Sử dụng AnimatedBuilder để vẽ UI

Sử dụng AnimatedBuilder giúp cập nhật giao diện theo giá trị của AnimationController một cách hiệu quả.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.scale(
            scale: _controller.value,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          );
        },
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        _controller.forward(from: 0);
      },
      child: Icon(Icons.play_arrow),
    ),
  );
}

Xem thêm Sử dụng công cụ Profiling trong Flutter để tối ưu hiệu năng

3. Kết hợp với Tween để tạo hiệu ứng mượt mà

Bạn có thể kết hợp Tween để tạo hiệu ứng chuyển đổi mềm mại.

Animation<double> _sizeAnimation = Tween<double>(begin: 50, end: 200).animate(_controller);

Sau đó sử dụng _sizeAnimation.value trong AnimatedBuilder để điều chỉnh kích thước hoặc màu sắc của widget.

Kết luận

AnimationController là một công cụ mạnh mẽ giúp bạn kiểm soát hoạt ảnh trong Flutter. Kết hợp với Tween và AnimatedBuilder, bạn có thể tạo ra những hiệu ứng mượt mà và sống động. Hãy thử nghiệm với các tham số khác nhau để tạo ra hiệu ứng tùy chỉnh cho ứng dụng của bạn!

Chúc bạn thành công trên con đường công nghệ thông tin!