자바스크립트 라이브러리를 제작하여 애니메이션을 통해 표정을 컨트롤하고 니코 로고 스타일의 얼굴 부품을 제작할 수 있습니다.

백문이 불여일견이니 우선 시위 행진을 시도해 보세요.
슬라이더로 표정을 자유롭게 조작할 수 있는 시범
위에서 말한 바와 같이 간단한 표정 표현의 간단한 얼굴 부품을 설정할 수 있는 자바스크립트 라이브러리(jQuery 필요 없음).모든 위젯의 변화는 스타일 조작을 통해 이루어지기 때문에 이미지 등이 필요하지 않습니다.JavaScript 소스를 하나만 읽으면 됩니다.
설치된 얼굴 부품의 눈썹, 눈, 입 각 부분을 조작해 표정을 조작할 수 있다.애니메이션의 유무와 표정 변화의 속도도 변경할 수 있다.

표정

다운로드

GiitHub 웨어하우스

최신 버전 다운로드

사용법

face-emotion.HTML에서 js를 읽습니다.

<script type="text/javascript" src="/path/to/face-emotion.js"></script>

HTML에 얼굴 부품을 설치할 빈 심볼을 준비합니다(ID 속성을 추가하십시오).

<div id="face"></div>

Javascript에서 위 컴포넌트를 지정하고 new FaceEmotion()을 실행합니다.첫 번째 매개변수에서 2에 준비된 요소의 ID를 지정합니다.

var face = new FaceEmotion('face');

표정 변화는 new FaceEmotion()의 반환값 변수의 set() 방법을 통해 수행됩니다.눈썹, 눈, 입은 각각 -100~100 사이에서 지정할 수 있다.0은 무표정, 음수는 소극적인 표정, 정수는 적극적인 표정이다.

// ドヤ顔させる
face.set({
  eyebrow: 20,
  eye: -40,
  mouth: 30
});

기타 상세한 옵션 등.를 참고하십시오.md 보세요.

브라우저 지원

모던 브라우저와 IE9 이상을 사용합니다.IE 8 이하도 움직일 수 있지만, CSS 3 스타일을 자주 사용하기 때문에 스타일을 반영하지 않고 마이크래프트 캐릭터 같은 얼굴로 변신한다.
GiitHub 웨어하우스
응, 이거 이러면 냄새 날지도 몰라.
이상은 사용 방법의 미묘한 프로그램 라이브러리에 대한 소개입니다.