WeChatアプレットをカスタマイズしたアニメーションのフレーム/ヒントボックスを実現する方法の例

前言
アプレットでは、ユーザーがインタフェースと相互作用するとき、いくつかのユーザフィードバックのヒントがあります。例えば、あるボタンをトリガして、下から枠をイジェクトして、上からポップアップするなどです。
現在、いくつかの既成のUIライブラリがあります。すでに実現されましたが、下の方のポップアップボックスまたはユーザー定義のヒントボックスを実現するためだけに、第三者のUIライブラリを参照しないでください。
どうやって手动で原生方式を実现しますか？
css 3アニメーションを実現します
以下はwxmlコードです

<view>
 <view class="click-btn" catchtap="onBottomBox">       </view>
 <view class="click-btn" bindtap="onTopBox">       </view>
 <view wx:if="{{isBottom}}" class="bottom-box">
 <div class="mask" bindtap="onHideBox"></div>
 <div class="pop">      </div>
 </view>
 <div wx:if="{{isTop}}" class="top-box">    </div>
</view>

以下はwxssコードです

/* pages/customalertbox/customalertbox.wxss */
.click-btn {
 width: 120px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 margin: 20px auto;
 border: 1px solid #ccc;
 border-radius: 5px;
}

.top-box {
 width: 100%;
 height: 30px;
 background: #f56c6c;
 border-radius: 0 0 8px 8px;
 color: #fff;
 text-align: center;
 line-height: 30px;
 font-size: 28rpx;
 position: absolute;
 top: 0px;
 left: 0;
 animation-duration: 0.5s;
 animation-name: slidetop;
}

.mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.5);
}

.pop {
 position: absolute;
 width: 100%;
 height: 180px;
 background: #42b983;
 border-radius: 8px 8px 0 0;
 position: absolute;
 bottom: 0px;
 animation-duration: 0.5s;
 animation-name: slidein;
}

@keyframes slidein {
 from {
 transform: translateY(70%);
 }
 to {
 transform: translateY(0);
 }
}

@keyframes slidetop {
 from {
 transform: translateY(-30px);
 }
 to {
 transform: translateY(0px);
 }
}

以下は論理コードです。

// pages/customalertbox/customalertbox.js
Page({
 /**
 *        
 */
 data: {
 isBottom: false,
 isTop: false,
 },

 /**
 *       --      
 */
 onLoad: function(options) {},

 onBottomBox() {
 this.setData({
 isBottom: true,
 });
 },

 onHideBox() {
 this.setData({
 isBottom: false,
 });
 },

 onTopBox() {
 this.setData({
 isTop: true,
 });

 setTimeout(() => {
 this.setData({
 isTop: false,
 });
 }, 2000);
 },
});

このように小プログラムで動画が実現されるのは、cs 3の@keyframesで実現されるもので、以下のようになります。

.pop {
 /* ... */
 animation-duration: 0.5s;
 animation-name: slidein; //      
}

@keyframes slidein {
 //        
 from {
 transform: translateY(70%); //   ,     
 }
 to {
 transform: translateY(0);
 }
}

.top-box {
 /* ... */
 animation-duration: 0.5s;
 animation-name: slidetop;
}

@keyframes slidetop {
 from {
 transform: translateY(-30px);
 }
 to {
 transform: translateY(0px);
 }
}

cs 3の@keyframesとトランスフォーマーformを通じて、垂直方向に平行移動し、アニメーションを実現します。
例の効果を以下に示します。

以上はcss 3のアニメーションアニメーションアニメーションアニメーションを通じて@keyframesアニメーションのフレームと結合して実現したもので、小さいプログラムの中で、公式のアニメーションAPIを通じて実現することもできます。
アプレットアニメーションAPI-アニメーションの実現
アニメーションの例を作成します。アニメーションを記述するために、例の方法を呼び出します。最後に、アニメーションのインスタンスのexport方法を通じて、アニメーションデータをコンポーネントに渡すanimation属性を導出する。
例の効果を以下に示します。

以下はインスタンスコードです。

<view>
 <view class="click-btn" bindtap="onBottomBox">       </view>
 <view class="click-btn" bindtap="onTopBox">       </view>
 <view
 wx:if="{{isBottom}}"
 style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
 >
 <div class="mask" bindtap="onHideBox"></div>
 <div class="pop" animation="{{animationData}}">      </div>
 </view>
 <div wx:if="{{isTop}}" class="top-box">    </div>
</view>

主にアニメを追加したい要素にアニメーション属性を追加しました。今のアニメはcssではなくjsでコントロールします。
下記のコードで示します

// pages/customalertbox/customalertbox.js
Page({
 /**
 *        
 */
 data: {
 isBottom: false,
 isTop: false,
 animationData: {}, //       
 },

 /**
 *       --      
 */
 onLoad: function(options) {},

 onBottomBox() {
 //     
 var animation = wx.createAnimation({
  duration: 2000,
  timingFunction: 'ease',
 });

 this.animation = animation;
 //   y   180，   step()      
 animation.translateY(180).step();
 this.setData({
  animationData: animation.export(),
  isBottom: true,
 });

 //   setTimeout   y    ，        ,      
 setTimeout(() => {
  animation.translateY(0).step();
  this.setData({
  animationData: animation.export(),
  });
 }, 200);
 },

 //          
 onHideBox() {
 var animation = wx.createAnimation({
  duration: 2000,
  timingFunction: 'ease',
 });
 this.animation = animation;
 //   y   180，   step()      
 animation.translateY(180).step();
 this.setData({
  animationData: animation.export(),
 });
 setTimeout(() => {
  animation.translateY(0).step();
  this.setData({
  animationData: animation.export(),
  isBottom: false,
  });
 }, 200);
 },

 onTopBox() {
 this.setData({
  isTop: true,
 });

 setTimeout(() => {
  this.setData({
  isTop: false,
  });
 }, 2000);
 },
});

以上はWeChatアプレットの中のアニメーションAPIを通じて実現されたアニメーションです。コードはcss 3より多く、より複雑なアニメーション効果を実現できます。
注意
下の方が枠をイジェクトして、中をドラッグすると、カバーの底の部分がスクロールします。具体的な解決方法は外側の層にcattouchmove=「true」を追加しても解決できます。

<view>
 <view class="click-btn" bindtap="onBottomBox">       </view>
 <view
 catchtouchmove="true"
 wx:if="{{isBottom}}"
 style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
 >
 <div class="mask" bindtap="onHideBox"></div>
 <div class="pop" animation="{{animationData}}">      </div>
 </view>
 <div wx:if="{{isTop}}" class="top-box">    </div>
</view>

おわりに
小さいプログラムの中でアニメーションを実現するのはcss 3のアニメーションで@keyframesを結び付けて実現することができて、同じく小さいプログラムのアニメーションのapiを通じて(通って)実現することができます。
ここでは、WeChatアプレットについて、カスタムアニメーションのフレーム/ヒントボックスを実現するための文章を紹介します。これまでの文章を検索したり、以下の関連記事を見たりしてください。皆さん、これからもよろしくお願いします。
関連文書
アプレットアニメーションAPI