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

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

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

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

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

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

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

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

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

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

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

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)
}

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