Flutter 애니메이션 : 생동감 있는 인터페이스 구현

기본적으로 컴파일된 애플리케이션을 구축하기 위한 Google의 UI 툴킷인 Flutter는 단지 정적이고 응답하지 않는 위젯에 관한 것이 아닙니다. 이는 움직임, 반응성, 역동적인 사용자 경험에 관한 것입니다. Flutter의 뛰어난 기능 중 하나는 개발자가 비교적 쉽게 부드럽고 정교한 애니메이션을 만들 수 있는 풍부한 애니메이션 라이브러리입니다. 이 게시물은 생생한 애니메이션으로 Flutter 애플리케이션을 향상하는 방법을 조명하는 것을 목표로 합니다.

 

Flutter 애니메이션 소개

Flutter의 애니메이션 시스템은 계층화된 기반 위에 구축되었습니다. 핵심적으로는 그래픽 렌더링에 대해 아무것도 모르는 Animation 객체를 사용합니다. 게다가 'AnimationController' 및 'CurvedAnimation'과 같은 다양한 개체를 사용하여 이러한 애니메이션을 제어하고 다듬을 수 있습니다.

 

Tween 및 AnimationController를 사용한 기본 애니메이션

트윈: 애니메이션의 시작 값과 끝 값 사이의 범위를 정의합니다. 예: Tween<double>(시작: 0, 끝: 1). AnimationController: 애니메이션을 제어합니다. 'vsync'(일반적으로 'SingleTickerProviderStateMixin'이 포함된 위젯 자체)가 필요합니다.

AnimationController controller;
Animation<double> animation;

@override
void initState() {
  super.initState();

  controller = AnimationController(
      duration: const Duration(seconds: 2), vsync: this);
  animation = Tween<double>(begin: 0, end: 1).animate(controller)
    ..addListener(() {
      setState(() {
        // re-build the widget on value change
      });
    });

  controller.forward();
}

 

애니메이션에 곡선 추가

Flutter에는 'Curves.easeIn' 및 'Curves.bounceInOut'과 같은 미리 정의된 다양한 곡선이 있습니다. CurvedAnimation을 사용하면 다음 곡선을 애니메이션에 적용할 수 있습니다.

animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

 

더욱 깔끔한 코드를 위해 AnimatedBuilder 사용

모든 addListener()에서 setState()를 호출하는 대신 AnimatedBuilder가 더 효율적인 솔루션을 제공합니다.

AnimatedBuilder(
  animation: animation,
  builder: (BuildContext context, Widget child) {
    return Opacity(
      opacity: animation.value,
      child: Text('Fade In Text!'),
    );
  },
)

 

사전 제작된 애니메이션 위젯

Flutter는 시간을 절약하기 위해 여러 내장 애니메이션 위젯을 제공합니다.

• AnimatedOpacity
• AnimatedPositioned
• AnimatedContainer
• 등등...

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(seconds: 2),
  child: Text('Fade me!'),
)

 

전환용 Hero 애니메이션

'Hero' 위젯을 사용하면 화면 간 공유 요소 전환을 생성할 수 있습니다. Flutter는 동일한 Hero 태그로 두 개의 위젯에 태그를 지정하여 위젯 사이의 전환을 애니메이션화합니다.

 

Flare를 사용한 맞춤형 애니메이션

복잡한 애니메이션의 경우 Flutter로 가져올 수 있는 맞춤 애니메이션을 만들기 위한 강력한 도구인 Flare를 사용하는 것을 고려해 보세요.

 

내부에 Flare 애니메이션이 포함된 Hero 애니메이션을 사용하여 두 화면 사이를 전환하는 예시

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flare with Hero')),
      body: Center(
        child: Hero(
          tag: 'flareHero',
          child: GestureDetector(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (_) => SecondScreen()));
            },
            child: FlareActor(
              "assets/my_animation.flr",
              alignment: Alignment.center,
              fit: BoxFit.contain,
              animation: "YourAnimationName",
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'flareHero',
          child: FlareActor(
            "assets/my_animation.flr",
            alignment: Alignment.center,
            fit: BoxFit.contain,
            animation: "YourAnimationName",
          ),
        ),
      ),
    );
  }
}

 

결론

애니메이션은 최신 앱 디자인에서 중추적인 역할을 합니다. Flutter를 사용하면 강력하고 개발자 친화적인 시스템 덕분에 위젯과 화면에 애니메이션을 적용하는 작업이 즐거운 경험이 됩니다. 미묘한 마이크로 상호작용을 생성하든 복잡한 시퀀스를 생성하든 상관없이 Flutter의 애니메이션 시스템이 모든 것을 도와드립니다. 뛰어들어 실험하고 UI를 생생하게 구현해 보세요!