mini_read_space_front/happyphoto/qingrenjie2020/qingrenjie2020.js

// temp1/qingrenjie2020/qingrenjie2020.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 背景音乐
    bgmusic: {
      music: null,
      playing: false
    },
    ads: null,
    hasLoadAdConfig: false,
    photoIndex: 0,
    templateName: 'qingrenjie2020',
    examplePhotos: [
      'ac_1025868734706.jpeg',
      'ac_1025868889836.jpeg',
      'ac_1025869003213.jpeg',
      'ac_1025869293008.jpeg',
      'ac_1025869619587.jpeg',
      'ac_1025871041645.jpeg',
      'ac_1025870641427.jpeg',
      'ac_1025870863984.jpeg',
      'ac_1025871122158.jpeg',
      'ac_1025871242452.jpeg'
    ],
    imageWidths: [],
    imageHeights: [],
    imageStyles: [],
    page1BlockStyle: '',
    page1WordStyle: '',
    page1ImageStyle: ``,
    page2BlockStyle: '',
    page2WordStyle: '',
    page2ImageStyle: ``,
    page3BlockStyle: '',
    page3WordStyle: '',
    page3ImageStyle: ``,

    top_block: "",
    top1_block: "",
    top2_block: "",
    top3_block: "",
    top4_block: "",
    top5_block: "",
    bottom_block: "",
    bottom2_block: "",
    bottom3_block: "",
    bottom4_block: "",
    love1: "",
    love2: "",
    love3: "",
    love4: "",
    qiubite_block: "",
    arrow: "",
    qiubitexin: "",
    qbt_block: "",
    love_block: "",
    pagetitle: "",

    timeouts: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initAnimation()
  },

  initAnimation() {
    const _this = this
    this.setData({
      photoIndex: 0
    })
    _this.setData({
      top_block: "animation: topmove 1s linear both",
      top1_block: "animation: topmove 1s linear both",
      top2_block: "animation: topmove 1s linear both",
      top3_block: "animation: topmove 1s linear both",
      top4_block: "animation: topmove 1s linear both",
      top5_block: "animation: topmove 1s linear both",
      bottom_block: "animation: bottomshow 1s linear both",
      bottom2_block: "animation: bottomshow 1s linear both",
      bottom3_block: "animation: bottomshow 1s linear both",
      bottom4_block: "animation: bottomshow 1s linear both",
      love1: "animation: lovemove 3s 1.8s linear both",
      love2: "animation: lovemove 3s 2.5s linear both",
      love3: "animation: lovemove 3s linear both",
      love4: "animation: lovemove 3s 1s linear both",
      qiubite_block: "animation: qiubite_blockshow 1s 3s linear both",
      arrow: "animation: arrowshow 0.9s 4.1s linear both",
      qiubitexin: "animation: qiubitexinshow 2s 3s linear both",
      qbt_block: "animation: qbt_blockshow 1.8s 5s linear both",
      love_block: "animation: love_blockmove 6.7s 1s linear both",
      pagetitle: "animation: pagetitleshow 1s 3s linear both"
    })
    _this.data.timeouts.push(setTimeout(function () {
      _this.showPage()
    }, 7000))
  },

  showPage() {
    const _this = this
    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
      // 图片轮询完重新开始
      this.setData({
        'photoIndex': 0
      })
    }
    const pageIndex = this.data.photoIndex % 3 + 1
    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
    console.log(imageURL)
    wx.getImageInfo({
      src: imageURL,
      success(res) {
        const imageWidth = res.width
        const imageHeight = res.height
        let blockStyle = ''
        if (imageWidth > imageHeight) {
          //  横版图片
          blockStyle = 'top:30%;'
        } else {
          // 竖版图片
          blockStyle = 'top:10%;'
        }
        _this.setData({
          [`page${pageIndex}BlockStyle`]: `${blockStyle}animation: pageshow 7.5s linear both;`,
          [`page${pageIndex}WordStyle`]: `animation: wordshow 4.5s 1.5s linear both;`,
          [`page${pageIndex}ImageStyle`]: imageURL,
        })

        _this.data.timeouts.push(setTimeout(() => {
          _this.setData({
            [`page${pageIndex + 1}BlockStyle`]: ``,
            [`page${pageIndex + 1}WordStyle`]: ``,
          })
        }, 4800));
        _this.data.timeouts.push(setTimeout(() => {
          _this.setData({
            'photoIndex': _this.data.photoIndex + 1
          })
          _this.showPage();
        }, 6000));
      },
      fail(err) {
        console.error(err);
      }
    })
  },

  /**
 * 播放音乐
 */
  initBgMusic() {
    let _this = this
    if (!app.globalData.audioContext) {
      app.globalData.audioContext = wx.createInnerAudioContext()
    }
    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
    wx.setInnerAudioOption({
      obeyMuteSwitch: false
    })
    // 设置音乐循环
    app.globalData.audioContext.loop = true
    // 监听音乐播放
    app.globalData.audioContext.onPlay(() => {
      _this.setData({
        'bgmusic.playing': true
      })
      console.log('music play', _this.data.bgmusic.playing)
    })
    // 监听音乐暂停
    app.globalData.audioContext.onPause(() => {
      console.log('music pause')
      _this.setData({
        'bgmusic.playing': false
      })
    })
    app.globalData.audioContext.src = this.data.bgmusic.music.url
    app.globalData.audioContext.play()
  },

  /**
   * 音乐播放按钮
   */
  musicPlayTap() {
    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    this.clearTimeoutTask()
  },

  // 清除定时任务
  clearTimeoutTask() {
    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
  },

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

  }
})