Juicy Motion
모션 디자이너처럼 생각하세요: 포착(anticipation), 충격(impact), 소멸(dissipation)을 사용하여 모든 이벤트를 표현력 있고 읽기 쉽게 만듭니다. 사용자가 높이 평가하는 참고 자료는 Quinas 03 · 급여가 도착했습니다 제안입니다: 봉투가 살아나서 보상을 레이어로 드러냅니다. 재사용 가능한 원칙은 움직임의 언어입니다. 객체, 브랜드, 강도는 제품에 따라 다릅니다.
패밀리 선택
이 스킬의 핵심을 유지하고 필요한 레시피만 참조하세요:
- 보상 및 공개: 상자, 봉투, 업적, 아이템, 코인. 보상 및 타이밍 레시피를 참조하세요.
- 충격 및 전투: 타격, 검 호, 발사체, 대상 반응. 충격 및 VFX를 참조하세요.
- 마법 및 원소: 충전, 발사체, 번개, 얼음. 또한 충격 및 VFX의 해당 레시피를 참조하세요.
qutsune/EgorV의 7개 비디오는 참조 카탈로그에 있으며, 관찰된 내용과 제안된 적용이 포함되어 있습니다. 참조를 선택하거나 요청된 효과에 접근하려면 이를 참조하세요. 상자는 이미 Quinas 레시피의 시각적 기원이었습니다. 나머지는 충격 및 VFX 레퍼토리를 확장합니다. 고유하고 실질적인 워크플로(예: 특정 엔진의 셰이더 및 VFX 통합)가 있을 때 다른 스킬로 분리하세요. 다른 시각적 요소는 이 스킬 내의 레시피로 충분합니다.
이벤트 디자인
- 트리거, 동작의 근원, 공개된 콘텐츠/맞은 대상, 최종 결과를 식별하세요. 금전적 이득의 경우 목적지는 지갑일 수 있습니다. 잠금 해제의 경우 새 옵션입니다. 공격의 경우 접촉과 대상의 반응입니다.
- 적절한 준비를 선택하세요: 열림의 워블 및 압축, 타격의 후퇴, 에너지 방출 전 충전. 스트레치를 출력과, 오버슈트를 도착과, 안정을 독서와 조정하세요(해당되는 경우). 함께 페이드인만 하는 요소 집합은 피하세요.
- 시간에 따라 레이어를 분리하세요. 보상의 경우: 열림 → 빛 방출 → 객체/값 공개 → 충격 표시 → 별 흩뿌리기 → 먼지로 연장. 공격의 경우: 준비 → 던짐/타격 → 접촉 → 반응 → 소멸. 내러티브가 입자 수나 레이어 양보다 우선합니다.
- 강도를 빈도에 맞추세요. 드문 축하는 더 많은 존재감을 가질 수 있습니다. 자주 발생하는 알림은 대기 시간과 점유 공간이 더 적어야 합니다. 충격을 객체/카드에 국한시키고, 자동 선택으로 전체 애플리케이션을 흔들지 마세요.
- 자주 발생하거나 전투 효과의 경우 동작, 대상, 명령의 가독성을 유지하세요. 보상의 의식적 타이밍을 공격 타이밍으로 사용하지 마세요.
- 튜토리얼의 구성 순서가 효과의 지연을 결정하지 않습니다. 레이어를 동일한 이벤트에 고정하세요: 섬광, 반응, 소리가 접촉 시 일치할 수 있으며, 궤적과 잔여물은 각각 고유한 지속 시간을 가집니다. 비디오 길이도 시연된 동작의 지속 시간이 아닙니다.
구축 및 미리보기
인터페이스 객체 및 효과에는 HTML/CSS/SVG 및 Web Animations API를 선호합니다. 프로젝트의 리소스와 아키텍처를 사용하세요. 변형, 열림, 조정 가능한 궤적에 의존하는 효과에 비트맵을 생성하지 마세요. 게임의 경우 월드 효과에 기존 렌더러 및 업데이트 루프를 사용하세요. 웹 미리보기는 DOM/CSS를 통합에 강요하지 않고 타이밍을 연구할 수 있습니다.
독립적인 보상 경험을 시작하려면 assets/reward-envelope.html을 복사하여 수정하세요.
라이브러리, 이미지 또는 네트워크가 없는 자체 포함 예제입니다: 봉투, 일반 메달, 빛, 별, 먼지, 이득, 시뮬레이션된 지갑, 재생, 스크러버, 속도, 레이어 및 감소된 모션을 포함합니다.
요청에 따라 CONFIG, 구성 및 궤적을 변경하세요. 예제는 제품별 디자인을 대체하지 않습니다.
미리보기는 결과를 느끼고 타이밍을 검사할 수 있어야 합니다: 재생, 재생/일시 정지, 느린 동작, 타임라인. 레이어 토글은 포착, 빛, 입자의 기여를 이해하는 데 도움이 됩니다. 탐색 시 기본 동작을 추가된 레이어와 비교하고 각각이 해결하는 문제를 식별하세요: 출처 불명확, 약한 접촉, 반응 없는 대상, 읽기 어려운 결과. 사용 크기와 컨텍스트를 표시하고, 크고 고립된 객체만 보여주지 마세요. 변형의 양은 요청과 로컬 규칙을 따릅니다. 승인된 것을 개선할 때 예제를 보존하고 탐색을 다시 열지 않고 개선에 집중하세요.
캡처는 도움이 되지만 움직임을 증명하지 않습니다. 재생을 검토하고 또한 준비, 동작/접촉, 응답, 완료에서 타임라인을 멈추세요. 인터랙티브 예제에 대한 직접 링크를 제공하세요. 시뮬레이션된 값을 실제 이벤트 및 지불과 구분하세요.
유용한 불변 사항
- 레이어에 공유 타임라인을 사용하세요. 재생/검색은 동일한 상태를 생성해야 하고 입자, 타이머 또는 리스너의 중복을 피해야 합니다. 절차적 변형이 있을 때 재현 및 비교를 위해 시드를 유지하세요.
- UI에서 주로
transform과opacity를 애니메이션화하세요. 여러 효과가 동일한 속성을 놓고 경쟁할 때 변형, 변위, 출력을 분리하기 위해 래퍼를 사용하세요. - 지연된 출력이 초기 상태를 덮어쓰면 안 됩니다: WAAPI에서 해당 출력에
fill: 'forwards'를 사용하거나 단일 애니메이션에서 단계를 구성하세요. t=0에서와 스크러버를 뒤로 끈 후의 상태를 검토하세요. - 장면 내 지갑의 실제 위치에서 코인 목적지를 계산하고 크기 조정 시 다시 계산하세요. 작성자 모니터에 궤적을 고정하지 마세요.
- 감소된 모션에서 콘텐츠와 결과를 직접 읽을 수 있게 유지하고 워블, 스쿼시, 입자, 비행, 흔들림, 섬광을 제거하세요. 미리보기는 모션을 실험할 수 있는 명시적 명령을 제공할 수 있습니다. 사용자의 수동 선택을 유지하세요.
- 소리는 선택적 레이어이며, 상호작용으로 시작되고 제어 가능합니다. 기존 설정을 유지하고 동일한 이득에 대해 두 개의 소리를 피하세요.
- 통합 시 도메인 이벤트와 계약을 존중하세요. 보상은 확인된 이벤트에서 시작됩니다. 애니메이션은 돈을 할당하거나, 인벤토리를 변경하거나, 잔액 차이 또는 타이머 종료로 이득을 추론하지 않습니다. 전투에서 발사, 접촉, 확인된 피해를 구분하세요. 효과 종료를 히트 증거로 바꾸지 않고 기존 시각적 예측을 존중하세요.
보존 및 재사용
Quinas에서 리포지토리 내 docs/Identity/MOTION.md와
docs/Identity/motion/recompensas-03/를 참조하세요.
이것이 선택, T01/Q 리소스, 승인된 예제의 표준 출처입니다.
미리보기, S2/T2, 테마, 아티팩트 저장에 대한 로컬 규칙도 따르세요.
다른 프로젝트에서는 방법을 보존하고 해당 제품의 정체성을 사용하세요. Quinas의 브랜드, 통화, 컨트롤을 자동으로 가져오지 마세요.
사용자가 승인하고 보존을 요청할 때 재현 가능한 코드, 리소스, 타이밍, 선택 범위를 정체성의 내구성 있는 위치에 저장하고, 디자인 인덱스에 링크를 추가하세요. 승인된 참조와 실제 통합을 구분하세요. 미리보기 또는 보존 작업은 해당 범위에 속합니다. 구현 요청은 새 게이트를 만들지 않고 기존 승인을 따릅니다.
가장 작은 관련 범위를 확인하세요: 재생, 뒤로 검색, 재생, 콘텐츠 전환, 테마, 작은 화면, 궤적 목적지, 리소스, 콘솔. 제품을 변경할 때 프로젝트에서 요구하는 통합 검사를 실행하세요.