지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 웹 프론트엔드 H5 튜토리얼 SVG를 사용하여 로딩 animation_html5 튜토리얼 기술을 만드는 방법을 설명하는 예

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
svg 짐

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

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

사용 튜토리얼

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

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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <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="보존">  
  2. <직선 x="0"  y="0" 너비="4" 높이="10" 채우기 ="#333" 변환="번역(0 15.1665)" >  
  3. <animateTransform attributeType="xml"  속성 이름="변형" 유형="번역" 값="0 0; 0 20; 0 0" 시작="0" 기간=" 0.6초" 반복 횟수="무한">animateTransform>  
  4. 정확>  
  5. <정렬 x="10"  y="0" 너비="4" 높이="10" 채우기 ="#333" 변환="번역(0 11.5002)" >  
  6. <animateTransform attributeType="xml"  속성 이름="변형" 유형="번역" 값="0 0; 0 20; 0 0" 시작="0.2초" 기간= "0.6초" 반복 횟수="무한">animateTransform>  
  7. 정확>  
  8. <직선 x="20"  y="0" 너비="4" 높이="10" 채우기 ="#333" 변형="번역(0 1.83315)" >  
  9. <animateTransform attributeType="xml"  속성 이름="변형" 유형="번역" 값="0 0; 0 20; 0 0" 시작="0.4초" 기간= "0.6초" 반복 횟수="무한">animateTransform>  
  10. 정확>  
  11. svg>  

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

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

XML/HTML 코드
复复内容到剪贴板
  1. <스타일>  
    2. svg 경로,svg 직사각형{채우기: #FF6700;}   
  3. 스타일>  

완료! 최종 데모:
201645112526157.gif (500×250)

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

201645112554683.jpg (642×270)

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

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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <html ng-app="ionicApp">  
  2.   <머리>  
  3.     <메타 문자 집합="utf- 8">  
  4.     <메타 이름="뷰포트"  콘텐츠="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ">    
  5.        
  6.     <제목>이오니아 모달제목>  
  7.   
  8.      <링크 href="http: //www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">  
  9.     <스크립트 src="http: //www.runoob.com/static/ionic/js/ionic.bundle.min.js">스크립트>  
  10.   머리>  
  11. <본체 ng-controller=" AppCtrl">  
  12.        
  13.       <이온뷰 제목=" 홈">  
  14.         <ion-header-bar>  
  15.           <h1 class="제목" >스투지스h1>  
  16.         ion-header-bar>  
  17.         <ion-content 헤더 있음="사실">  
  18.           <이온 목록>  
  19.            <이온 항목 ng-반복="stooge in Stooges" href="#">{ {stooge.name}}이온 아이템>  
  20.           이온 목록>  
  21.         이온 함량>  
  22.       ion-view>  
  23.        
  24.   본체>  
  25. html>  

JavaScript 代码

JavaScript 코드复复内容到剪贴板
  1. angular.module('ionicApp', ['ionic'])   
  2. .controller('AppCtrl', 함수($scope, $timeout, $ionicLoading) {   
  3.   
  4.   // 로더 설정   
  5.   $ionicLoading.show({   
  6.     콘텐츠: '로드 중',   
  7.     애니메이션: '페이드-',   
  8.     showBackdrop: true,   
  9.     최대 너비: 200,   
  10.     showDelay: 0   
  11.   });   
  12.      
  13.   // 로더를 지우려면 시간 제한을 설정하세요. 그러나 실제로는 $ionicLoading.hide()를 호출하게 됩니다. 모든 것이 준비되거나 로드될 때마다 메서드를 사용하세요.   
  14.   $timeout(함수 () {   
  15.     $ionicLoading.hide();   
  16.     $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];   
  17.   }, 2000);   
  18.      
  19. });  

$ionicLoadingConfig
사용 용도:

HTML 代码

XML/HTML 코드复复内容到剪贴板
  1. <이온 함량 스크롤="false" class="헤더 있음">  
  2.   <p>  
  3.     <이온 스피너 아이콘=" android">ion-spinner>  
  4.     <이온 스피너 아이콘=" ios">ion-spinner>  
  5.     <이온 스피너 아이콘=" ios-small">ion-spinner>  
  6.     <이온 스피너 아이콘=" 거품" 클래스="스피너 밸런스">이온 스피너>  
  7.     <이온 스피너 아이콘=" 서클" 클래스="스피너 활성화">이온 스피너>  
  8.   p>  
  9.   
  10.   <p>  
  11.     <이온 스피너 아이콘=" crescent" class="spinner-royal">이온 스피너>  
  12.   
  13.     <이온 스피너 아이콘=" dots" class="spinner-dark">이온 스피너>  
  14.     <이온 스피너 아이콘=" 라인" class="spinner-calm">이온 스피너>  
  15.     <이온 스피너 아이콘=" ripple" class="spinner-assertive">이온 스피너>  
  16.     <이온 스피너 아이콘=" 나선형">이온 스피너>  
  17.   p>  
  18.   
  19.   
  20. 이온 함량>  

 
