# animation
[새싹X코딩온] 풀스택 웹 융합 개발자 양성 과정 W2 : JavaScript
CSS animation @keyframes 요소에 from-to 혹은 0% ~ 100% 으로 애니메이션 동작 작성. ex. ` animation: name duration [timing-function] [delay interation-count] [direction] [fill-mode]; ` 필수 기입: 애니메이션 이름과 지속기간 JavaScript 1. 참조 방식 1.1. 내장 방식 코드가 일회성 or 짧음 1.2. link 방식 `` 코드가 길어질 때 or 재사용 1.3. 위치는 아무데나 가능 body 맨끝에 주로 2. 표기법 dash-case : CSS (단어 띄어쓰기) snake_case, camelCase, PascalCase : programming할 때 주로 사용하는 표기법들 > cf. 주석 한 줄 // 두 줄 이상 /* */
transform & animation 으로 복잡한 애니메이션 만들어보기
transform 관련 CSS 속성들 transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다. 본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 된다. rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 > 복잡한 애니메이션 구현법 이전 정리 버전에서는 간단한 a -> b 애니메이션들은 시작스타일, 최종스타일, 트리거, transition 주면 된다고 했다. 근데 a -> b -> a, a -> 1초정지 -> b 같은 복잡한건 못하는데 @keyframes를 쓰면 가능하다. 1. 가장 먼저 @keyframes 를 정의하기 @keyframes는 커스텀 애니메이션을 정의하기 위한 공간이라고 생각하면 된다. '움찔움찔'이라는 애니메이션을 0% 진행했을 때 CSS, 50% 진행했을 때 CSS, 100% 진행했을 때 CSS를 각각 작성한
[CSS] 애니메이션
이전에 소개드린 transform, transition을 사용하면 웹 페이지에서 애니메이션 효과를 낼 수 있었습니다. 하지만 자연스러운 애니메이션을 만들기 위해서는 두 속성을 잘 조합해야했는데요. 그래서 애니메이션을 쉽게 만들고자 animation 속성이 등장했습니다. animation에는 다양한 속성들이 있는데 이 중에서 필수적인 속성과 자주 등장하는 몇 가지만 다뤄보도록 하겠습니다. 전체 내용은 MDN 문서에서 확인하실 수 있습니다. animation animation은 CSS를 사용해서 웹 요소에 애니메이션 효과를 더할 수 있는 속성입니다. animation은 키프레임(keyframe)이라는 지점을
[CSS] CSS 애니메이션 vs JS 애니메이션
🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다. Summary | | 설명 | | :--------: | :-------- | | 카테고리 | 애니메이션 구현 방법 | | CSS 애니메이션 | 미디어 쿼리로 반응형 애니메이션 구현 가능외부 라이브러리 불필요직관적인 코드컴포지터 스레드 사용으로 JS보다 효율적 | | JS 애니메이션 | 세밀한 애니메이션 구현 가능하드웨어 가속으로 인해 일어나는 모바일 성능 저하 현상 제어 가능브라우저 호환성 우수 | 웹사이트에 애니메이션 효과를 부여할 때 CSS의 `tra
Rally로 3분 만에 애니메이션 완성하기
토스ㅣSLASH 23 - Rally로 3분 만에 애니메이션 완성하기 영상을 일부 정리한 글입니다. 같은 애니메이션이어도 플랫폼마다 사용하는 용어가 다름 > 커뮤니케이션 비용 증가 
css trick을 이용한 프로그레스 애니메이션
👻 CSS Tricks! 👻 로키토키 하나의 Dom Element에서 background 속성을 이용하여 프로그레스 바 애니메이션을 구현하였습니다. 👶 간단한 방식: div 중첩 하나의 긴 프로그레스 컴포넌트 안쪽에서 여러 개의 하위 컴포넌트를 결합하여 만들어요. 하위 컴포넌트는 isFilled props를 이용해 색칠 여부를 결정해요. 하위 컴포넌트를 다시 별도의 div(색칠된)로 구성하여 width를 0% -> 100%로 늘려주면 색이 점점 차오르는 것처럼 표현할 수 있어요. 💡 Background를 이용한 프로그레스바 색칠을 위해서 div 상자를 한번 더 포개는 방식은 비효율적일 수 밖에 없어요. 특히 리액트에서는 reconcile 단계에서 재귀적으로
[인턴/미니 프로젝트] 기본 버튼 틀과 드롭다운 애니메이션 적용시키기
현재 내가 인턴으로 일하고 있는 곳에서 새로운 프로젝트를 할당받았다! 이 곳은 프론트 엔드 개발부서가 따로 없어서 거의 외주로 받아오곤 했는데, 늦었지만 내가 프론트 엔드 분야를 선택하고 난 후부터 나에게 프론트엔드 부분의 수정을 맡기신다! (하지만 난 아직.. 코린이 ㅎ) 이번 프로젝트(라고 하기엔 아주 작은 파트지만)를 하면서 내가 하는 모든 부분을 기록해두려고 한다. 먼저 내가 받은 업무는 기존에 있던 두가지 기능, gateway의 조명 밝기 기능: 현재 조명 밝기를 보여주고, 수동으로 조명 밝기 조정할 수 있는 기능 gateway의 조명 스케줄 기능: 매일 아침 몇 시부터 저녁 몇 시까지 조명 밝기 정도를 어떻게 할 것인지 정하는 기능 을 병합하여 하나의 기능으로 만드는 것이다. 🧐 계획하기 
Mixamo 애니메이션 방향이 이상할 때
Bake Into Pose : 발 모션의 엉킴이 해결됨 Based Upon : 몸 방향이 틀어지는 문제가 해결됨
Angular Ionic naviation bar issue fix
ionic footer 태그를 사용하고 tabs 태그를 사용하지 않습니다. 자체적으로 라우팅이 발생하지만 앵귤러는 라우팅을 인식하지 못하여 페이지 트랜지션이 발생하지 않기 때문에 routerLink 를 활용하여 라우팅을 사용합니다. 애니메이션 효과를 주기 위해 app.config 파일에서 앵귤러 애니메이션 효과를 prop 으로 전달합니다. animated: true mode:'ios' 를 설정합니다. mode 의 default 값은 mode:'md' 입니다. (안드로이드)
[GSAP] 애니메이션 사용법 2
GSAP ScrollTrigger 어떤 애니메이션 효과를 만들지 만큼 중요한 것이 언제 효과를 보여줄 것인가이다. 내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다. 설치 공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드한다. > [GSAP] 애니메이션 사용법 1 링크 스크롤트리거 기본 스크롤을 해서 해당 요소가 보일 때 애니메이션 효과가 나타나도록 하는 것이 목적이다. 이번에는 이미지를 준비해봤다. 
[GSAP] 애니메이션 사용법 1
GSAP? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만!! 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다. GSAP를 배우려는 목적은 멋진 애니메이션 효과를 구현하고 싶기 때문이겠지만 그 마음은 잠시 접어두고 기초부터 배워보자. 설치 방법 공식 사이트에서 받거나 CDN, 혹은 npm install gsap로 설치할 수 있다. >🔗 공식사이트 링크 [🔗 npm
조건부 렌더링 시, 컴포넌트가 닫힐 때 애니메이션 효과
조건부 랜더링을 활용하여 페이지 최초 진입 시, 뜨는 스플래시 화면을 제어 했다. 하지만 화면이 열릴 때와 다르게 닫히는 경우에는 transition 으로 간단하게 페이드 효과를 주고 싶었지만, 적용이 되지 않았다. 내 생각에는 상태값이 false가 됨과 동시에 컴포넌트는 렌더링이 되지않기 때문에, 효과가 적용이 되지 않는 것이라고 생각된다. 따라서 setTimeOut함수와 애니메이션을 제어할 새로운 state를 활용하여 해결했다. 흐름도를 다음과 같이 생각했고, 코드를 작성하였다. > 1. 컴포넌트(스플래시 스크린)을 2초간 유지 2초 후 0.5초 정도의 페이드 아웃 애니메이션을 보여준다. 애니메이션을 보여준 후인 0.5초 후 컴포넌트를 렌더링 하지 않는다. 아래는 전체 코드이고, 핵심은 visible 상태와 animation 상태를 두개 나눠서 사용한 점과, useEffect에서 setTimeout을 사용한 점을 보면 될 것 같다.
[TIL] 트리거 없이 생동감을 주고 싶다면? Animation!
저번 글에서 학습했던 transition은 확실한 트리거가 있어야 합니다. click이나 hover 같은.. 그런 트리거가 없다면 아무 일도 일어나지 않죠. 하지만 보다 생동감 있는, 캐릭터에 살아있는 듯한 느낌을 주기 위해선 트리거 없이도 특정 모션을 취하도록 하는 것이 좋지 않을까요? 예를 들면 사람이 숨을 쉴 때마다 들썩거리는 몸통, 깜빡이는 눈, 흠칫하는 동작.. 이런 모션이 캐릭터에도 적용된다면 와.. 진짜 잘만들었다! 살아있는 것 같다! 라는 말을 들 을 수 있을 겁니다. 이런 점을 구현하기 위해선 transition으로는 부족합니다. 그래서 이번에 공부해 볼것이 바로 Animation! Animation은
[TIL] 01주차-03
1. Transfrom 웹사이트에 특정 요소에 각도를 틀거나 배율을 바꿀 때 사용합니다.. > ### rotate - Ex) transform: rotate(45deg) 입력한 각도만큼 회전 음수도 입력이 가능하다. scale(x, y) - Ex) transform: scale(2, 3) 숫자는 비율을 의미 width를 x만큼, height를 y만큼 확대 skew(10deg, 20deg) - Ex) transform: skew(10deg, 20deg) x축 y축을 기준으로 입력한 각도만큼 비틂 Ex) translate(100px, 200px) - Ex) transform: translate(100px, 200px) 선택한 오브젝트의 좌표 변경 prefix 접두사 - Ex) -webkit-transform: translate(100px, 200px) 최신 버전이 아닌 다른 버전의 브라우저에서 실행을 원할 경우에 사용한다. 브라우저 마다 사용
Animation 라이브러리 - Framer Motion (2. 기초 사용)
UI 라이브러리처럼 예제를 통해 적용된 컴포넌트를 통해 예제로 살펴보고 싶지만... 시각적 효과에 대한 설명의 어려움과, 코드 예제의 복잡성 등의 진행과정의 어려움이 있기에 간단하게만 살펴보겠다. Ping Pong Animation Fade Animation Keyframes Darg Animation Hover Animation
Animation 라이브러리 - Framer Motion (1. 배경과 개념)
React & Animation ? react 개발자가 이러한 애니메이션과 같은 디자이너의 영역을 다루는 것이 과연 필수일까? 현대 웹 개발 환경에서는 사용자 경험(UX)의 중요성이 강조되며, 이 경험에는 사용자가 직접적으로 맞닥뜨리는 화면의 UI가 중점적으로 있다. 또한 프론트엔드 라이브러리와 도구의 발전으로, 개발자는 디자인 및 애니메이션에 대한 지식을 확대하여 더 나은 사용자 경험을 제공하고 디자이너와의 협업을 강화할 수 있다. 이러한 현대 웹 개발 환경에는 이전 시대와 다른 배경이 있다. 협업과 역할의 융합 현대 웹 개발 프로세스에서는 디자이너와 개발자 간의 협업이 중요하며, 두 분야의 경계가 흐려지는 경우가 종종 발생한다. 개발자가 애니메이션과 디자인을 이해하고 다룰 수 있다면, 더 효율적인 협업과 빠른 개발 사이클을 가능하게 한다. UI/UX의 중요성 증대 현대의 웹 및 애플리케이션 사용자들은 아름답고 직관적인 사용자 경험을 요구한다. 애니메이션
[Flutter] Animation_01
애니메이션 효과를 간단하게 주는 방법 중 슬라이딩 하는 SlideTransition에 대해서 메모! 먼저 애니메이션 컨트롤러를 선언한다. 변환 하는 시간은 200 milliseconds로 설정. 그리고 얼마만큼 슬라이딩을 할 지 화면의 시작과 끝 비율(0~1 == 0%~100%)을 정하고 컨트롤러도 지정해준다. 해당 Animation효과를 준 위젯을 컨트롤러를 이용하여 _panelAnimation에서 설정한 값대로 진행(forward)하고 되감(reverse)을 수 있도록 onTap함수를 만든다. position에 panelAnimation만큼 위치를 변경할 수 있도록 넣어주면, 이전 포스팅 Animation00에서의 onTap함수에 의해 _animationController가 갱신 될 시 SlideTransition이 진행(forward)되거나 되감(reverse)아진다.