玩转Flutter动画1 —— 实现简易动画，趣味享不停

Android

2023-10-14 08:52:19

Flutter 动画初探：打造酷炫视觉效果

什么是动画？

动画是一种让视觉元素随着时间变化的艺术。它可以在用户界面中创造出引人入胜且互动的体验。

Flutter 中的动画

Flutter 是一个强大的移动应用开发框架，它具有出色的动画功能。Flutter 中的动画是通过 Animation 类和 AnimationController 类实现的。

构建一个简单的动画

对于 Flutter 初学者来说，创建一个简单的动画是迈出的第一步。让我们从一个基本的平移动画开始：

第一步：导入 Flutter 库

import 'package:flutter/animation.dart';

第二步：定义一个动画控制器

动画控制器控制动画的持续时间和播放速度。

AnimationController controller = AnimationController(duration: Duration(seconds: 2), vsync: this);

第三步：定义一个动画

动画指定了视觉元素如何随着时间变化。我们使用 Tween 类来创建从 0 到 300 的线性变化。

Animation<double> animation = Tween<double>(begin: 0, end: 300).animate(controller);

第四步：添加动画监听器

动画监听器在动画更新时被调用。

animation.addListener(() {
  setState(() {
    // 更新 UI
  });
});

第五步：启动动画

controller.forward();

第六步：停止动画

controller.stop();

第七步：销毁动画

controller.dispose();

完整代码示例

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
    animation = Tween<double>(begin: 0, end: 300).animate(controller);
    animation.addListener(() {
      setState(() {});
    });
    controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter 动画入门"),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) {
            return Transform.translate(
              offset: Offset(animation.value, 0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            );
          },
        ),
      ),
    );
  }
}