/*
 * Tween.js
 * t: current time（當(dāng)前時間）；
 * b: beginning value（初始值）；
 * c: change in value（變化量）；
 * d: duration（持續(xù)時間）。
 */
// Quart 四次方的緩動
const easeInOutQuart = function (t, b, c, d) {
 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
 return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

// 0-6 第一行所有格子全部有效 
// 21-27 最后一行所有格子全部有效 
// 中間部分 i%7===0 和 i%7 === (7-1) 有效
// 算法源碼有點無聊，依據(jù)上述思路，即可遍歷28個格子并標(biāo)識獎品格子valide=true
// 可以擴(kuò)展想一想 6x6 5x5，思路是一樣的

<view class="fruits-container" >
  <view class="fruits-table" >
    <block wx:for="{{ary}}" wx:key="index" >
      <view wx:if="{{item.valide}}" class="valide">{{item.title}}</view>
      <view wx:else class="in-valide"></view>
    </block>
  </view>
  <canvas type="2d" .... />
</view>

.fruits-container {
  position: relative;
  width: 400px;
  height: 400px;
  ...
}

.fruits-table {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  ...
}

let query = wx.createSelectorQuery().in(this)
query.selectAll(`.fruits-table .valide`).boundingClientRect(ret => {
  ....
  console.log(ret[0]) // top, left, right, bottom, width, height
  console.log(ret[1]) // top, left, right, bottom, width, height
  ...
  ...
  console.log(ret[23]) // top, left, right, bottom, width, height
})

let query = wx.createSelectorQuery().in(this)
query.selectAll(`.fruits-table .valide`).boundingClientRect(ret => {
  ....
  let {top, left, right, bottom, width, height} = ret[0]
  const canvasQuery = wx.createSelectorQuery()
  canvasQuery.select('#fruit-canvas')
  .fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d') 
    let x = top
    let y = left
    let dx = width
    let dy = height
    ctx.shadowOffsetX = 2
    ctx.shadowOffsetY = -2
    ctx.shadowColor = 'red'
    ctx.shadowBlur = 50
    ctx.lineWidth = 5
    ctx.strokeStyle = 'red'
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.strokeRect(x, y, dx, dy)
  })
})

// 抽象激活方法 
functon rect(point, canvas){
  let {x, y, dx, dy} = getPosition(point)
  ctx.shadowOffsetX = 2
  ctx.shadowOffsetY = -2
  ...
  ...
  ctx.clearRect(0, 0, canvas.width, canvas.height) // 擦除整個水果盤
  ctx.strokeRect(x, y, dx, dy) // 繪制激活區(qū)域
}

function run(){
  setTimeout(()=>{
    if (ret.length) {
      let point = ret.shift()
      rect(point, canvas)
      run()
    }
  }, 100)
}

// Quart 四次方的緩動
const easeInOutQuart = function (t, b, c, d) {
 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
 return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

let start = 0 // 開始時間
let begin = 0 // 開始獎品位置
let end = 23 // 終點位置，這里跑一圈
let during = 5000 // 運(yùn)動總時間

// 1000/60 ≈ 17，
// 17毫秒即表示屏幕60幀刷新率每秒 ≈ requestAnimationFrame計數(shù)頻率(一般情況) 
const steper = () => {
 // left為位移距離
 // 老虎機(jī)的運(yùn)動位移是節(jié)點位移，不是精確位移
 // 所以這里用parseInt處理，只取整數(shù)部分
 // 數(shù)據(jù)變化為 0,1,2,3,4,5...23
 // 間隔時間/距離由easeInOutQuart算法計算
 var left = easeInOutQuart(start, begin, end, during);
 let idx = parseInt(left)
 start = start + 17; 
 if (idx <= end) {
  let point = this.ret[idx] // 取節(jié)點位置信息
  this.rect(point) // 繪制
 }
 // 時間遞增
 if (start <= during) {
  this.ctx.requestAnimationFrame(steper); // 計時器
 } else {
  // 動畫結(jié)束，這里可以插入回調(diào)...
  // callback()...
 }
};
steper(); // 啟動