CSS 代码

CSS 코드复复内容到剪贴板
  1. 본체 {   
  2.   커서: url('http://www.runob.com/try/demo_source/finger .png'), 자동;   
  3. }       
  4. p {   
  5.   텍스트 정렬: 가운데;   
  6.   여백-하단: 40px !중요;   
  7. }   
  8. .spinner svg {   
  9.   너비: 19% !중요;   
  10.   높이: 85px !중요;   
  11. }  

JavaScript 代码

JavaScript 코드复复内容到剪贴板
  1. angular.module('ionicApp', ['ionic'])   
  2.   
  3. .controller('MyCtrl', 함수($scope) {    
  4.      
  5. });  
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
1 몇 달 전 By DDD
R.E.P.O. 최고의 그래픽 설정
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
1 몇 주 전 By DDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
더보기

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7405
15
자바 튜토리얼
1630
14
Cakephp 튜토리얼
1358
52
라라벨 튜토리얼
1268
25
PHP 튜토리얼
1218
29
더보기
Related knowledge
Illustrator에서 플러그인 로드 중 오류 발생 [수정됨] Illustrator에서 플러그인 로드 중 오류 발생 [수정됨] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator를 시작할 때 플러그인 로딩 오류에 대한 메시지가 팝업됩니까? 일부 Illustrator 사용자는 응용 프로그램을 열 때 이 오류가 발생했습니다. 메시지 뒤에는 문제가 있는 플러그인 목록이 표시됩니다. 이 오류 메시지는 설치된 플러그인에 문제가 있음을 나타내지만 손상된 Visual C++ DLL 파일이나 손상된 기본 설정 파일과 같은 다른 이유로 인해 발생할 수도 있습니다. 이 오류가 발생하면 이 문서에서 문제 해결 방법을 안내하므로 아래 내용을 계속 읽어보세요. Illustrator에서 플러그인 로드 오류 Adobe Illustrator를 시작하려고 할 때 "플러그인 로드 오류" 오류 메시지가 표시되면 다음을 사용할 수 있습니다. 관리자로

Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다. Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다. Feb 24, 2024 am 09:50 AM

Windows PC의 Stremio에서 자막이 작동하지 않습니까? 일부 Stremio 사용자는 동영상에 자막이 표시되지 않는다고 보고했습니다. 많은 사용자들이 "자막을 로드하는 중 오류가 발생했습니다."라는 오류 메시지가 나타났다고 보고했습니다. 이 오류와 함께 나타나는 전체 오류 메시지는 다음과 같습니다. 자막을 로드하는 동안 오류가 발생했습니다. 자막을 로드하지 못했습니다. 이는 사용 중인 플러그인이나 네트워크에 문제가 있을 수 있습니다. 오류 메시지에서 알 수 있듯이 인터넷 연결로 인해 오류가 발생할 수 있습니다. 따라서 네트워크 연결을 확인하고 인터넷이 제대로 작동하는지 확인하십시오. 이 외에도 충돌하는 자막 추가 기능, 특정 비디오 콘텐츠에 대해 지원되지 않는 자막, 오래된 Stremio 앱 등 이 오류의 다른 이유가 있을 수 있습니다. 좋다

SVG를 사용하여 이미지 모자이크 효과를 얻는 방법에 대해 이야기해 보겠습니다. SVG를 사용하여 이미지 모자이크 효과를 얻는 방법에 대해 이야기해 보겠습니다. Sep 01, 2022 am 11:05 AM

Javascript를 사용하지 않고 SVG를 사용하여 이미지 모자이크 효과를 얻는 방법은 무엇입니까? 다음 기사는 귀하에게 자세한 이해를 제공할 것이며, 귀하에게 도움이 되기를 바랍니다!

하이퍼링크를 삽입하면 Outlook이 정지됩니다. 하이퍼링크를 삽입하면 Outlook이 정지됩니다. Feb 19, 2024 pm 03:00 PM

