Blaan

연속적인 애니메이션 만들기 실습을 하면서 배웠던 것을 복습해보겠습니다. 1. TickerProviderStateMixin / SingleTickerProviderStateMixin TickerProviderStateMixin은 다중 애니메이션을 구현하는데 적합하고, SingleTickerProviderStateMixin은 하나의 애니메이션을 구현하는데 적합합니다. TickerProviderStateMixin은 애니메이션을 구현하는데 있어서 필수적으로 들어가야 하는 위젯입니다. 하는 일은 각 프레임 사이의 간격을 계산해줘서 애니메이션이 정확하게 동작할 수 있도록 해주죠. 2. AnimationController와 Animation 애니메이션을 만들 때 필요한 것은 AnimationController와 An..

이번 글의 목표는 아이콘이 천천히 나타나고, 오른쪽으로 움직인 뒤에 왼쪽으로 움직이는 애니메이션을 만들기입니다. 1. 똑같습니다! 이번엔 왼쪽으로 이동시켜줄 AnimationController와 Animation을 선언해줍시다. import 'package:flutter/material.dart'; class MyWidget extends StatefulWidget { const MyWidget({super.key}); @override State createState() => _MyWidgetState(); } class _MyWidgetState extends State with TickerProviderStateMixin { late AnimationController _iconVisibleCont..

이번 글의 목표는 아이콘이 천천히 나타난 뒤에 오른쪽으로 이동해주는 연속적인 애니메이션 구현하기 입니다. 1. 오른쪽으로 이동하는 AnimationController와 Animation을 추가로 선언해줍시다. import 'package:flutter/material.dart'; class MyWidget extends StatefulWidget { const MyWidget({super.key}); @override State createState() => _MyWidgetState(); } class _MyWidgetState extends State with TickerProviderStateMixin { late AnimationController _iconVisibleController; lat..

이번 글의 목표는 화면 정가운데에서 천천히 나타나는 아이콘 애니메이션 구현하기 입니다. 1. Stateful widget을 만들어줍니다. (Stateless로 해도 상관은 없습니다만, Stateful로 하는게 더 좋대요) import 'package:flutter/material.dart'; //Material을 기준으로 합니다! //... class MyWidget extends StatefulWidget { const MyWidget({super.key}); @override State createState() => _MyWidgetState(); } class _MyWidgetState extends State { @override Widget build(BuildContext context) { ..

Flutter가 엄청난 자유도가 있다해서 배우기 시작했건만, Animation을 어떻게 구현하는지 기초조차 어려워서 막막하셨나요? Flutter 초짜인 저는 맨땅에 헤딩하면서 뚫었지만, 이제 시작하시는 분들을 위해 저는 어떻게 이해했고, 어떻게 구현했는지 설명해드리겠습니다. 자세하고 정확하고 모든 내용을 틀림없이 담지는 않았을테지만, 이 정도만 알면 일단 시작은 할 수 있을겁니다. 먼저 Flutter의 Animation은 어떤 구조로 이루어져 있느냐 부터 살펴볼게요. 구현하는 방법이 훨씬 많겠지만 초보의 입장으로써 지금은 단 두 가지만을 기억하면 됩니다. AnimationController AnimationController는 오케스트라로 치면 지휘자의 역할을 합니다. AnimationController..