Flutter Animation 플러터 애니메이션 - AnimatedOpacity

 

잘 디자인된 애니메이션은 UI를 보다 직관적으로 만들고 매끄러운 모양과 느낌으로 세련되게 표현하여 사용자에게 신선한 경험을 제공합니다. Flutter의 강력한 기능을 통해 다양한 유형의  애니메이션을 쉽게 구현할 수 있습니다.  특히 머티리얼 위젯은 디자인 사양에 정의된 표준 모션 효과와 함께 제공되지만 사용자 정의를 통해 개성있는 효과도 줄 수도 있습니다. 

이번에는 지정된 불투명도가 변경될 때마다 일정 기긴 동안 불투명도를 자동으으로 전환는 애니메이션 기능인 AnimatedOpacity 프로그래밍을 알아보도록 하겠습니다. 

AnimatedOpacity class

가끔 위젯의 가시성을 높이기 위해 사라지게 하거나 선택되지 않은 것을 덜 두드러지게 표현 하고 싶을 때가 있습니다. 이경우 AnimatedOpacity를 통해 쉽고 빠르게 구현할 수 있습니다. 

Contructors

불투명도에 애니메이션을 적용하는 위젯을 만듭니다

  const AnimatedOpacity({

    Key? key,

    this.child,

    required this.opacity,

    Curve curve = Curves.linear,

    required Duration duration,

    VoidCallback? onEnd,

    this.alwaysIncludeSemantics = false,

  }) 

Required Parameter

opacity : 불투명도의 매개 변수를 설정합니다. null이 아니어야 하며 0.0에서 1.0 사이여야 합니다.

duration : 불투명도의 지속시간을 설정합니다. null이 아니어야 합니다.  

Properties

child → Widget?

트리에서 하위 위젯입니다. 

final

curve → Curve

컨테이너를 애니메이션할 때 적용할 곡선입니다.

final, inherited

duration → Duration

컨테이너의 애니메이션 효과를 줄 기간입니다.

final, inherited

opacity → double

대상 불투명도입니다

final

Code 분석

          child: AnimatedOpacity(

            opacity: opacityLevel,

            duration: const Duration(seconds: 1),

            child: const FlutterLogo(),

          ),

opacityLevel 변수의 값에 따라 duration에 설정된 기간동안 FlutterLogo 위젯이 애니메이션 됩니다. 

전체 Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: _title,

      home: Scaffold(

        appBar: AppBar(title: const Text(_title)),

        body: const MyStatefulWidget(),

      ),

    );

  }

}

class MyStatefulWidget extends StatefulWidget {

  const MyStatefulWidget({Key? key}) : super(key: key);

  @override

  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();

}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  double opacityLevel = 1.0;

  void _changeOpacity() {

    setState(() {

      opacityLevel = opacityLevel == 0 ? 1.0 : 0;

    });

  }

  @override

  Widget build(BuildContext context) {

    return GestureDetector(

      onTap: () {

        _changeOpacity();

      },

      child: Center(

        child: Container(

          height: 200,

          width: 200,

          color: Colors.grey[300],

          child: AnimatedOpacity(

            opacity: opacityLevel,

            duration: const Duration(seconds: 1),

            child: const FlutterLogo(),

          ),

        ),

      ),

    );

  }

}