| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- MVVM
- spring boot
- typescript
- 오류
- .NET
- React JS
- JavaScript
- HTML
- AnimationController
- GitHub
- MS-SQL
- listview
- 자바스크립트
- Flutter
- Firebase
- 파이어베이스
- 바인딩
- 리엑트
- Binding
- MSSQL
- page
- Animation
- 마우이
- 닷넷
- 깃허브
- Maui
- 플러터
- 함수
- db
- 애니메이션
- Today
- Total
목록Animation (6)
개발노트
68. [Flutter] Staggered Animation 순차적 애니메이션 효과 만들기 (with CurvedAnimation, Interval)
CurvedAnimation CurvedAnimation: CurvedAnimation 클래스는 다른 애니메이션에 사용되는 애니메이션 커브를 적용하여 애니메이션의 진행 속도를 조절합니다. 주어진 커브 함수를 통해 애니메이션이 시작되거나 끝날 때의 변화량을 조정하여 부드럽게 애니메이션을 진행시킵니다. 이 클래스는 주로 트윈(Tween) 애니메이션과 함께 사용되며, 특히 시작과 끝 사이의 애니메이션을 더 부드럽게 만들어주는 데 유용합니다. CurvedAnimation은 Animation 클래스를 상속하며, 주로 AnimationController의 drive() 메서드를 통해 사용됩니다. Interval Interval: Interval 클래스는 애니메이션의 특정 구간을 지정하는 데 사용됩니다. 일반적으로 ..
65. [Flutter] 카드 스윕(Swiping), 드래그(Drag) 기능 만들어보기(무한 스윕 트릭 사용) with onHorizontalDragUpdate, onHorizontalDragEnd
애니메이션 조합으로 아래와 같이 카드 스윕, 드래그 기능을 만들어보겠습니다. (소스 작성 숙달을 위해 소스 캡슐화 대신 하나하나 입력해보았습니다.) 준비사항. 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..
62. [Flutter] CurvedAnimation (애니메이션 효과 시간에 굴곡 주기)
CurvedAnimation Curve 적용: **CurvedAnimation**은 애니메이션을 제어하는데 사용되는 Animation 객체와 **Curve**를 인자로 받습니다. **Curve**는 애니메이션의 진행을 제어하는데 사용되며, 일반적으로 Curves 클래스에서 제공되는 미리 정의된 커브를 사용합니다. 보간(Interpolation): **CurvedAnimation**은 주어진 **Curve**에 따라 애니메이션 값의 보간을 조절합니다. 예를 들어, **Curves.easeIn**을 사용하면 애니메이션은 천천히 시작하여 점차 속도를 증가시킵니다. 애니메이션 제어: **CurvedAnimation**은 **AnimationController**와 함께 사용하여 애니메이션을 제어합니다. 이를 통..
61. [Flutter] AnimatedBuilder 명시적인 애니메이션 위젯이 없을 때 사용하기 (with Tween, AnimationController)
AnimatedBuilder AnimatedBuilder는 애니메이션을 지속적으로 업데이트하면서 UI를 리빌드할 때 사용됩니다. 이 위젯은 애니메이션의 값이 변경될 때마다 특정한 위젯을 다시 그려주기 때문에 애니메이션의 효과를 적용하는 데 매우 효율적입니다. 여기서 **AnimatedBuilder**의 주요 요소를 살펴보겠습니다: animation 매개변수:animation 매개변수는 Animation 객체를 받습니다. 이 Animation 객체는 주로 **AnimationController**를 통해 제어되는 애니메이션입니다. **AnimatedBuilder**는 이 애니메이션의 값이 변경될 때마다 자동으로 다시 빌드됩니다. builder 콜백 함수:builder 콜백 함수는 애니메이션 값이 변경될 때..
60. [Flutter] Animation 만들기 다이어그램(필요한 애니메이션 위젯 선택하기)
출처: https://docs.flutter.dev/ Flutter documentation Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app. docs.flutter.dev
32. [Flutter] AnimationController 애니메이션 적용 방법 2가지 (with RotationTransition, Tween)
AnimationController, Animation으로 애니메이션 효과 적용하기 개인적으로 노마드코더에서 Flutter를 배우면서 AnimationController, Animation 작성 방법과, 이것들을 사용하려면 왜 with SingleTickerProviderStateMixin 을 해줘야하는지 이해하기까지 어려웠습니다. 이 글에서는 AnimationController, Animation을 생성하고 애니메이션 효과를 적용하는 방법 2가지를 소개하고, 이를 AnimatedModalBarrier, SlideTransition, RotationTransition 위젯에 적용시켜보겠습니다. 구현할 애니메이션 설명 ListTile의 속성 leading:에 들어있는 Icon을 90도 회전시키는 애니메이션..