前書き

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

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

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

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)

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

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. 当初はアバターにハンギングバスケットを追加してブランコのように揺れるようにしようとしましたが、うまくいかず、ただ浮遊するアニメーションを作成しました。

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

コードは次のとおりです

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

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