내가 보려고 쓰는 Flutter 일기
참고1 : https://api.flutter.dev/flutter/animation/Tween-class.html

Tween

오늘 배워볼 것은 Tween.
지난 시간에, AnimationController의 기본 범위는 0~1까지 라고 하였다. 물론 범위 하나갖고는 충분하지 않아서, Transform.rotate, scale, translate에 사용할 때는 범위에 숫자를 이것저것 곱해서 사용했었다.
(범위가 어떻게 적용되는지를 알아보기 위한 용도였긴 하지만, 물론 보통은 이렇게 하지는 않을 것이다.)

범위를 바꿔서 적용할 때는 Tween 을 쓴다. Tween은 시작값, 끝값 사이의 선형보간법을 뜻한다고 한다.

선형 보간법(線型補間法, linear interpolation)은 끝점의 값이 주어졌을 때 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법이다. 위키백과-선형보간법

간단하게, 지난 시간에 배운 AnimatedBuilder 코드를 가져와서 변형해 볼 것이다.

코드 예시로 알아보자

우선 Tween은 두 가지 방법으로 쓸 수 있다고 한다.

//Case1
_animation = _controller.drive(
  Tween<Offset>(
    begin: const Offset(100.0, 50.0),
    end: const Offset(200.0, 300.0),
  ),
);

//Case2
_animation = Tween<Offset>(
  begin: const Offset(100.0, 50.0),
  end: const Offset(200.0, 300.0),
).animate(_controller);

animation은 controller, 즉 AnimationController가 살아 있는 동안은 살아있다. 즉, AnimationController.dispose()를 하면 다같이 죽는다.






저번 일기 코드를 가져와서 AnimationController부분을 변형해보자. 범위는 저번 일기와 동일하게 설정할 것이다.

import 'dart:math' as math;

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}


class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat();

  //Case1 방법으로 작성
  late Animation _rotateAnimation = _animationController.drive(
    Tween<double>(begin: 0, end: math.pi * 2),
  );
  //Case2 방법으로 작성
  late Animation _scaleAnimation =
      Tween<double>(begin: 0.0, end: 3).animate(_animationController);
  late Animation _translateAnimation =
      Tween<Offset>(begin: Offset(0, 0), end: Offset(0, 600))
          .animate(_animationController);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test AnimatedBuilder'),
      ),
      body: Container(
        child: Center(
          child: AnimatedBuilder(
            animation: _animationController,
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.green,
              child: const Center(
                child: Text(
                  'Whee!',
                  style: TextStyle(fontSize: 50),
                ),
              ),
            ),
            builder: (BuildContext context, Widget? child) {
              return Transform.translate(
                offset: _translateAnimation.value,
                child: child,
              );
              // return Transform.scale(
              //   scale: _scaleAnimation.value,
              //   child: Transform.rotate(
              //     angle: _rotateAnimation.value,
              //     child: child,
              //   ),
              // );
            },
          ),
        ),
      ),
    );
  }
}

실행화면은 지난 일기의 코드와 동일하고, 아래와 같다.

translate	scale, rotate

scale, rotate, translate 를 따로 쓰긴 했는데, 3개를 한꺼번에 써도 된다.

오늘의 일기는 여기까지!