让Flutter的灵魂动起来——揭秘动画世界

前端

2022-12-12 11:51:06

深入领略 Flutter 动画：打造动感十足的应用程序

动画的魅力：认识关键角色

Flutter 动画的魔力源自四个关键角色：

Animation： 动画的本质，定义属性值随时间的变化。
Curve： 动画轨迹的指挥官，决定动画的运动模式。
Controller： 动画的总调度，控制启动、停止、重置等操作。
Tween： 动画的魔法转换器，将数值映射到属性值，让动画栩栩如生。

实践 Flutter 动画：动起来！

准备好后，让我们动手构建你的动画杰作：

基本动画：淡入淡出的魅力

淡入淡出是动画界的一位常客，它赋予你的应用程序以活力。

import 'package:flutter/animation.dart';

class FadeTransitionExample extends StatelessWidget {
  final AnimationController controller = AnimationController(
    duration: const Duration(seconds: 2),
  );
  final Animation<double> opacity = Tween<double>(begin: 0.0, end: 1.0).animate(controller);

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: opacity,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

延时动画：错落有致的节奏

延时动画为动画增添了错落有致的节奏，营造出视觉上的层次感。

import 'package:flutter/animation.dart';

class StaggeredAnimationExample extends StatelessWidget {
  final AnimationController controller = AnimationController(
    duration: const Duration(seconds: 5),
  );
  final Animation<double> animation1 = Tween<double>(begin: 0.0, end: 1.0).animate(
    CurvedAnimation(
      parent: controller,
      curve: Curves.easeIn,
    ),
  );
  final Animation<double> animation2 = Tween<double>(begin: 0.0, end: 1.0).animate(
    CurvedAnimation(
      parent: controller,
      curve: Curves.easeOut,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return StaggeredAnimation(
      controller: controller,
      children: [
        SlideTransition(
          position: Tween<Offset>(begin: Offset.zero, end: Offset(0.2, 0.0)).animate(animation1),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
        SlideTransition(
          position: Tween<Offset>(begin: Offset.zero, end: Offset(-0.2, 0.0)).animate(animation2),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}

曲线动画：展现动感

曲线动画让动画沿着各种轨迹运动，赋予其独特的动感。

import 'package:flutter/animation.dart';

class CurveAnimationExample extends StatelessWidget {
  final AnimationController controller = AnimationController(
    duration: const Duration(seconds: 2),
  );
  final Animation<double> animation = Tween<double>(begin: 0.0, end: 1.0).animate(
    CurvedAnimation(
      parent: controller,
      curve: Curves.bounceOut,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: animation,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    );
  }
}

组合动画：打造无限创意

组合动画让你将动画融合在一起，创造出复杂而引人入胜的效果。

import 'package:flutter/animation.dart';

class GroupAnimationExample extends StatelessWidget {
  final AnimationController controller = AnimationController(
    duration: const Duration(seconds: 5),
  );
  final Animation<double> animation1 = Tween<double>(begin: 0.0, end: 1.0).animate(controller);
  final Animation<double> animation2 = Tween<double>(begin: 0.0, end: -1.0).animate(controller);

  @override
  Widget build(BuildContext context) {
    return AnimationGroup(
      controller: controller,
      children: [
        RotationTransition(
          turns: animation1,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
        ScaleTransition(
          scale: animation2,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}