SVG를 사용하여 로딩 animation_html5 튜토리얼 기술을 만드는 방법을 설명하는 예-H5 튜토리얼-php.cn

SVG를 사용하여 로딩 animation_html5 튜토리얼 기술을 만드는 방법을 설명하는 예

WBOY

풀어 주다： 2016-05-16 15:45:22

원래의

2999명이 탐색했습니다.

오늘은 SVG 이미지를 기반으로 한 로딩 애니메이션을 공유해 드리고자 합니다. 요즘은 모바일 웹 페이지를 주로 사용하는데, 이미지 로딩 시 GIF도 사용하게 되면 이미지 품질에 영향을 줄 수 있으므로 SVG를 사용하는 것이 좋습니다. 좋은 방법입니다.

이번에 보여드리는 코드는 Aurer가 작성한 것입니다. 프런트엔드 담당자가 원하는 SVG 코드를 직접 복사하기만 하면 바로 사용할 수 있으며, 색상도 변경할 수 있습니다. 물론, 배우고 싶어하는 학생들을 위해서는 이 코드의 작성 원리를 공부할 수도 있습니다.

사용 튜토리얼

다음으로 Design Expert Network의 편집자가 이것을 사용하는 방법을 설명할 것입니다. 실제로는 매우 간단합니다.

1단계: 원하는 SVG 로딩 애니메이션 코드를 에 복사합니다. 편집기에서는 다음과 같이 코드를 복사할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<svg 버전="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" 너비="24px" 높이="30px" viewBox="0 0 24 30" 스타일="활성화 배경:새 0 0 50 50;" xml:space="보존">
<직선 x="0" y="0" 너비="4" 높이="10" 채우기 ="#333" 변환="번역(0 15.1665)" >
<animateTransform attributeType="xml" 속성 이름="변형" 유형="번역" 값="0 0; 0 20; 0 0" 시작="0" 기간=" 0.6초" 반복 횟수="무한">animateTransform>
정확>
<정렬 x="10" y="0" 너비="4" 높이="10" 채우기 ="#333" 변환="번역(0 11.5002)" >
<animateTransform attributeType="xml" 속성 이름="변형" 유형="번역" 값="0 0; 0 20; 0 0" 시작="0.2초" 기간= "0.6초" 반복 횟수="무한">animateTransform>
정확>
<직선 x="20" y="0" 너비="4" 높이="10" 채우기 ="#333" 변형="번역(0 1.83315)" >
<animateTransform attributeType="xml" 속성 이름="변형" 유형="번역" 값="0 0; 0 20; 0 0" 시작="0.4초" 기간= "0.6초" 반복 횟수="무한">animateTransform>
정확>
svg>

此时代码已经可以带动画了，但没颜color，请继续看STEP2添加颜color。

2단계 : 为SVG图image添加颜color

XML/HTML 코드

复复内容到剪贴板

<스타일>
스타일>

완료! 최종 데모:

ionic 라이브러리의 로딩 애니메이션이 사용됩니다.
ionic은 하이브리드 모바일 애플리케이션을 개발하는 데 사용되는 오픈 소스 무료 코드 라이브러리입니다. html, css 및 js의 성능을 최적화하고, 효율적인 애플리케이션을 구축할 수 있으며, Sass 및 AngularJS에 대한 최적화를 구축하는 데에도 사용할 수 있습니다. ionic은 신뢰할 수 있는 프레임워크가 될 것입니다.
설치가 매우 간단합니다. npm이 있는 경우 Windows 및 Linux에서 명령줄 도구를 열고 다음 명령을 실행합니다.

코드 복사

코드는 다음과 같습니다.

$ npm install -g cordova ionic

Mac 시스템에서는 다음 명령을 사용하세요.

코드 복사

코드는 다음과 같습니다.

sudo npm install -g cordova ionic

팁: IOS에서는 Mac OS X 및 Xcode 환경에서 설치하여 사용할 수 있습니다.
위 환경을 이미 설치한 경우 다음 명령을 실행하여 버전을 업데이트할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

npm update -g cordova ionic

또는

코드 복사

코드는 다음과 같습니다:

sudo npm update -g cordova ionic

로딩과 관련된 두 가지 구체적인 사용법을 살펴보겠습니다.

ionic 로딩 액션 $ionicLoading
$ionicLoading은 ionic의 기본 로딩 상호작용 효과입니다. 내부 콘텐츠도 템플릿에서 수정할 수 있습니다.
사용 예:
HTML 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

<html ng-app="ionicApp">
<머리>
<메타 문자 집합="utf- 8">
<메타 이름="뷰포트" 콘텐츠="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ">
<제목>이오니아 모달제목>
<링크 href="http: //www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
<스크립트 src="http: //www.runoob.com/static/ionic/js/ionic.bundle.min.js">스크립트>
머리>
<본체 ng-controller=" AppCtrl">
<이온뷰 제목=" 홈">
<ion-header-bar>
<h1 class="제목" >스투지스h1>
ion-header-bar>
<ion-content 헤더 있음="사실">
<이온 목록>
<이온 항목 ng-반복="stooge in Stooges" href="#">{ {stooge.name}}이온 아이템>
이온 목록>
이온 함량>
ion-view>
본체>
html>

JavaScript 代码

JavaScript 코드复复内容到剪贴板

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', 함수($scope, $timeout, $ionicLoading) {
// 로더 설정
$ionicLoading.show({
콘텐츠: '로드 중',
애니메이션: '페이드-',
showBackdrop: true,
최대 너비: 200,
showDelay: 0
});
// 로더를 지우려면 시간 제한을 설정하세요. 그러나 실제로는 $ionicLoading.hide()를 호출하게 됩니다. 모든 것이 준비되거나 로드될 때마다 메서드를 사용하세요.
$timeout(함수 () {
$ionicLoading.hide();
$scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
}, 2000);
});