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

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

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

問題の解決方法:

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の実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

推薦する

MySQL はパスワード強度の検証をオフにします

パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...

JS における for、for...in、for...of、forEach の違いと使用例

forループ基本的な構文形式: for(変数の初期化; 条件式; 演算式){ループ本体ステートメント...

HTMLファイルとは何ですか?HTMLファイルを開く方法

HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...

Linuxの基本コマンドmktempの詳しい説明

mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...

ログインフォームを実装するためのReactサンプルコード

Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...

MySQL sql_modeの適切な設定に関する詳細な説明

MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

生年月日を年齢に変換し、グループ化して人数を数えるMySQLの例

データベースのクエリ `学生`から*を選択 クエリ結果id名前誕生日1張三1970-10-01 2李...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

JavaScript ベースのパスワード ボックス検証情報の実装

この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...

よくある CSS エラーと解決策

コードをコピーコードは次のとおりです。 IE6 と FF の違い: background:orang...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

vue3ソースコード解析の簡単な実装方法

目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...