oil-oil/oil-motion

중국어 · 영어

오일 모션은 에이전트를 위한 범용 인터랙티브 애니메이션 기술입니다. 이 기술은 움직임 설계, 연속 프레임 생성, 애니메이션 자원 조직, 그리고 최종 효과를 페이지 스크롤, 마우스, 드래그, 터치, 장치 방향 등에 통합하는 역할을 담당합니다.

사용할 때는 표현하고 싶은 것, 제공할 자산, 애니메이션이 따라야 할 동작만 지정하면 됩니다. 특정 생성, 검사, 압축, 프론트엔드 구현은 에이전트가 처리합니다.

시연

https://github.com/user-attachments/assets/08e26ad6-ca23-4f31-ac53-44c7692ba99d

설치

저장소 주소를 에이전트에게 알려주세요:

명령어로 설치할 수도 있고, 완료 후 에이전트가 스킬을 다시 불러오게 할 수도 있습니다:

적용 가능한 경계

피사체 자체가 변경되어야 하는 인터랙티브 애니메이션에 적합합니다: 캐릭터 전환, 제품 분해, 재질 변경, 카메라 전환, 또는 기존 그린스크린 비디오와 스프라이트 이미지를 웹페이지 자원으로 정리하여 제어할 수 있습니다.

CSS, JS, SVG, LOTTIE, 실시간 3D만으로도 완료할 수 있는 인터페이스 전환, 버튼 피드백, 레이아웃 애니메이션은 일반 프론트엔드에서 직접 처리할 수 있으며, 이 자료 워크플로우 없이도 가능합니다. 독립적인 비디오 편집과 단일 이미지 배치도 제외됩니다.

구현에 적합한 애니메이션

• 스크롤 시: 제품이 점차 블라스트 이미지로 펼쳐지고, 카메라가 내부 구조에 진입하거나 여러 상태 사이를 전환합니다.
• 여러 장면을 스크롤할 때: 여러 개의 연속된 영상 구간을 사용해 도시 파노라마에서 칩 안쪽으로 이동하거나, 전경 장애물이나 비슷한 모양의 물체를 사용해 다음 장면으로 전환하는 등 연속적인 테이크를 만듭니다.
• 마우스가 움직일 때: 캐릭터의 얼굴은 항상 화면을 향하고 시선은 커서를 따라갑니다; 또는 하드웨어 제품이 끌려 부스를 360° 회전시킵니다.
• 진행 상황을 드래그할 때: 애니메이션은 앞으로, 뒤로 움직이거나 지정된 위치에서 멈추는 제스처를 따라갑니다.
• 휴대전화에서: 피사체의 방향과 높이를 조절하기 위해 터치나 기기 기울임을 사용하세요.
• 클릭, 마우스 올리기, 상태 변경 시: 해당 액션 전환을 재생; 액션을 되돌리면 현재 화면에서 철회합니다.
• 행동이 없을 때: 사용자가 입력을 시작하자마자 따라 움직이도록 전환하는 자연스러운 미세 움직임이나 루프를 유지합니다.

이 애니메이션들은 제품 소개, 캐릭터 상호작용, 작동 시연, 데이터 변경, 챕터 전환 등에 활용될 수 있습니다. 오일 모션은 모션 일관성, 이미지 선명도, 로딩 볼륨, 모바일 성능을 동시에 처리합니다.

작동 원리

AI 생성 영상은 안정적인 타임라인으로 구성되어야 하며, 상호작용 목표에 따라 제어 방법이 선택됩니다: 입력 값은 애니메이션 진행 상황에 지속적으로 대응할 수 있고, 일반 재생 전환만 트리거할 수 있으며, 시간에 따라 애니메이션이 자율적으로 재생되도록 할 수 있습니다. 스크롤, 마우스, 상태 전환은 입력 소스일 뿐 재생 모드를 직접 결정하지는 않습니다.

전체 절차는 다음과 같습니다:

이 과정은 세 부분으로 나뉩니다.

먼저, 키 스크린을 확인하세요

핵심 이미지는 제품 완성도, 부품 전개, 최종 분해 등 작업 중에 유지되어야 하는 정확한 상태를 의미합니다. 에이전트는 이 이미지를 생성하고 검사하여 대상자의 정체성, 구조, 로고, 구성, 스타일이 변하지 않는지 확인합니다.

전체 영상을 직접 생성하면 모델이 제품 구조, 캐릭터 비율, 또는 작업 종료점을 변경할 수 있습니다. 핵심 샷을 먼저 확인하면 연속적인 행동이 명확한 시작점, 프로세스, 종점을 가질 수 있습니다.