조용한 담장

여러 animation 을 시차를 두고 연속적으로 만드는 방법을 설명한 아래의 페이지의 내용을 살펴보자. https://flutter.dev/docs/development/ui/animations/staggered-animations Staggered Animations {{site.alert.secondary}} What you’ll learn * A staggered animation consists of sequential or overlapping animations. * To create a staggered animation, use multiple Animation objects. * One AnimationController controls all of the Animations. * Ea..

앱의 페이지(Page) 또는 루트(Route) 사이의 이동할 때 animation 을 만들어주는 위젯이다. 특히 이동하는 페이지 사이에 공통된 이미지 영역이 있다면 이를 기반으로 animation 을 만들기 위해 사용할 수 있다. 예를 들어 쇼핑앱의 제품 사진으로 된 목록중 하나를 선택하면 그 사진이 커지면서 제품의 상세 내용을 보여주는 동작을 생각해 볼 수 있다. 위와 같이 이동하는 페이지 사이의 공통되게 보여주는 부분에 대한 animation 을 만드는데 사용한다. Hero({ Key key, @required Object tag, CreateRectTween createRectTween, HeroFlightShuttleBuilder flightShuttleBuilder, HeroPlaceholder..

Animation library Flutter 의 animation system 을 구현한 animation library 을 살펴보자. import package:flutter/animation.dart flutter 는 animation 을 값의 변화와 시간을 통해 표현한다. Flutter represents an animation as a value that changes over a given duration, and that value may be of any type. animation 의 시작의 값이 0 이라면 끝나는 값이 100 이라는 수의 값으로 표현한다. 이 변화되는 값은 다양한 속성에 적용되어 그 변화에 따른 animation 을 만들어 낸다. 예를들어 opacity(불투명도) 값을 ..