テキストの円形スクロールアニメーションを実装するミニプログラム

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹介します。具体的な内容は次のとおりです。

問題の解決方法:

1. テキストループ再生効果

2. アプレットを終了し、隠れた背景アニメーションを停止します(解決済み)

効果:

コード:

wxml

<view animation="{{animation}}" class="animation">
  919 テスト使用 - 小さなプログラムのループ再生~~~
</ビュー>

wxss

。アニメーション{
  幅: 100%;
  変換: translateX(100%);
  位置: 固定;
  上位: 45%
  フォントサイズ: 16px;
  フォントの太さ: 太字;
}

最終js

/**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {
    this.bindAnimation();
  },
 
  バインドアニメーション(){
    var this_ = これ;
      var アニメーション = wx.createAnimation({
        期間: 5000、
        タイミング関数: 'linear'、
        変換元:"100% 0 0"
      })
      アニメーション.translateX('-100%').step();
      this.setData({
        アニメーション:アニメーション.エクスポート(),
      })
      //ループアニメーションを設定します this.animation = animation;
      setInterval(関数(){
        // 2 番目のアニメーション テキスト位置の初期化 this.Animation2();
 
        // スクロールアニメーションを遅らせる(効果はより良くなります)
        setTimeout(関数(){
          this.animation.translateX('-100%').step();
          this.setData({
            アニメーション: animation.export(),
          })
        }.bind(これ),200);
 
        
      }.bind(これ),5000);
 
  },
 
  /**
   * 2番目のアニメーションテキストの位置を初期化します*/
  アニメーション2(){
    var this_ = これ;
    var animation2 = wx.createAnimation({
      期間: 0,
      タイミング関数: 'linear'、
      変換元:"100% 0 0"
    })
    アニメーション2.translateX('100%').step();
    this_.setData({
      アニメーション:animation2.export(),
    })
  },
 
  /**
   * ミニプログラムの終了とバックグラウンドアニメーションの停止の問題を解決します */
  onHide: 関数 () {
    // ミニプログラムの終了とバックグラウンド アニメーションの停止の問題を解決します // アニメーション メソッドを再度トリガーします this.bindAnimation();
},

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • mpvue アプレットのループアニメーションを開始および一時停止する方法
  • WeChatアプレットがループアニメーション効果を実現
  • WeChatアプレット開発アニメーションループアニメーションで浮かぶ雲の効果を実現

<<:  CentOS 7.6 Telnetサービス構築プロセス(Opensshアップグレードバトル第一弾のバックアップトランスポートライン構築)

>>:  MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

ブログ    

推薦する

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...

Dockerでリモートアクセスを有効にする方法

DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

Reactでのこのリファレンスの詳細な説明

目次原因:以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...

VMware での Ubuntu 16.04 イメージの完全インストール チュートリアル

この記事では、VMware 12でのUbuntu 16.04イメージのインストールチュートリアルを参...

虫眼鏡ケースのJavaScriptオブジェクト指向実装

この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

Dockerのネットワークモードと設定方法

1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

vue+echarts で中国地図のフロー効果を実現する (詳細な手順)

@vue+echarts は中国地図のフロー効果を実現します#レンダリングを見てみましょう手順:コ...

MySQL インデックス プッシュダウンの詳細

目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...

Dockerコンテナのエクスポートとインポートの例

目次DockerコンテナのエクスポートDockerコンテナのインポ​​ートこの記事では主に、コンテナ...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

ノードを使用して静的ファイルキャッシュを実装する方法

目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...

Zabbix Agent2を使用してOracleデータベースを監視する方法

概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...