回転灯効果を実現するWeChatアプレットの例

序文

日常の開発では、テキストの水平スクロール効果（一般にカルーセルと呼ばれる）によく遭遇します。これはプロジェクトでもよく使用される機能でもあります。ウェブフロントエンドでは非常に一般的です。今日はミニプログラムの実装方法を紹介します。1つはCSSスタイルを使用する方法、もう1つはミニプログラムのアニメーション機能を使用する方法です。

@keyframes 実装

@keyframes ルールを使用すると非常に便利です。必要なのは CSS スタイルだけで、使い方は Web と同じです。

<view class="marquee">
 <text>これはスクロールテキストです</text>
</ビュー>

スタイルクラス from to は、アニメーションの開始と終了を定義するために使用されます。ここでは、画面の右端から左にスライドし、左端に触れると新しいアニメーションラウンドが再び開始されます。

@keyframes 翻訳 {
 から {
 margin-left: 750rpx; //画面の右端から開始}

 に {
 左マージン: 0px;
 }
}

.マーキー{
 空白: ラップなし;
 animation-name: translation; //アニメーションの名前を定義します animation-duration: 3s;
 アニメーションの反復回数: 無限;
 アニメーションタイミング関数: linear;
}

テキストが左にスライドした後、完全に消えるまで左にスライドし続け、その後アニメーションが右端から開始されるという効果を望む場合は、テキストの長さを追加する必要があります。ここでは、テキストの長さを計算し、SelectorQuery オブジェクトインスタンスを使用してテキストノードの幅を取得する必要があります。これはページが初めてレンダリングされる onReady 時に実行され、テキストノード情報に対応するオブジェクトが照会され、テキストの長さが取得されます。上記のマーキークラス名はここで定義されます。

onReady: 関数 () {
 クエリを wx.createSelectorQuery() に設定します。
 クエリを選択します('.marquee').boundingClientRect();
 クエリ.exec((res) => {
  （res[0]）の場合{
  this.setData({
   マーキー幅: res[0].width
  })
  }
 })
}

次に、CSS var() 関数を使用して、定義されたプロパティ値を終了位置に挿入し、画面全体とそのテキストの長さだけ実行されるようにします。「--marqueeWidth」というプロパティを定義し、var() 関数を使用して wxss スタイルファイル内のプロパティを呼び出します。

<view class="marquee" style="--marqueeWidth:-{{marqueeWidth}}px">
 <text>これはスクロールテキストです</text>
</ビュー>

wxss スタイル:
@keyframes 翻訳 {
 から {
 左マージン: 750rpx;
 }

 に {
 左マージン: var(--marqueeWidth);
 }
}

これは CSS を通じて実現されますが、非常に便利ですが、一部のモデルでは適応の問題が発生します。別の方法は、アニメーションを通じて実現することです。

アニメーションの実装

アニメーションはアニメーションインスタンスを通じて完了し、ビューは最初は画面の右側の画面外に配置されます。

<view class="marquee2" bindtransitionend="animationend" animation="{{animationData}}">
	<text>これはスクロールテキストです</text>
</ビュー>

.marquee2{
 表示: インラインブロック;
 空白: ラップなし;
 左マージン: 750rpx;
}

同様に、ここでテキストの長さが計算され、translation プロパティを使用して、テキストが画面全体から外れるまで移動されます。一連のアニメーションが完了したら、bindtransitionend コールバックを呼び出してアニメーションを再度実行します。

this.animation = wx.createAnimation({
 期間: 3000、
 タイミング関数: 'linear'
});
var クエリ = wx.createSelectorQuery();
クエリを選択します('.marquee2').boundingClientRect();
クエリ.exec((res) => {
 （res[0]）の場合{
 this.setData({
  marqueeWidth: res[0].width //テキストの長さ}, () => {
  this.doAnim()
 })
 }
})


doAnim: 関数() {
 // 画面の左端までスクロールします。ここでは、一時的に 375 ピクセルの画面幅がハードコードされています。
 this.animation.translate(-this.data.marqueeWidth - 375, 0).step();
 タイムアウトを設定する(() => {
  this.setData({
  アニメーションデータ: this.animation.export(),
  });
 }, 10)
}

最初のアニメーションが終了したら、最初からやり直し、animationend を通じてアニメーションの終了をリッスンしてから、再度実行します。

アニメーション終了() {
 //リセット this.animation.translate(0, 0).step({duration: 0 });
 this.setData({
  アニメーションデータ: this.animation.export()
 }, () => {
  //アニメーションを再開します this.doAnim()
 });
}

このアニメーションをミニプログラム開発ツールで実行すると、アニメーションが突然停止します。携帯電話で試すことができます。

実装も比較的簡単で、カルーセル効果は私たちのプロジェクトでもよく使用するものです。ミニプログラムのアニメーションに慣れる良い機会でもあります。

要約する

WeChatミニプログラムで走馬灯効果を実現する例についての記事はこれで終わりです。ミニプログラムで走馬灯効果に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: