WeChat アプレットのログイン ページ: CSS で雲の浮遊アニメーションを実現

前書き

2017 年、WeChat ミニプログラム、weex、reactnative、さらには Alipay もミニプログラムを立ち上げ、これがネイティブ破壊のリズムだと常々感じていたので、私もその流れに乗りました。何かが起こった場合に備えて。

上記のレンダリング (GI アニメーション)

WeChat アプレット アニメーション

この背景画像を見たとき、私の強迫性障害がすぐに襲いかかり、なぜ雲が動かないのか、それで波投げを始めました。

知識ポイント

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

animation 属性は、6 つのアニメーション属性を設定するために使用される短縮属性です。
value 説明
animation-name セレクターにバインドする必要があるキーフレーム名を指定します。 。
animation-duration は、アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。
animation-timing-function はアニメーションの速度曲線を指定します。
animation-delay は、アニメーションが開始されるまでの遅延を指定します。
animation-iteration-count は、アニメーションを再生する回数を指定します。
animation-direction は、アニメーションを順番に逆方向に再生するかどうかを指定します。

translate

を理解する方法はたくさんありますが、この記事では主に2つの方法を使用します。

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

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

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

rotate3d

実装

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

.cloud {
  position: absolute;
  z-index: 3;
  width:99px;height:64px; top: 0; 
  right: 0;
  bottom: 0;
  animation: cloud 5s linear infinite;
}

@keyframes cloud {
  from {
    transform: translate3d(-125rpx, 0, 0);
  }

  to {
    transform: translate3d(180rpx, 0, 0);
  }
}

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

コードは次のとおりです

@keyframes pic {
  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(15deg);
  }
  100% {
    transform: translate3d(0, 20rpx, 0) rotate(-15deg);
  }
}

キーフレームがからだけでなくパーセンテージもサポートしているとは予想していませんでした。これは良いことです。ここでは、階層関係、アニメーションの長さ、透明度を制御する限り、雲の浮遊を実現できます。

まとめ

CSS にはまだ多くのアニメーションや特殊効果があると言わざるを得ません。WeChat アプレットに少しアニメーションを追加すると、ページがより美しくなります。もちろん、より複雑なアニメーションは、機会が与えられた場合にのみ更新できます。

以上がWeChat アプレットのログイン ページ: CSS で雲の浮遊アニメーションを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。