TweenAnimationBuilder

기본적인 애니메이션을 만들고 싶지만 애니메이션을 적용하려는 프로퍼티의 이름인 animated foo라는 위젯이 내장되어 있지 않다고 가정해 보겠습니다. 다행히도 TweenAnimationBuilder를 사용하여 해당 애니메이션을 만들 수 있습니다. 참고로 기본 애니메이션이란 영원히 반복되지 않고 하나의 위젯에 불과한 애니메이션을 의미합니다.

다른 애니메이션 위젯에 대한 다음 에피소드에서 이러한 작업을 수행하는 방법에 대해 설명하겠습니다. 이 위젯을 사용하는 방법에 대해 간단히 개괄적으로 설명하겠습니다. 그런 다음 몇 가지 예제를 살펴보겠습니다. 다른 사용 사례도 자세히 살펴보세요. TweenAnimationBuilder를 사용하려면 duration 매개 변수를 사용하여 애니메이션에 걸리는 시간을 설정하고, tween 매개 변수를 사용하여 애니메이션이 작동할 값의 범위를 설정합니다.

이름에서 알 수 있듯이 Tween 객체를 사용하면 애니메이션을 적용할 값의 범위를 지정할 수 있습니다. 마지막으로 지정해야 할 것은 특정 시점에 애니메이션 위젯이 어떻게 보일지 반환하는 builder 매개변수입니다. builder 함수는 트윈 값과 동일한 유형의 매개 변수를 받아 기본적으로 주어진 순간에 그려야 할 현재 애니메이션 값을 Flutter에 알려줍니다.

이것만 알아두면 TweenAnimationBuilder로 멋진 암시적 애니메이션을 작성하는 데 필요한 모든 것을 알 수 있습니다. 요약하자면, 내장된 애니메이션 푸 타입 위젯을 찾을 수 없는 경우 TweenAnimationBuilder는 설정 후 잊어버리는 암시적 애니메이션을 만들 수 있는 좋은 방법입니다. TweenAnimationBuilder에서 끝값을 변경하여 새로운 값으로 부드럽게 애니메이션을 적용할 수 있습니다.

TweenAnimationBuilder는 Flutter에서 간단한 값의 변화를 애니메이션화하려 할 때 유용한 위젯입니다. 복잡한 애니메이션을 다루기 위한 AnimationController와 같은 구성요소 없이도 특정 값을 다른 값으로 부드럽게 변경할 수 있습니다.

이 위젯의 주요 구성 요소와 그 기능에 대해 자세히 살펴보겠습니다.

1. tween

   • 이는 애니메이션의 시작 값과 종료 값을 정의합니다.
   • 예: Tween<double>(begin: 0, end: 1)은 애니메이션 값이 0에서 1까지 변화한다는 것을 의미합니다.

2. duration

   • 애니메이션의 전체 지속 시간을 결정합니다.
   • 예: Duration(seconds: 2)는 애니메이션의 지속 시간이 2초임을 나타냅니다.

3. builder

   • 현재 애니메이션 값에 따라 위젯을 만들 함수입니다.
   • 이 함수는 세 개의 매개변수를 가집니다: (BuildContext, value, Widget?). 여기서 value는 tween의 현재 값입니다.
   • builder는 각 애니메이션 프레임에 대해 호출되며, value는 해당 프레임의 tween 값입니다.

4. onEnd

   • 애니메이션 완료시 호출되는 콜백 함수입니다.
   • 애니메이션이 종료된 후에 어떤 동작을 수행하고 싶을 때 사용합니다.

5. curve

   • 애니메이션의 속도 곡선을 정의합니다.
   • 예를 들어, Curves.easeIn은 애니메이션 시작 시 느리게, 종료 시에는 빠르게 하려 할 때 사용합니다.

6. child

   • 선택적인 매개변수로, builder에 전달되는 위젯입니다.
   • builder가 호출될 때마다 재생성되지 않아야 하는 위젯의 부분이 있다면 여기에 전달하여 빌더의 호출 횟수를 줄이고 성능을 향상시킬 수 있습니다.

이외에도 TweenAnimationBuilder에는 다양한 속성들이 있습니다만, 위의 항목들은 가장 핵심적이고 흔히 사용되는 매개변수들입니다.