Outlook에 하이퍼링크를 삽입할 때 정지 문제가 발생하는 경우 불안정한 네트워크 연결, 이전 Outlook 버전, 바이러스 백신 소프트웨어의 간섭 또는 추가 기능 충돌이 원인일 수 있습니다. 이러한 요인으로 인해 Outlook이 하이퍼링크 작업을 제대로 처리하지 못할 수 있습니다. 하이퍼링크를 삽입할 때 Outlook이 멈추는 문제 해결 다음 수정 사항을 사용하여 하이퍼링크를 삽입할 때 Outlook이 멈추는 문제를 해결하세요. 설치된 추가 기능 확인 Outlook 업데이트 일시적으로 바이러스 백신 소프트웨어를 비활성화한 다음 새 사용자 프로필을 만들어 보세요. Office 앱 수정 프로그램 Office 제거 및 재설치 시작하겠습니다. 1] 설치된 추가 기능을 확인하세요. Outlook에 설치된 추가 기능이 문제의 원인일 수 있습니다.

PHP는 무한 스크롤 로딩을 구현합니다. PHP는 무한 스크롤 로딩을 구현합니다. Jun 22, 2023 am 08:30 AM

인터넷이 발전하면서 점점 더 많은 웹페이지에서 스크롤 로딩을 지원해야 하는데, 무한 스크롤 로딩이 그 중 하나입니다. 이를 통해 페이지에 새로운 콘텐츠가 지속적으로 로드되어 사용자가 웹을 보다 원활하게 탐색할 수 있습니다. 이번 글에서는 PHP를 이용하여 무한 스크롤 로딩을 구현하는 방법을 소개하겠습니다. 1. 무한 스크롤 로딩이란 무엇인가요? 무한 스크롤 로딩은 스크롤 막대를 기반으로 웹 콘텐츠를 로딩하는 방법입니다. 그 원리는 사용자가 페이지 하단으로 스크롤할 때 AJAX를 통해 배경 데이터를 비동기적으로 검색하여 지속적으로 새 콘텐츠를 로드하는 것입니다. 이런 종류의 로딩 방법

CSS를 로드할 수 없는 문제를 해결하는 방법 CSS를 로드할 수 없는 문제를 해결하는 방법 Oct 20, 2023 am 11:29 AM

CSS를 로드할 수 없는 문제에 대한 해결 방법에는 파일 경로 확인, 파일 내용 확인, 브라우저 캐시 지우기, 서버 설정 확인, 개발자 도구 사용 및 네트워크 연결 확인이 포함됩니다. 자세한 소개: 1. 파일 경로를 확인하십시오. 먼저 CSS 파일의 경로가 올바른지 확인하십시오. CSS 파일이 웹사이트의 다른 부분이나 하위 디렉토리에 있는 경우 올바른 경로를 제공해야 합니다. CSS 파일은 루트 디렉토리에 있으며 경로는 직접적이어야 합니다. 2. 파일 내용을 확인하십시오. 경로가 올바른 경우 CSS 파일 자체에 문제가 있을 수 있습니다.

svg를 jpg 형식으로 변환하는 방법 svg를 jpg 형식으로 변환하는 방법 Nov 24, 2023 am 09:50 AM

svg는 이미지 처리 소프트웨어, 온라인 변환 도구, Python 이미지 처리 라이브러리를 사용하여 jpg 형식으로 변환할 수 있습니다. 자세한 소개: 1. 이미지 처리 소프트웨어에는 Adobe Illustrator, Inkscape 및 GIMP가 포함됩니다. 2. 온라인 변환 도구에는 CloudConvert, Zamzar, Online Convert 등이 포함됩니다. 3. Python 이미지 처리 라이브러리 등

Windows 7에서 USB 드라이버를 로드하지 못하는 경우 어떻게 해야 합니까? Windows 7에서 USB 드라이버를 로드하지 못하는 경우 어떻게 해야 합니까? Jul 11, 2023 am 08:13 AM

win7 시스템을 설치할 때 일부 네티즌은 USB 드라이버 로딩에 실패하는 상황에 직면했습니다. 새로운 win7 시스템에서 USB 장치를 인식할 수 없으며 일반적인 USB 플래시 드라이브, 마우스 및 기타 장치를 사용할 수 없습니다. 그렇다면 win7 설치 시 USB 드라이버를 로드하지 못한 경우 어떻게 해야 합니까? Win7을 설치할 때 USB 드라이버를 로드하지 못하는 문제를 해결하는 방법을 Xiaobai에서 가르쳐 드리겠습니다. 방법 1: 1. 먼저 컴퓨터를 켜고 컴퓨터 시스템에 들어가서 컴퓨터 시스템의 컴퓨터 시스템 버전을 확인합니다. 컴퓨터 시스템 버전이 장치 드라이버 버전과 일치하는지 확인하세요. 2. 드라이버 버전을 확인한 후 USB 장치를 컴퓨터 시스템에 연결합니다. 컴퓨터 시스템에 장치를 시스템에 연결할 수 없다고 표시됩니다. 3. 연결 정보 페이지에서 도움말 버튼을 클릭하면 도움말 정보를 볼 수 있습니다. 4. 컴퓨터학과의 경우

See all articles