WeChatミニプログラムアニメーションAPIの詳細説明とコード共有例

高洛峰
リリース: 2017-03-13 10:33:16
オリジナル
2203 人が閲覧しました

この記事では主に WeChat ミニ プログラム アニメーション API の詳細な説明とコード例を紹介します。必要な友達はそれを参照してください

アニメーション ここではアニメーションについて簡単に紹介します。ミニ プログラムでは、いくつかの 属性 と注意事項を説明します。アニメーションを作成する前に、アイデアを整理し、アニメーションを段階的に分解してから結合する必要があります。ここでは紹介のみを行います。

wx.createAnimation(object)

公式の紹介を参照

1. アニメーションインスタンスアニメーションを作成します。インスタンスのメソッドを呼び出してアニメーションを記述します。最後に、アニメーション データはアニメーション インスタンスのエクスポート メソッドを通じてエクスポートされ、コンポーネントのアニメーション プロパティに渡されます。

2. アニメーション操作メソッドを呼び出した後、アニメーションのグループの完了を示すために、アニメーションのグループ内のすべてのアニメーション メソッドを呼び出すことができます。同時に、アニメーションのグループが完了した後、初めて次のアニメーションのセットが続行されます。 step は、wx.createAnimation() と同じ構成パラメータを渡して、アニメーションの現在のグループの属性を指定できます

たとえば、最初のコードはアニメーションに対応しています: this.animation.export( )
2つ目 例えば、スケーリングアニメーション、つまりscale、scaleX、scaleY...のセットは、スケーリングアニメーショングループのアニメーションメソッドです。 スケーリングアニメーショングループと回転アニメーショングループは、step( ) と順番に実行されます。コードで試してみてください!エフェクトを逆に見ると理解しやすくなります

主な属性:

微信小程序animation API详解及实例代码分享

ここでのメインツリーは、アニメーション効果を設定するtimingFunctionとtransformOrigin

timingFunctionです

  1. linearデフォルトは線形です アニメーションは常に比較的均一です

  2. イーズ 最初は遅く、途中で加速し、最後に遅くなります

  3. イーズイン 初めはゆっくりです

  4. イーズインアウト最初と最後でゆっくりと

  5. ease-out 最後でゆっくりと

  6. step-start アニメーションは最初に 100% にジャンプし、アニメーション時間が一瞬で終了します

  7. step-endアニメーション時間が一瞬で終了するまで0%スタイルを維持します

transformOriginの設定アニメーションの基点はデフォルトで%50 %50 0

左、中央は横方向の値、対応するパーセンテージ値は left=0%; right=100% です。 100%

アニメーショングループとアニメーションメソッドスタイル:

回転:

微信小程序animation API详解及实例代码分享スケール:

微信小程序animation API详解及实例代码分享オフセット:

微信小程序animation API详解及实例代码分享傾き:

微信小程序animation API详解及实例代码分享行列変換:

微信小程序animation API详解及实例代码分享 単一アニメーションのグループ効果をデモンストレーションします

w ** * 回転 */

rotate: function() {

//2 つのアニメーション グループは step() で終わる必要があります
/**

* アニメーションシーケンス 時計回りに 150 度回転 > x、y 2 倍拡大 > x、y 10px 移動 >*/

this.animation.rotate(150)。 step().scale(2) .step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000}) this.setData({ ) // アニメーションを出力します

anime: this.animation.export()

})
}

読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのサポートに感謝します。

以上がWeChatミニプログラムアニメーションAPIの詳細説明とコード共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!