Flutter 개발 - 애니메이션 핵심 클래스 Tween

Tween은 Animatable을 상속하는데, 일반적으로 애니메이션의 값 범위는 (0.0,1.0)이지만, 이동값, 투명도, 색상값, 크기값 등 일부 애니메이션의 경우 (0.0,1.0)의 값 범위가 그렇지 않습니다. 까지 적용됩니다. 이때 Tween을 이용하여 범위를 지정할 수 있습니다. 코드 예:

final Tween tween = Tween(begin:0.0,end:100.0);

Tween 클래스에는 일반 유형이 있으므로 이중 유형일 필요는 없습니다. 색상 변경 애니메이션을 정의해야 하는 경우 ColorTween을 사용하여 이를 구현할 수 있습니다. 코드는 다음과 같습니다.

final Tween colorTween = ColorTween(begin:Colors.red,end:Colors.bule);

애니메이션을 실행하는 동안 애니메이션의 상태를 가져와야 하는 경우가 많습니다. 그러나 Tween은 상태를 저장하지 않으므로 애니메이션 값을 가져오려면 평가() 메서드를 호출해야 합니다. Tween은 컨트롤러 객체를 전달하기 위한 animate()도 제공합니다. 다음은 Tween을 사용하여 구현된 확대 -> 축소 무한 루프의 애니메이션입니다.

import 'package:flutter/material.dart';

class TweenPage extends StatefulWidget {
    
    
  final String title;
  const TweenPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<TweenPage> createState() => _TweenPageState();
}

class _TweenPageState extends State<TweenPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;

  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: 0.0, end: 200.0).animate(_animationController!)
      ..addStatusListener((status) {
    
    
        if (status == AnimationStatus.completed) {
    
    
          _animationController!.reverse();
        } else if (status == AnimationStatus.dismissed) {
    
    
          _animationController!.forward();
        }
      })
      ..addListener(() {
    
    
        setState(() {
    
    });
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          height: _animation!.value,
          width: _animation!.value,
          child: const FlutterLogo(),
        ),
      ),
    );
  }
}

위 애니메이션은 선형 애니메이션이고, 비선형 애니메이션은 Curve 클래스를 이용하여 구현할 수 있습니다.
먼저 보간기를 만들어야 합니다. 코드는 다음과 같습니다.

CurvedAnimation curvedAnimation = CurvedAnimation(parent:controller,curve:Curves.easeInOut);

CurvedAnimation과 AnimationController는 모두 Animation 클래스에 속합니다. 그리고 CurvedAnimation 패키징을 통해 Curves를 Tween.animate() 메서드로 설정하여 모션 곡선 설정 목적을 달성할 수 있습니다. 코드 예:

import 'package:flutter/material.dart';

class FreeFallPage extends StatefulWidget {
    
    
  final String title;
  const FreeFallPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<FreeFallPage> createState() => _FreeFallPageState();
}

class _FreeFallPageState extends State<FreeFallPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;

  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 5), vsync: this);
    CurvedAnimation curvedAnimation =
        CurvedAnimation(parent: _animationController!, curve: Curves.bounceOut);
    _animation = Tween(begin: 0.0, end: 600.0).animate(curvedAnimation)
      ..addListener(() {
    
    
        setState(() {
    
    });
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Positioned(
              left: MediaQuery.of(context).size.width / 2,
              top: _animation!.value,
              child: Container(
                margin: const EdgeInsets.only(right: 10.0),
                width: 20.0,
                height: 20.0,
                decoration: const BoxDecoration(
                    color: Colors.blue, shape: BoxShape.rectangle),
              ))
        ],
      ),
    );
  }
}