인터넷의 지속적인 발전으로 H5 페이지는 사용자와의 직접적인 상호 작용을위한 프리젠 테이션 레이어로서 점점 더 복잡해지고, 프리젠 테이션 형태는 점점 더 풍부 해지고, H5 페이지는 더 많은 모티프와 애니메이션 효과를 필요로합니다. 프런트 엔드에서 애니메이션 효과를 얻는 방법은 무엇입니까? 대략 다음과 같습니다.
1. GIF 사진
GIF 사진에 직접 사진을 붙여 넣기 만하면됩니다. 사용하기 매우 쉽지만 때로는 GIF 사진에 문제가 있고 일반적인 GIF 사진의 깜박임 현상과 같은 제어 방법이 없습니다.
둘째, 시퀀스 프레임
시퀀스 프레임은 실제로 CSS 애니메이션과 결합 된 단일 GIF 프레임의 전개입니다.
구체적인 구현은 다음과 같습니다.
주요 용도는 애니메이션의 단계 기능이며 호환성은 여전히 매우 좋습니다.
H5 시퀀스 프레임 개발에서 휴대폰의 다른 해상도는 약간의 지터를 가질 수 있으며, 이는 dom을 SVG에 중첩하여 해결할 수 있습니다.
세, CSS 애니메이션
animation 속성은 하나 이상의 애니메이션 그룹을 지정하는 데 사용되며 각 그룹은 쉼표로 구분됩니다.
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}타이밍 기능
animation-timing-function 속성은 각 애니메이션주기에서 수행되는 CSS 애니메이션의 리듬을 정의합니다. 가능한 값은 하나 이상의 <timing-function>입니다.
키 프레임 애니메이션의 경우 타이밍 기능은 전체 애니메이션주기가 아닌 키 프레임주기, 즉 키 프레임의 시작부터 키 프레임의 끝까지 작동합니다.
몇 가지 시간 함수가 있습니다.
ease-in; //加速
ease-out;//减速
ease-in-out;//先加速后减速
linear;//匀速
step-start;//等同于steps(1,start)
step-end;//等同于steps(1, end)
cubic-bezier(0.1, 0.7, 1.0, 0.1);//贝塞尔曲线
steps(number, end);//从number位置开始，逐步执行그 중 위의 시퀀스 프레임 애니메이션에서 사용한 단계 함수는 실제로 n 단계로 나누어 단계별로 실행되는 애니메이션 함수입니다.
넷째, Lottie 애니메이션
Lottie 는 Airbnb에서 개발 한 애니메이션 프레임 워크로 Window, Android, iOS, Web 등 다양한 플랫폼에서 지원됩니다.
웹 측에서 본질은 애니메이션 구현을 위해 JS를 사용하는 SVG 또는 Canvas를 기반으로합니다. 경로의 복잡성으로 인해 일상적인 개발에서 일반적으로 렌더링을 위해 해당 애니메이션 경로 파일 (json 또는 js 형식)을 출력하기 위해 UI 디자이너와 협력해야합니다.
구체적인 호출 방법은 다음과 같습니다. 여기서 data는 애니메이션의 구성 파일입니다.
매개 변수 설명 :
Five, WebGL 및 Canvas
페이지 애니메이션 복잡도가 높은 경우 dom을 사용하여 그리기 성능 문제가 발생할 수 있으며 화면이 멈출 수 있습니다. 이때 렌더링시 WebGL 또는 Canvas를 고려할 수 있습니다.
WebGL (전체 웹 그래픽 라이브러리)은 JavaScript와 OpenGL ES 2.0을 결합 할 수있는 3D 그래픽 표준입니다.
OpenGL ES 2.0의 JavaScript 바인딩을 추가함으로써 WebGL은 HTML5 Canvas 용 하드웨어 3D 가속 렌더링을 제공 할 수 있으므로 웹 개발자는 시스템 그래픽 카드를 사용하여 브라우저에서 3D 장면과 모델을보다 원활하게 표시하고 복잡한 작업을 만들 수 있습니다. 탐색 및 데이터 시각화.
물론 3D는 WebGL로만 렌더링 할 수 있는데 여기서는 WebGL2D와 Canvas 2D의 상황을 비교해 보겠습니다.
1. 성능 비교
많은 수의 그리기 작업을 수행해야하는 경우 WebGL의 성능이 Canvas 2D Api를 훨씬 능가하여 후자의 10 배에 달하는 것을 알 수 있습니다.
2. 호환성
（1） webGL
（2） 캔버스
일반적으로 브라우저가 WebGL을 지원하지 않는 경우이를 처리하려면 Canvas로 다운 그레이드해야합니다.
WebGL이 지원하는지 확인하는 방법은 무엇입니까?
canvas.getContext ( "experimental-webgl")
반환 결과가 정의되지 않은 경우 지원되지 않음을 의미하고 그렇지 않으면 WebGL을 사용할 수 있습니다.
3. 호출 방법
빨간색 채우기 색상으로 간단한 직사각형을 그립니다.
Canvas API를 사용하여 작성하는 방법 :
webGL을 사용하여 작성하는 방법 :
여섯, 게임 애니메이션 엔진
애니메이션 기능이 더 복잡 할 경우 webGL이나 캔버스 API를 사용하여 직접 개발하는 것이 더 비싸기 때문에 개발할 현재 장면에 적합한 게임 엔진을 선택할 수 있습니다.
애니메이션은 차원으로 세분화 할 수 있습니다. 3D 애니메이션은 일반적으로 Three.js 또는 기타 게임 엔진과 같은 렌더링 엔진을 사용하여 구현됩니다. 2D 애니메이션도 우수한 엔진 지원을 제공합니다.
다음은 각 게임 애니메이션 엔진의 수평 비교입니다.
1. 2D, 3D, VR을 지원하는 게임 엔진
（1）백로
Egret Engine은 팀에서 유지 관리하는 엔터프라이즈 급 게임 엔진입니다. Egret는 Wing 코드 작성에서 ResDepot 및 TextureMerger의 리소스 통합, Inspector 디버깅, 마지막으로 네이티브 패키징 (앱 패키징 지원)에 이르기까지 게임 개발 프로세스의 모든 작업을 지원합니다. 링크는 기본적으로 도구에 의해 지원됩니다.
공식 웹 사이트에는 많은 예제와 튜토리얼이 있습니다. Egret 엔진은 성능 향상을위한 또 다른 이정표 인 WebAssembly를 지원합니다.
(이미지 출처 : Bailu Engine 공식 웹 사이트 )
（2）라야 에어
Canvas 및 WebGL 모드 적응을 지원합니다. 2D, 3D 및 VR 제품 개발에 적합한 ActionScript3, TypeScript 및 JavaScript의 세 가지 개발 언어를 지원합니다.
성능은 네이티브 앱과 비슷하며 HTML5, APP (Android 및 iOS), WeChat 게임, QQ가 동시에 출시됩니다.
2. 2D, 3D 게임 엔진
（1）Three.js
(이미지 출처 : Three.js 공식 웹 사이트 )
Three.js의 공식 포지셔닝은 게임 엔진이 아니라 JS 3D 라이브러리입니다. Three.js는 시각적 프레젠테이션을 표시하는 경향이 있으며 일부 사용자는 Three.js를 직접 사용하여 H5 게임을 개발합니다.
（2）Pixi.js
일반적으로 WebGL의 렌더링 속도는 둘의 드로잉 경로에 의해 결정되는 Canvas의 렌더링 속도보다 빠릅니다. Pixi의 가장 큰 특징은 Pixi가 WebGL을 완벽하게 지원하지만 개발자가 WebGL 관련 지식을 습득 할 필요가 없으며 필요할 때 Canvas로 원활하게 돌아갈 필요가 없다는 것입니다.
유사한 많은 제품과 비교할 때 렌더링 기능은 상대적으로 강력합니다. 그러나 Pixi에도 단점이 있으며 Pixi는 애니메이션 지원이 부족하여 실제 개발시 GSAP와 같은 추가 애니메이션 라이브러리를 도입해야하는 경우가 많습니다.
（3）페이저
Phaser는 렌더링 측면에서 Pixi를 직접 캡슐화합니다. 아키텍처 측면에서 Phaser는 3 개의 물리 엔진 (Arcade Physics, Ninja, p2.js)을 포함하여 입자 시스템, 애니메이션, 사전 다운로드 및 장치 적응 솔루션을 제공합니다. 호환성 측면에서 Phaser 초점은 모바일 브라우저에 있으며, API 측면에서 Phaser는 풍부한 게임 기능을 구현할 수 있으며 복잡한 게임 개발에 적합합니다.
（4）CreateJs
(이미지 출처 : CreateJs 공식 웹 사이트 )
CreateJS는 애니메이션 개발을 지원하기 위해 공식적으로 TweenJS를 제공하는 동시에 H5 게임의 기본 기능에 충분한 SoundJS 및 PreLoadJS를 통해 오디오 및 사전 다운로드 지원을 제공합니다. 호환성 측면에서 CreateJS는 PC 및 모바일에서 거의 모든 브라우저를 지원합니다. 또한 CreateJS는 Flash CC를 지원하여 CreateJS에서 렌더링 한 H5 게임을 개발하고 내보낼 수 있습니다.
（5）힐로
Hilo는 Hilo.js (2D) 및 Hilo3D를 포함하여 Ali 팀이 시작한 오픈 소스 프로젝트입니다. 모듈 식 개발을 지원합니다. 또한 여러 모듈 패러다임의 패키징 버전과 교차 터미널 솔루션을 제공합니다. Hilo.js는 마케팅 게임 개발에 적합합니다. . 볼륨은 비교적 가볍고 약 70kb에 불과합니다.
주요 특징:
- DOM, Canvas, Flash, WebGL 및 기타 렌더링 솔루션을 제공하는 여러 렌더링 방법.
- 미니멀리스트 커널 : Hilo 코어 모듈은 매우 간소화되어 2D 게임 엔진에 가장 필요한 모듈을 유지하고 모듈 식 관리를 채택합니다.
- 물리 엔진 지원 -Chipmunk, 자체 확장 물리 구현 지원, 골격 애니메이션 지원 -DragonBones.
- 풍부한 사례 : Tmall을 지원하고, Double Eleven, 중기 큰 프로모션 등과 같은 많은 대규모 및 일상 활동을 직접 쇼핑합니다. 카니발 시티 등 대표 상품.
케이스:
(이미지 출처 : Hilo Github )
공식 예 :
(이미지 출처 : Hilo Github )
Hilo.js 게임 엔진은 기본적으로 일상적인 2D 애니메이션의 개발 요구를 충족합니다. 호환성이 좋고 4 가지 렌더링 방식을 지원하며 일반적으로 캔버스가 선택되어 있으며 실습 후 android4.4 렌더링에 문제가없고 동작이 약간 멈춘다. 구성 요소 라이브러리는 매우 가볍고 hilo-standalone.min.js는 Phaser (946k)에 비해 70k에 불과하며 hilo는 코드 크기 측면에서 매우 친숙합니다.
일곱, 참고 문헌
저자 : Luo Ran