検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >SVG を使用して読み込みアニメーション HTML5 チュートリアル スキルを作成する方法を説明する例

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 15:45:223311ブラウズ

今日は 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>

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

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

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

    XML/HTML コード复制コンテンツ到剪贴板
    1. <スタイル>
    2. svg path,svg rect{fill: #FF6700;}
    3. スタイル>

    完了!最終デモ:
    201645112526157.gif (500×250)

    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

    201645112554683.jpg (642×270) 読み込み関連の 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. });  
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 Canvas_html5 チュートリアル スキルでグラフィックス マトリックス変換を制御する方法の詳細な分析次の記事：HTML5 Canvas_html5 チュートリアル スキルでグラフィックス マトリックス変換を制御する方法の詳細な分析

関連記事

続きを見る