간단한 사용 예:

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0, end: 1),
  duration: Duration(seconds: 2),
  builder: (BuildContext context, double value, Widget? child) {
    return Opacity(
      opacity: value,
      child: Text('안녕하세요! 플러터'),
    );
  },
)

위 예제에서는 Opacity 위젯의 투명도가 2초 동안 0에서 1로 변경되면서, 텍스트가 점점 보이게 됩니다.

import 'package:flutter/material.dart';

class ImplicitAnimationsScreen extends StatefulWidget {
  const ImplicitAnimationsScreen({super.key});

  @override
  State<ImplicitAnimationsScreen> createState() =>
      _ImplicitAnimationsScreenState();
}

class _ImplicitAnimationsScreenState extends State<ImplicitAnimationsScreen> {
  bool _visible = true;

  void _trigger() {
    setState(() {
      _visible = !_visible;
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Implict Animations'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TweenAnimationBuilder(
              tween: ColorTween(
                begin: Colors.yellow,
                end: Colors.red,
              ),
              curve: Curves.bounceInOut,
              duration: const Duration(seconds: 5),
              builder: (context, value, child) {
                return Image.network(
                  "https://upload.wikimedia.org/wikipedia/commons/4/4f/Dash%2C_the_mascot_of_the_Dart_programming_language.png",
                  color: value,
                  colorBlendMode: BlendMode.colorBurn,
                );
              },
            ),
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: _trigger,
              child: const Text('Go!'),
            )
          ],
        ),
      ),
    );
  }
}

TweenAnimationBuilder는 간단한 값의 변화를 부드럽게 애니메이션화하기 위한 위젯입니다. 이 위젯은 특정 값을 다른 값으로 선형적(또는 지정된 곡선에 따라)으로 부드럽게 변경할 수 있습니다. 그리고 이 변화하는 값을 사용하여 무언가를 시각적으로 표현합니다.

여기서 제시된 코드에서 TweenAnimationBuilder의 동작 및 사용에 대해 자세히 살펴보겠습니다.

1. tween (ColorTween)

   • ColorTween은 Tween<Color>의 하위 클래스로, 색상 간의 부드러운 전환을 정의합니다.
   • 이 예제에서는 애니메이션이 시작될 때 노란색(Colors.yellow)에서 시작하여 빨간색(Colors.red)으로 종료됩니다.

2. curve (Curves.bounceInOut)

   • Curves.bounceInOut은 애니메이션의 속도 곡선을 나타내며, 애니메이션 시작과 종료에 튕김 효과를 부여합니다.

3. duration (Duration(seconds: 5))

   • 애니메이션의 전체 지속 시간을 결정합니다. 여기서는 5초로 설정되었습니다.

4. builder

   • 현재 애니메이션 값(여기서는 value와 같은 색상 값)에 따라 위젯을 작성하는 함수입니다.
   • 이 예제에서는 Image.network를 반환하며, 그 이미지의 색상은 애니메이션의 현재 값(value)에 의해 결정됩니다.
   • colorBlendMode: BlendMode.colorBurn은 이미지에 적용된 색상과 어떻게 혼합될 것인지를 결정합니다. 여기서는 colorBurn 혼합 모드가 사용되어 애니메이션 값이 변경됨에 따라 이미지의 색상이 점점 더 진하게 보이게 됩니다.

이 코드에서는 버튼(ElevatedButton)을 누르면 _trigger 함수가 호출되며 _visible 상태 값이 토글됩니다. 하지만 현재 _visible은 어디에서도 사용되고 있지 않습니다. 만약 _visible 값에 따라 TweenAnimationBuilder의 시작 및 종료 색상을 변경하려면 이 값을 활용할 수 있습니다.

결론적으로, 이 코드에서 TweenAnimationBuilder는 웹에서 가져온 이미지의 색상을 5초 동안 노란색에서 빨간색으로 변경하는 애니메이션을 생성합니다.

해당 코드는 TweenAnimationBuilder를 사용하여 Flutter의 Dart 로고 이미지의 색상을 애니메이션하는 앱의 일부입니다. 다음은 코드의 주요 부분을 상세하게 설명합니다:

1. ImplicitAnimationsScreen:

   • 이 클래스는 앱의 주요 위젯을 정의합니다. StatefulWidget로 정의되어 있으므로 상태를 변경하면서 UI를 다시 렌더링 할 수 있습니다.

