암시적 애니메이션

원문과 함께하는 것을 권장합니다.

이 코드랩은 다음 속성들을 다룬다.

• AnimationOpacity 를 이용한 fade-in 이펙트
• AnimatedContainer 를 이용한 사이즈, 색상, 마진 변경 애니메이션
• 암시적 애니메이션을 사용하는 기술 개요

그래서 암시적 애니메이션이란?

Flutter animation library 를 사용하면 위젯에 모션을 추가하고 시각적 효과를 만들 수 있다.

암시적 애니메이션은 ImplicitlyAnimatedWidget 을 상속받는다. 암시적 애니메이션을 사용하면 값을 설정하여 위젯 속성에 애니메이션을 적용할 수 있다. 값이 변경될 때마다 위젯은 이전 값에서 새 값으로 애니메이션을 적용시킨다.

Example: Fade-in text effect

아래 예는 AnimatedOpacity 라는 암시적 애니메이션된 위젯을 사용하여 기존 UI에 fade-in 효과를 추가한다. 처음 예는 아무런 애니메이션 코드를 첨가하지 않는 예를 보여준다.

• 올빼미 사진을 보여준다.
• Show Detail 버튼은 동작하지 않는다.
• 설명 텍스트는 사진의 올빼미를 설명한다.

AnimatedOpacity 를 추가하여 Fade in 효과 주기

이 섹션에서는 위 DartPad 에 있는 코드를 수정하며 단계를 진행한다. 이 단계는 AnimatedOpacity 위젯을 사용하여 애니메이션 기능을 추가하는 방법을 간략히 설명한다.

• Show Detail 버튼을 누르지 않으면 올빼미 설명 텍스트은 숨겨져있다.
• Show Details 버튼을 누르면 설명 텍스트가 fade-in 된다.

Fade-in (Starter)

이 부분의 DartPad 코드를 수정하면된다.

아래 단계를 모두 마친 것은 아래 Fade-in (Complete) 섹션에 있다.

1. animate 할 위젯 감싸기

페이드 인 효과를 만들기 위해 AnimatedOpacity 위젯을 사용하여 불투명도 속성에 애니메이션을 적용할 수 있다. Container 위젯을 AnimatedOpacity 위젯으로 변경한다.

2. animate 사용할 속성 변수 초기화

사용자가 ShowDetails 를 클릭하기 전에는 opacity 가 0 이여야한다.

3. animation 을 동작하게 할 이벤트를 설정하고, 투명도를 1로 변경

Show Details 를 클릭할 때 트리거할 애니메이션을 구성한다. MaterialButton의 onPressed() 핸들러를 이용하여 opacity 속성의 값을 1로 변경한다.

4. animation의 duration 시간 설정

AnimatedOpacity 에는 투명도 값 이외에도 애니메이션의 동작시간인 duration 속성도 있다. 이 예에서는 2초로 설정한다.

Fade-in (Complete)

이제 Show Detail 을 누르면 Fade-in 애니메이션이 동작하는게 보인다.

정리해볼까?

Fade-in text effect 섹션에서는 AnimatedOpacity 를 사용하는 법을 배웠다.

• AnimatedOpacity 는 opacity 속성의 값이 변하면 기존 값에서 새로 변한 값 동작한다.
• 기존 투명도 -> 새 투명도 값 간의 전환 시간을 정의하기 위한 duration 매개변수를 줄 수 있다.

암시적 애니메이션은 StatefulWidget 의 속성만 애니메이션을 적용할 수 있다. ( 값을 저장하고 바뀌는걸 지켜보고 있어야하니 당연한 소리! )

AnimatedOpacity는 opacity 단일 속성에만 애니메이션을 적용하지만, 다른 많은 위젯은 많은 속성에 애니메이션을 적용할 수 있다.

Example: Shape-shifting effect

이 예는 여러 애니메이션 속성을 가지고있는 AnimatedContainer 위젯의 사용법을 알려준다.

• DartPad 를 Run 할때마다 borderRadius, margin, color 가 바뀐다.
• Change 버튼은 동작하지 않는다.

Shape-shifting (Starter code)

AnimatedContainer의 color, borderRadius and margin 애니메이션

Container의 위젯의 기본 값은 randomColor(), randomBorderRadius(), randomMargin() 을 통해 할당된다. AnimatedContainer 위젯을 사용하면 아래 내용을 수행할 수 있다.

• Change 버튼을 누를때마다 color, borderRadius, margin의 새 값을 할당한다.
• 위 값이 바뀔때마다 애니메이션으로 동작한다.

1. 암시적 애니메이션 추가

Container 위젯을 AminatedContainer 위젯으로 바꾼다.

2. animated 프로퍼티 값을 설정한다.

AminatedContainer 는 속성이 변경될 때 이전 값과 새 속성 사이 자동으로 애니메이션을 적용한다.Change Button을 누를 때 change() 라는 함수가 호출될 수 있도록 한다. change() 함수는 setState() 안에서 color, borderRadius, margin 의 값을 바꾼다.

3. Change 버튼이 눌렸을 때를 트리거하여 change 함수와 연결

Change 버튼이 눌렸을 때 change() 가 호출될 수 있도록한다.

4. Set duration

마지막으로 이전 값과 새 값 사이 전환 시간을 설정한다.

Shape-shifting(complete)

이제 Change 버튼이 눌릴때마다 margin, borderRadius, color 값이 바뀌며 애니메이션이 작동된다.

Using animation curves

앞 예는 암시적 애니메이션을 통해 특정 위젯 속성에 대한 값의 변화를 애니메이션화하는 방법과 duration 매개변수를 통해 애니메이션의 시간을 설정했다. curves 를 사용하여 duration 시간 내 어떻게 애니메이션 비율을 줄지 정의할 수 있다.

앞의 예에서는 기본적으로 선형 curve 애니메이션을 적용한다. 앞의 예에서 curve 속성에 easeInOutBack 을 적용하여 어떻게 달라지는지 본다.( 느리게 시작해서중간에 빨라졌다가 다시 느려진다. )

easeInOutBack 상수는 curve 파라미터로 사용할 수 있는 것 중 일부이다. 더 많은 curve 상수가 존재한다.

정리해볼까?

Shape Shifting 예제는 margin, borderRadius, color 속성을 바꾸어 애니메이션을 동작하는 것을 배웠다. AnimatedContainer는 padding, transfrom, 심지어 자식의 정렬 등 여러 속성에 대해 애니메이션을 적용할 수 있다.

• AnimatedOpacity 와 같은 일부 암시적 애니메이션은 단일속성만 가지고, AnimatedContainer 와 같은 다른 암시적 애니메이션은 다중 속성을 가질 수 있다.
• 암시적 애니메이션은 curve와 duration을 사용하여 애니메이션의 시간을 조절할 수 있다.
• curve를 지정하지않으면 기본적으로 선형 curve가 사용된다.