WeChat アプレットのログインページに雲が浮かぶダイナミックな効果を持たせる

巴扎黑

リリース： 2017-05-14 14:06:49

オリジナル

6604 人が閲覧しました

要約: 言うまでもなく、WeChat ミニプログラムは現在非常に人気があり、特に WeChat チームは、あいまい検索、近くのミニプログラムなど、以前は批判されていた多くのミニプログラムを最近開発したためです。最近、一部のネチズンが空き時間を利用して小さなプログラムを使用して動的なログインページ効果を実現しました。そこで、51 個の小さなプログラムについてこの記事を書きましょう...

WeChat の小さなプログラムが特に最近、WeChat チームは、あいまい検索、近くのミニプログラムなど、以前は批判されていた多くのミニプログラムを開発しました。最近、一部のネチズンは自由時間を利用してミニプログラムを使用して動的なログインページ効果を実現しました。この記事では主に WeChat ミニプログラムを使用してクラウドフローティングアニメーションを実現する方法を紹介します。ログインページで関連情報が共有されますので、以下を見てみましょう。

はじめに

2017年、フロントエンドが流行し、WeChatのミニプログラム、weex、reactnative、さらにはAlipayもミニプログラムを立ち上げたのが、このリズムだと常々感じています。ネイティブの破壊、そして私もそうです波があった場合は、暑さを利用してバスに乗りましょう。

上記のレンダリング（GIFアニメーション）

WeChat アプレットのログインページに雲が浮かぶダイナミックな効果を持たせる

この背景画像を見たとき、私の強迫性障害がすぐにやって来て、なぜ雲は動かないのか、それで私は苦しみ始めました。

知識ポイント

アニメーションを理解する

アニメーション属性は、6 つのアニメーション属性を設定するために使用される省略された属性です:

値説明 anime-name はセレクター名にバインドする必要があるキーフレームを指定します anime-duration はアニメーションの完了にかかる時間を秒またはミリ秒で指定します anime-timing-function はアニメーションの速度曲線を指定します anime-lay は指定しますアニメーションが開始されるまでの時間遅延 anime-iteration-count は、アニメーションを再生する回数を指定します。 anime-direction は、アニメーションを順番に再生するかどうかを指定します。主に2を使います。

+ translation3d(x,y,z) は 3D スケーリング変換を定義します。

+rotate3d(x,y,z,angle) は 3D 回転を定義します。

translate3d(1,1,0)
(左右、上下、大きさ)が変化するのが分かります。

rotate3d(1,1,0,45deg)

実装 WeChat アプレットのログインページに雲が浮かぶダイナミックな効果を持たせる

1. 2 つの雲は、サイズと初期位置を除いて同じです。

.cloud {

位置:絶対;

幅:99px;高さ:64px;

右:0;

下: 0;

アニメーション:クラウド 5s リニア無限;

}

@keyframes クラウド {

from {

変換:translate3d(- 125rpx, 0, 0);

}

to {

変換:translate3d(180rpx, 0, 0);

}

ここで、rpx は WeChat 固有の属性であり、Android の dp 単位と同様に、画面サイズの影響を受けません。 CSSを見ると、キーフレームが一定の速度で移動していることがわかりますが、左右の方向のみが変化しています。
2. 当初はアバターにハンギングバスケットを追加してブランコのように揺れるようにしようとしましたが、ただ浮遊するアニメーションを作成するだけでは成功しませんでした。

WeChat アプレットのログインページに雲が浮かぶダイナミックな効果を持たせる

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

@keyframes写真{ 0% { transform: translate3d(0, 20rpx, 0) rotate(-15deg); } 15% { transform: translate3d(0, 0rpx, 0) rotate(25deg); } 36% { transform: translate3d(0, -20rpx, 0) rotate(-20deg); } 50% { transform: translate3d(0, -10rpx, 0) rotate(15deg); } 68% { transform: translate3d(0, 10rpx, 0) rotate(-25deg); } 85% { transform: translate3d(0, 15rpx, 0) rotate(15度)} 100% { transform: translate3d(0, 20rpx, 0) rotate(-15deg); }}キーフレームが to だけでなくパーセンテージもサポートしているとは予想していませんでした。これは良いことです。ここでは、階層関係、アニメーションの長さ、透明度を制御する限り、雲の浮遊を実現できます。