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

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

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

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

<スタイル>
svg path,svg rect{fill: #FF6700;}
スタイル>

完了!最終デモ:

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 コードコンテンツをクリップボードにコピー

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

JavaScript 代码

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

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