개발노트

flutter_animate flutter_animate 패키지는 Flutter 애플리케이션에서 애니메이션을 쉽게 적용할 수 있도록 도와주는 패키지입니다. 이 패키지는 다양한 애니메이션 효과를 제공하며, 간편한 구문을 사용하여 애니메이션을 구현할 수 있습니다. flutter_animate 패키지의 주요 특징은 다음과 같습니다: 다양한 애니메이션 효과: 패키지는 여러 가지 애니메이션 효과를 제공합니다. 이 효과들은 Fade, Scale, Rotate, Flip 등의 기본적인 애니메이션부터 Pulse, Shake, Wiggle과 같은 고급 애니메이션까지 다양합니다. 간편한 구문: 애니메이션을 구현할 때 간편한 구문을 제공하여 개발자가 복잡한 애니메이션 코드를 작성하지 않아도 되도록 합니다. 이로써 애니메이션..

RIVE RIVE는 Lottie 와 비슷한 패키지로, 움직이는 애니메이션을 제공합니다. 특정 행동에서의 애니메이션 혹은, Input의 값을 변환켜 한가지가 아닌 여러가지 동작을 할 수 있게 만들어줍니다. 즉, RIVE의 가장 큰 특징은 사용자의 조작에 따라 상호작용이 가능한 애니메이션을 구현할 수 있습니다. 구현 목표. RIVE 에 있는 정답곰(정답, 오답에 반응하는 곰) 을 버튼 클릭으로 움직이게 만들어봅니다. 정답 곰은 State 의 Input을 2개(Correct, Incorrect) 가지고 있으며, 2가지 Input 을 전달하는 버튼을 각각 구현합니다. State 가 변했을 때 SnackBar에 stateMachineName 과 stateName이 표시되도록 구현합니다. 1. Flutter 프로젝..

CurvedAnimation CurvedAnimation: CurvedAnimation 클래스는 다른 애니메이션에 사용되는 애니메이션 커브를 적용하여 애니메이션의 진행 속도를 조절합니다. 주어진 커브 함수를 통해 애니메이션이 시작되거나 끝날 때의 변화량을 조정하여 부드럽게 애니메이션을 진행시킵니다. 이 클래스는 주로 트윈(Tween) 애니메이션과 함께 사용되며, 특히 시작과 끝 사이의 애니메이션을 더 부드럽게 만들어주는 데 유용합니다. CurvedAnimation은 Animation 클래스를 상속하며, 주로 AnimationController의 drive() 메서드를 통해 사용됩니다. Interval Interval: Interval 클래스는 애니메이션의 특정 구간을 지정하는 데 사용됩니다. 일반적으로 ..

애니메이션 조합으로 아래와 같이 카드 스윕, 드래그 기능을 만들어보겠습니다. (소스 작성 숙달을 위해 소스 캡슐화 대신 하나하나 입력해보았습니다.) 준비사항. 1. 프로젝트에 assets 폴더를 생성하고 그안에 카드 이미지로 사용될 jpg 파일을 넣습니다. *index에 따라 불러올 수 있도록 이름은 1,2,3,4와 같은 숫자로 해줍니다. 2. 프로젝트에서 assets폴더를 인식할 수 있게 끔 pubspec.yaml에 flutter: 속성에 - asswets/ 를 추가해줍니다. 예시 소스(전체) import 'dart:math'; import 'package:flutter/material.dart'; class SwipingCardsScreen extends StatefulWidget { static S..

CurvedAnimation Curve 적용: **CurvedAnimation**은 애니메이션을 제어하는데 사용되는 Animation 객체와 **Curve**를 인자로 받습니다. **Curve**는 애니메이션의 진행을 제어하는데 사용되며, 일반적으로 Curves 클래스에서 제공되는 미리 정의된 커브를 사용합니다. 보간(Interpolation): **CurvedAnimation**은 주어진 **Curve**에 따라 애니메이션 값의 보간을 조절합니다. 예를 들어, **Curves.easeIn**을 사용하면 애니메이션은 천천히 시작하여 점차 속도를 증가시킵니다. 애니메이션 제어: **CurvedAnimation**은 **AnimationController**와 함께 사용하여 애니메이션을 제어합니다. 이를 통..

AnimatedBuilder AnimatedBuilder는 애니메이션을 지속적으로 업데이트하면서 UI를 리빌드할 때 사용됩니다. 이 위젯은 애니메이션의 값이 변경될 때마다 특정한 위젯을 다시 그려주기 때문에 애니메이션의 효과를 적용하는 데 매우 효율적입니다. 여기서 **AnimatedBuilder**의 주요 요소를 살펴보겠습니다: animation 매개변수:animation 매개변수는 Animation 객체를 받습니다. 이 Animation 객체는 주로 **AnimationController**를 통해 제어되는 애니메이션입니다. **AnimatedBuilder**는 이 애니메이션의 값이 변경될 때마다 자동으로 다시 빌드됩니다. builder 콜백 함수:builder 콜백 함수는 애니메이션 값이 변경될 때..

Flutter에서 제공하는 Hero 위젯을 사용하면 화면전환 애니메이션을 쉽게 넣을 수 있습니다. 사용방법. 전환 이벤트를 가지고 있는 Widget과 전환된 화면에 나타나는 Widget의 부모 Widget으로 Hero()를 작성합니다. Hero() 의 tag: 속성에 두 화면이 서로 공유하는 유일한 고유 값을 설정합니다. page_dump.dart (다음 화면으로 값을 넘기는 Widget(화면)) return GestureDetector( onTap: () { listItemTap(context, dumpl); }, child: Hero( tag: dumpl.title, child: Container( padding: const EdgeInsets.symmetric( horizontal: 80, vert..