WeChatアニメーションを実装するにはどうすればよいですか? WeChatアニメーションの実行手順の概要

青灯夜游

リリース： 2018-10-27 15:35:57

転載

3646 人が閲覧しました

この記事では、WeChat アニメーションを実装する方法について説明します。 WeChat アニメーションの実行手順の概要 WeChat アニメーションの実装と実行手順を簡単にまとめます。。困っている友人は参考にしていただければ幸いです。

1.実装方法

公式ドキュメントにはこう書いてあります:

①アニメーションインスタンスアニメーションを作成します。

②インスタンスメソッドを呼び出してアニメーションを記述します。

③最後に、アニメーションインスタンスのエクスポートメソッドを通じてアニメーションデータをエクスポートし、コンポーネントのアニメーションプロパティに渡します。

アプレットはデータ駆動型であるため、この文への数値注釈の追加は 3 つのステップに分かれています。

最初の 2 つのステップは、アニメーションとやりたいことを設定し、設定した「ルール」をインターフェース上の要素にスローして、ルールに従って実行させます。

もちろん、animation="{{ani}}" を持つ要素が複数ある場合には、このアニメーションルールも実行されます。

2. 例を使って話します

新しい小さなプログラムを作成し、不要なプログラムを削除して、上に示したように簡単な例を作成します

コードは次のとおりです:

index.wxml、helloworld、ボタン

<view class="container">
  <view class="usermotto" animation="{{ani}}">
    <text class="user-motto">{{motto}}</text>
  </view>
  <button bindtap=&#39;start&#39;>动画</button></view>

ログイン後にコピー

index.wxss、便宜上境界線が追加されています

.usermotto {
  margin-top: 100px;
  border: solid;
}

ログイン後にコピー

Index.js

Page({
  data: {
    motto: 'Hello World',
  },
  start:function(){
    var animation = wx.createAnimation({
      duration: 4000,
      timingFunction: 'ease',
      delay: 1000
    });
    animation.opacity(0.2).translate(100, -100).step()
    this.setData({
      ani:  animation.export()
    })
  }
})

ログイン後にコピー