[flutter] flutter_svg에서 이미지에 애니메이션 효과 추가하는 방법은?

08 Dec 2023

flutter

Flutter에서 이미지에 애니메이션 효과를 추가하는 방법을 알아보겠습니다. flutter_svg 패키지를 사용하여 SVG 이미지에 페이드 인 및 페이드 아웃 효과를 적용하는 예제 코드를 제공하겠습니다.

flutter_svg 패키지 추가

먼저 pubspec.yaml 파일에 flutter_svg 패키지를 추가합니다.

dependencies:
  flutter_svg: ^0.22.0

그리고나서 터미널에서 아래 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

SVG 이미지 플러터에 추가

SVG 이미지를 Flutter 프로젝트에 추가합니다. 이미지 파일은 프로젝트 내에서 경로를 지정하여 사용할 수 있어야 합니다.

SVG 이미지에 애니메이션 효과 추가

이제 SVG 이미지에 애니메이션 효과를 추가하는 코드를 작성해보겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class AnimatedSvgImage extends StatefulWidget {
  @override
  _AnimatedSvgImageState createState() => _AnimatedSvgImageState();
}

class _AnimatedSvgImageState extends State<AnimatedSvgImage> with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Opacity(
              opacity: _controller.value,
              child: SvgPicture.asset('assets/image.svg'),
            );
          },
        ),
      ),
    );
  }

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

위 코드에서는 AnimatedSvgImage 위젯을 생성하고, 해당 위젯 내에서 애니메이션 효과를 적용하고 있는데, 몇 가지 요점을 설명하자면:

_controller를 사용하여 애니메이션을 제어합니다. 이 코드에서는 반복되는 페이드 인/아웃 애니메이션을 설정했습니다.
SvgPicture.asset을 사용하여 SVG 이미지를 로드합니다.
AnimatedBuilder를 사용하여 애니메이션을 빌드합니다.

마지막으로, 위젯을 화면에 추가하여 결과를 확인할 수 있습니다.

이제 flutter_svg 패키지를 사용하여 이미지에 애니메이션 효과를 추가하는 방법을 알아보았습니다. 위 예제를 참고하여 원하는 애니메이션 효과를 쉽게 적용할 수 있습니다.

참고문헌:

flutter_svg 패키지