SVG を使用して読み込みアニメーション HTML5 チュートリアル スキルを作成する方法を説明する例

今日は SVG 画像をベースにした読み込みアニメーションを共有したいと思います。現在、モバイル Web ページでも画像の読み込みに 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" スタイル="enable-background:new 0 0 50 50;" xml:space="保存">
2. rect x="0" y="0" 幅="4" 高さ="10" 塗りつぶし="#333" transform="translate(0 15.1665)" >
3. animateTransform attributeType="xml" 属性名=「変換」 タイプ=「翻訳」 値="0 0; 0 20; 0 0" 開始="0" 期間=" 0.6 秒" repeatCount="無期限">animateTransform>
4. rect>
5. rect x="10" y="0" 幅="4" 高さ="10" 塗りつぶし="#333" transform="translate(0 11.5002)" >
6. animateTransform attributeType="xml" 属性名=「変換」 タイプ=「翻訳」 値="0 0; 0 20; 0 0" 開始=「0.2秒」 期間= "0.6s" repeatCount="無期限"> animateTransform>
7. rect>
8. rect x="20" y="0" 幅="4" 高さ="10" 塗りつぶし="#333" 変換="translate(0 1.83315)" >
9. animateTransform attributeType="xml" 属性名=「変換」 タイプ=「翻訳」 値="0 0; 0 20; 0 0" 開始=「0.4秒」 期間= "0.6s" repeatCount="無期限"> animateTransform>
10. rect>
11. svg>

この時点でコードは描画できましたが、色は追加されていないため、STEP2 の色の追加を続けて見てください。

ステップ 2 : SVG 画像に色を追加します

给你的样式表添加如下式，里面的颜色代码换上你喜欢的即時！

XML/HTML コード复制コンテンツ到剪贴板

1. スタイル>
2. svg path,svg rect{fill: #FF6700;}
3. スタイル>

完了!最終デモ:

ionic ライブラリのローディング アニメーションが使用されます
ionic は、ハイブリッド モバイル アプリケーションの開発に使用されるオープン ソースの無料コード ライブラリです。 html、css、js のパフォーマンスを最適化し、効率的なアプリケーションを構築できるほか、Sass や AngularJS の最適化を構築するためにも使用できます。 ionic は信頼できるフレームワークになります。
npm がある場合は、Windows および Linux でコマンド ライン ツールを開き、次のコマンドを実行します。

コードをコピーします。 🎜>コードは次のとおりです:

$ npm install -gcordova ionic

Mac システムで次のコマンドを使用します:

コードをコピーコードは次のとおりです:

sudo npm install -gcordova ionic

ヒント: IOS は次のことを行う必要があります。 Mac OS X および Xcode 環境でインストールして使用できます。
上記の環境がすでにインストールされている場合は、次のコマンドを実行してバージョンを更新できます:

コードをコピー コードは次のとおりです:

npm update -gcordova ionic

または

コードをコピー コード 次のように:

sudo npm update -gcordova ionic

読み込み関連の 2 つの具体的な使用法を見てみましょう:

ionic ローディング アクション $ionicLoading
$ionicLoading は、ionic のデフォルトのローディング インタラクション エフェクトです。内部のコンテンツはテンプレートで変更することもできます。 使用例:
HTML コード:

XML/HTML コードコンテンツをクリップボードにコピー

1. html ng-app="ionicApp">
2. 頭>
3. meta charset="utf- 8">
4. メタ 名前="ビューポート" コンテンツ="初期スケール = 1、最大スケール = 1、ユーザー スケーラブル = いいえ、幅 = デバイス幅">
6. title>Ionic Modalタイトル>
8. link href="http: //www.runoob.com/static/ionic/css/ionic.min.css" rel="スタイルシート">
9. script src="http: //www.runoob.com/static/ionic/js/ionic.bundle.min.js">スクリプト>
10. 頭>
11. ボディ NG コントローラー=" AppCtrl">
13. イオンビュー タイトル="ホーム">
14. イオンヘッダーバー>
15. h1 クラス="タイトル" >ストゥージズh1>
16. イオンヘッダーバー>
17. イオンコンテンツ ヘッダーあり="true">
18. イオンリスト>
19. イオンアイテム ng-repeat="手口" href="#">{ {stooge.name}}イオンアイテム>
20. イオンリスト>
21. イオンコンテンツ>
22. ion-view>
24. ボディ>
25. html>

JavaScript 代码

JavaScript コード复制コンテンツ到剪贴板

1. angular.module(‘ionicApp‘, [‘ionic‘])
2. .controller(‘AppCtrl‘,function($scope, $timeout, $ionicLoading) {
4. // ローダーのセットアップ
5. $ionicLoading.show({
6. コンテンツ: 「読み込み中」、
7. アニメーション: 「フェード - in 」、
8. showBackdrop: true、
9. maxWidth: 200,
10. showDelay: 0
11. });   
13. // ローダーをクリアするためにタイムアウトを設定しますが、実際には $ionicLoading.hide(); を呼び出すことになります。 すべての準備ができたとき、またはロードされたときにメソッドを実行します。
14. $timeout(関数 () {
15. $ionicLoading.hide();   
16. $scope.stooges = [{name: ‘Moe’}, {name: ‘Larry’}, {name: ‘Curly’}];   
17. }、2000);   
19. });  

$ionicLoadingConfig
使用例：

HTML代幣

XML/HTML コード复制コンテンツ到剪贴板

1. イオンコンテンツ スクロール="false" クラス="ヘッダーあり">
2. p>
3. イオンスピナー アイコン=" android">イオンスピナー>
4. イオンスピナー アイコン=" ios">イオンスピナー>
5. イオンスピナー アイコン=" ios-small">イオンスピナー>
6. イオンスピナー アイコン="バブル" クラス="スピナーバランス"> イオンスピナー>
7. イオンスピナー アイコン="サークル" クラス="スピナー励起"> イオンスピナー>
8. p>
10. p>
11. イオンスピナー アイコン="三日月" クラス="スピナーロイヤル"> イオンスピナー>
13. イオンスピナー アイコン=" dots" クラス="スピナーダーク"> イオンスピナー>
14. イオンスピナー アイコン="行" クラス="スピナーカーム"> イオンスピナー>
15. イオンスピナー アイコン="リップル" クラス="スピナー・アサーティブ"> イオンスピナー>
16. イオンスピナー アイコン="スパイラル">イオンスピナー>
17. p>
20. イオンコンテンツ>

CSS 代コード

CSS コード剪定板への复制コンテンツ

1. ボディ {
2. カーソル: url('http://www.runob.com/try/demo_source/finger .png')、自動;   
3. }
4. p {
5. text-align: center;   
6. マージンボトム: 40px !重要;   
7. }
8. .spinner svg {
9. 幅: 19% !重要;   
10. 高さ: 85px !重要;   
11. }

JavaScript 代码

JavaScript コード复制コンテンツ到剪贴板

1. angular.module(‘ionicApp‘, [‘ionic‘])
3. .controller(‘MyCtrl‘,function($scope) {
5. });