[flutter] 페이드 애니메이션 구현하기

11 Dec 2023

flutter

이번에는 Flutter 앱에서 이미지나 텍스트와 같은 요소를 부드럽게 나타내고 사라지게 하는 페이드 애니메이션을 구현하는 방법에 대해 알아보겠습니다. 페이드 애니메이션은 사용자 경험을 향상시키고 앱에 동적인 효과를 부여하는 데 유용합니다.

애니메이션 효과의 중요성

앱에서 애니메이션 효과를 적절히 활용하면 사용자들에게 짜릿한 경험을 선사할 수 있습니다. 특히 페이드 애니메이션은 간단하지만 강렬한 시각적 효과를 제공하여 사용자의 눈길을 끌 수 있습니다.

페이드 애니메이션 구현하기

Flutter에서 페이드 애니메이션을 구현하려면 AnimatedOpacity 위젯을 사용합니다. 이 위젯은 자식 위젯의 불투명도를 부드럽게 변경하여 투명하게 나타나거나 사라지도록 만들어줍니다.

아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyFadeApp(),
    );
  }
}

class MyFadeApp extends StatefulWidget {
  @override
  _MyFadeAppState createState() => _MyFadeAppState();
}

class _MyFadeAppState extends State<MyFadeApp> {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('페이드 애니메이션'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
              duration: Duration(seconds: 1),
              opacity: _opacity,
              child: FlutterLogo(size: 100),
            ),
            RaisedButton(
              child: Text('애니메이션 시작'),
              onPressed: () {
                setState(() {
                  _opacity = _opacity == 0 ? 1.0 : 0.0;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 AnimatedOpacity 위젯을 사용하여 플러터 로고가 나타나고 사라지는 페이드 애니메이션을 구현했습니다.

결론

Flutter의 AnimatedOpacity를 사용하면 간단하게 페이드 애니메이션을 구현할 수 있습니다. 이를 응용하여 앱에 다양한 애니메이션 효과를 추가하여 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다.

참고문헌:

https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html