微信小程序引导用户添加小程序动画页

1、实现效果

2.实现原理

2.1 动画效果

css动画：animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

设置上面三段内容不同的动画时长，最后一段文字动画时长最长。

.show_box .show_item:nth-child(1) {
  animation: fadeIn-left 1s;
}

.show_box .show_item:nth-child(2) {
  animation: fadeIn-left 2s;
}

.show_box .show_item:nth-child(3) {
  animation: fadeIn-left 3s;
}

动画效果为，从0到100的过程，可见度由0到1（opacity），translate3d 的x方向由-100%到0（transform）。

from {
    opacity          : 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform        : translate3d(-100%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform        : translate3d(0, 0, 0);
  }

2.2 判断是否弹框

wx.getStorageSync（‘key’）
wx.setStorageSync(“key”, value);需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象

当用户首次进入该小程序页面，弹出引导添加小程序，当用户点击‘记住了，我去试试’按钮时，存入一个key值到页面缓存中，当用户下一次进入时候，先判断缓存中是否有该key，若有key值不展示该引导弹框，反之提示用户。

3.实现代码

<view hidden="{{isShow}}">
  <view class="mask"></view>
  <view class="show_box">
    <view class="flex show_item">
      <view class="box_index">1</view>
      <view class="flex-row">点击右上角
        <view class="show_jiao flex-row">
          <view></view>
        </view>
      </view>
    </view>
    <view class="flex show_item">
      <view class="box_index">2</view>
      <view>点击"添加到我的小程序"</view>
    </view>
    <view class="flex show_item">
      <view class="box_index">3</view>
      <view>回到微信首页下拉列表中，找到我的小程序，打开苏苏的demo</view>
    </view>
    <view class="show_btn" catchtap="setEnter">记住了,我去试试</view>
  </view>
</view>

.show_box {
  top       : 20%;
  position  : fixed;
  width     : 100%;
  z-index   : 1111;
  box-sizing: border-box;
  padding   : 30px;
  color     : #fff;
  font-size : 25rpx;
}

.show_box .show_item {
  margin-bottom: 50rpx;
}

.show_box .show_item:nth-child(1) {
  animation: fadeIn-left 1s;
}

.show_box .show_item:nth-child(2) {
  animation: fadeIn-left 2s;
}

.show_box .show_item:nth-child(3) {
  animation: fadeIn-left 3s;
}

.show_box .show_jiao {
  border        : 1px dashed #fff;
  width         : 95rpx;
  height        : 40rpx;
  margin-left   : 20px;
  text-align    : center;
  vertical-align: top;
  border-radius : 20rpx;
  font-size     : 30px;
}

.show_box .show_jiao view {
  width        : 13rpx;
  height       : 13rpx;
  background   : #fff;
  border-radius: 50%;
  box-shadow   : 22rpx 0rpx #fff, -22rpx 0 #fff;
  margin       : 0 auto;
}

.show_box .box_index {
  font-size    : 20rpx;
  flex-shrink  : 0;
  color        : #fff;
  line-height  : 40rpx;
  width        : 40rpx;
  height       : 40rpx;
  text-align   : center;
  border-radius: 50%;
  background   : #e4a451;
  margin-right : 20rpx;
}

.show_box .show_btn {
  border       : 1px dashed #fff;
  width        : 70%;
  animation    : fadeIn 7s;
  font-size    : 30rpx;
  line-height  : 72rpx;
  text-align   : center;
  border-radius: 44rpx;
  margin       : 12% auto 0 auto;
  color        : #fff;
}

/* 动画 */


@-webkit-keyframes fadeIn-left {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform        : translate3d(-100%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@keyframes fadeIn-left {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform        : translate3d(-100%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform        : translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 遮罩 */
.mask {
  position                   : fixed;
  z-index                    : 1000;
  top                        : 0;
  right                      : 0;
  left                       : 0;
  bottom                     : 0;
  background                 : rgba(0, 0, 0, .6);
  -webkit-transition-duration: .3s;
  transition-duration        : .3s;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let flag = wx.getStorageSync("hasEnter");
    if (flag) {
      this.setData({
        isShow: true
      })
    }
  },
  setEnter() {
    this.setData({
      isShow: true
    })
    wx.setStorageSync("hasEnter", true);
  },
})

4.更多小程序相关，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！