微信小程序口红项目新手练习Day3

跳转页面的动画实现

1.小白云设置了时间显示和隐藏效果，当动画进行了2周完毕进入到分析页面。

pages外再新建一个文件夹
index1为跳转时等待页面（今天要实现的页面（等待动画…））
index2 为等待之后跳转到的页面（带文本分析）
功能简单直接贴代码：

1.index1.wxml
img1到img6分别为等待要显示和隐藏的图片

<!--packageB/index1/index1.wxml-->
<image src="../img/03_base.png"></image>
<view class="box">
  <view class="box2">
    <view class="box1">
    <image class="img1" mode="aspectFit" src="{{img1}}"></image>
    <image class="img2" mode="aspectFit" src="{{img2}}"></image>
    <image class="img3" mode="aspectFit" src="{{img3}}"></image>
    <image class="img4" mode="aspectFit" src="{{img4}}"></image>
    <image class="img5" mode="aspectFit" src="{{img5}}"></image>
    <image class="img6" mode="aspectFit" src="{{img6}}"></image>
  </view>
  <view class="box3">秘密分析中.....</view>
  </view>
</view>

2.index1.js

// packageB/index1/index1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    img1: '',
    img2: '',
    img3: '',
    img4: '',
    img5: '',
    img6: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    setTimeout(function () {
      that.setData({
        img1 : '../img/03_m01.png'
      })
    },1000)
    setTimeout(function () {
      that.setData({
        img2 : '../img/03_m02.png'
      })
    },2000)
    setTimeout(function () {
      that.setData({
        img3 : '../img/03_m03.png'
      })
    },3000)
    setTimeout(function () {
      that.setData({
        img4 : '../img/03_m04.png'
      })
    },4000)
    setTimeout(function () {
      that.setData({
        img5 : '../img/03_m05.png'
      })
    },5000)
    setTimeout(function () {
      that.setData({
        img6 : '../img/03_m06.png'
      })
    },6000)
    setTimeout(function () {
      that.setData({
        img6 : ''
      })
    },7000)
    setTimeout(function () {
      that.setData({
        img5 : ''
      })
    },8000)
    setTimeout(function () {
      that.setData({
        img4 : ''
      })
    },9000)
    setTimeout(function () {
      that.setData({
        img3 : ''
      })
    },10000)
    setTimeout(function () {
      that.setData({
        img2 : ''
      })
    },11000)
    setTimeout(function () {
      that.setData({
        img1 : ''
      })
    },12000)

    setTimeout(function () {
      wx.redirectTo({
        url: '../../packageB/index2/index2'
      })
    },13000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

3.index1.wxss

/* packageB/index1/index1.wxss */
.box {
  width: 100vw;
  height: 300rpx;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
}
.box1{
  width: 60vw;
  display: flex;
  justify-content: space-between;
}
.box2{}
.box3{
  display: flex;
  justify-content: flex-end;
  color: #fff;
  font-size: 30rpx;
}
.img1{
  width: 83rpx;
  height: 34rpx;
}
.img2{
  width: 58rpx;
  height: 34rpx;
}
.img3{
  width: 52rpx;
  height: 34rpx;
}
.img4{
  width: 42rpx;
  height: 34rpx;
}
.img5{
  width: 33rpx;
  height: 34rpx;
}
.img6{
  width: 26rpx;
  height: 34rpx;
}