2. _ImplicitAnimationsScreenState:

   • 상태 관리를 위한 내부 클래스입니다.
   • _visible라는 bool 타입의 멤버 변수가 있으며, 기본값은 true입니다. 하지만 현재 코드에서는 이 변수가 활용되지 않고 있습니다.

3. _trigger 함수:

   • _visible 변수의 값을 토글하는 함수입니다.
   • 현재 코드에서는 _trigger 함수가 호출되면 _visible의 상태가 변경되지만, UI에는 어떠한 영향도 미치지 않습니다.

4. build 함수:

   • 앱의 UI를 구성합니다.

5. TweenAnimationBuilder:

   • 색상 애니메이션을 적용하기 위한 위젯입니다.
   • ColorTween을 사용하여 시작 색상(Colors.yellow)과 종료 색상(Colors.red)을 지정합니다.
   • curve 프로퍼티로는 Curves.bounceInOut을 사용하여 애니메이션에 특별한 효과를 주었습니다.
   • duration은 애니메이션의 지속 시간을 지정합니다. 여기서는 5초로 설정되었습니다.
   • builder는 애니메이션 값이 변경될 때마다 호출되는 함수입니다. 이 예제에서는 Dart 로고의 색상을 변경합니다.

6. ElevatedButton:

   • 버튼을 누르면 _trigger 함수가 호출됩니다. 하지만 현재 _trigger 함수는 UI에 영향을 주는 코드를 포함하고 있지 않기 때문에 버튼을 눌러도 화면에는 아무 변화도 일어나지 않습니다.

요약하면, 이 코드는 Dart 로고의 색상을 5초 동안 노란색에서 빨간색으로 부드럽게 변경하는 애니메이션을 보여주는 앱의 일부입니다. 그리고 버튼을 클릭하면 내부 상태를 변경하는 함수가 호출되지만 현재로서는 이 변경이 UI에 반영되지 않습니다.

TwinAnimationBuilder는 Flutter에서 두 개의 다른 애니메이션을 동시에 실행할 수 있게 해주는 위젯입니다. AnimatedContainer와 달리 TwinAnimationBuilder는 자체 애니메이션을 가지고 있지 않습니다. 대신, 두 개의 다른 애니메이션을 입력으로 받아들이고 해당 애니메이션의 결과를 결합한 결과를 출력합니다.

TwinAnimationBuilder의 매개변수는 다음과 같습니다.

• firstAnimation: 첫 번째 애니메이션을 지정합니다.
• secondAnimation: 두 번째 애니메이션을 지정합니다.
• builder: 두 개의 애니메이션의 결과를 결합한 결과를 출력하는 함수를 지정합니다.

builder 함수는 두 개의 애니메이션의 결과를 입력으로 받아들이고 그 결과를 사용하여 위젯을 생성합니다. 예를 들어, 다음 코드는 TwinAnimationBuilder를 사용하여 두 개의 ColorTween 애니메이션의 결과를 결합한 결과를 출력하는 위젯을 생성합니다.

TwinAnimationBuilder<Color, Color>(
  firstAnimation: ColorTween(begin: Colors.red, end: Colors.blue).animate(animationController),
  secondAnimation: ColorTween(begin: Colors.yellow, end: Colors.green).animate(animationController),
  builder: (context, firstAnimationValue, secondAnimationValue) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blend(firstAnimationValue, secondAnimationValue, animationController.value),
    );
  },
)

이 코드는 다음과 같은 결과를 생성합니다.

[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: First animation value: Color(0xffff0000)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: Second animation value: Color(0xffff00ff)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: Blended color: Color(0xffff0000)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: First animation value: Color(0xffff0000)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: Second animation value: Color(0xffff00ff)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: Blended color: Color(0xffff0080)
...
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: First animation value: Color(0x00000000)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: Second animation value: Color(0x00000000)
[2023-07-20 22:16:01.413] [INFO] TwinAnimationBuilder: Blended color: Color(0x00000000)

위의 예제에서 보듯이 TwinAnimationBuilder를 사용하여 두 개의 다른 애니메이션을 동시에 실행하고 그 결과를 결합한 결과를 출력할 수 있습니다. TwinAnimationBuilder는 다양한 애니메이션 효과를 만들 때 유용한 위젯입니다.