成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序制作大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能，巨簡(jiǎn)約的代碼?。?

TesterHome / 3360人閱讀

摘要：公司說(shuō)要做個(gè)活動(dòng)，迎接雙十一。。大概的思路就是頁(yè)面有個(gè)轉(zhuǎn)盤(pán)，然后轉(zhuǎn)盤(pán)是一個(gè)背景。轉(zhuǎn)盤(pán)的指針也是用圖片。如下圖然后第二步，翻查小程序文檔。最后根據(jù)小程序文檔說(shuō)，這個(gè)參數(shù)需要輸出。為真的時(shí)候運(yùn)行正常旋轉(zhuǎn)的方法，為假的時(shí)候。

公司說(shuō)要做個(gè)活動(dòng)，迎接雙十一。。然后最怕的事情出現(xiàn)了，就是做轉(zhuǎn)盤(pán)。以前沒(méi)怎么寫(xiě)過(guò)動(dòng)畫(huà)，特別怕這些東西。。。好了，廢話不說(shuō)。直入正題。

首先，先構(gòu)圖。大概的思路就是頁(yè)面有個(gè)轉(zhuǎn)盤(pán)，然后轉(zhuǎn)盤(pán)是一個(gè)背景。轉(zhuǎn)盤(pán)的指針也是用圖片。如下圖：

然后第二步，翻查小程序文檔。發(fā)現(xiàn)有個(gè)wx.createAnimation（創(chuàng)建動(dòng)畫(huà)的參數(shù)），參數(shù)如下。

好了，開(kāi)始js和界面結(jié)合一起用了。


記住，animation這個(gè)屬性放在你想添加動(dòng)畫(huà)的view。至于animationData等下解釋.

let that
const app = getApp()
Page({
  data: {
    animationData:{},//初始動(dòng)畫(huà)數(shù)據(jù)
    Prize:[45,90,135]//45度安慰獎(jiǎng)，90度二等獎(jiǎng)，135度一等獎(jiǎng)
  },
  start() {
    let animation = wx.createAnimation({    //創(chuàng)建動(dòng)畫(huà)實(shí)例
      duration: 3000,
      timingFunction:"ease"
    })
      animation.rotate(360*3+Prize[i]).step()  //因?yàn)楣卷?xiàng)目轉(zhuǎn)盤(pán)分為8個(gè)區(qū)域，所以每個(gè)區(qū)域就是45°了.先設(shè)置必定轉(zhuǎn)3圈，然后加上后臺(tái)返回來(lái)的標(biāo)識(shí)，假設(shè)這個(gè)是安慰獎(jiǎng)，隨意，這個(gè)旋轉(zhuǎn)最后就是到45度這個(gè)位置。
      that.setData({
        animationData: animation.export()//最后根據(jù)小程序文檔說(shuō)，這個(gè)參數(shù)需要export輸出。
      })

  },
  onLoad() {
    that = this
  },
  onShow() {
  }
})

好了，大功告成，試一試吧。。。
特別說(shuō)明一些坑位，動(dòng)畫(huà)只運(yùn)行一次。怎么點(diǎn)擊start方法動(dòng)畫(huà)都不會(huì)再重運(yùn)行。。解決方法，在data里面定義個(gè)isTrue布爾值，判斷該值。為真的時(shí)候運(yùn)行正常旋轉(zhuǎn)的方法，為假的時(shí)候。需要將旋轉(zhuǎn)的度數(shù)變?yōu)?.再去旋轉(zhuǎn)新的度數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99152.html

相關(guān)文章

  • 一起抽圣誕的驚喜盒子吧?。?em>小程序起手式）

    摘要：平安夜圣誕節(jié)總是讓人聯(lián)想到平安果圣誕襪圣誕樹(shù)圣誕老人圣誕櫥窗等等讓人歡喜滿滿期望滿滿的詞語(yǔ)。禮物祝福笑臉驚喜溫暖都伴隨而來(lái)，最近課程輕松，便想著做一個(gè)有關(guān)圣誕的小程序，來(lái)當(dāng)作對(duì)小程序的初步學(xué)習(xí)。 Christmas is coming! 平安夜/圣誕節(jié)總是讓人聯(lián)想到平安果、圣誕襪、圣誕樹(shù)、圣誕老人、圣誕櫥窗等等讓人歡喜滿滿、期望滿滿的詞語(yǔ)。禮物、祝福、笑臉、驚喜、溫暖都伴隨而來(lái)，最...

    codecook 評(píng)論0 收藏0

  • 轉(zhuǎn)盤(pán)抽獎(jiǎng)腳本自己擼

    摘要：效果需求很多場(chǎng)景都需要做各種活動(dòng)，抽獎(jiǎng)最是司空見(jiàn)慣了，跑馬燈的，轉(zhuǎn)盤(pán)的，下面先花幾分鐘擼出一個(gè)轉(zhuǎn)盤(pán)的吧，當(dāng)然網(wǎng)上至少有一打的可供參考。但是我們只差一個(gè)定時(shí)器循環(huán)了接下里實(shí)現(xiàn)這個(gè)主循環(huán)，不斷更新值就可以了。 demo 效果 需求 很多場(chǎng)景都需要做各種活動(dòng)，抽獎(jiǎng)最是司空見(jiàn)慣了，跑馬燈的，轉(zhuǎn)盤(pán)的，下面先花幾分鐘擼出一個(gè)轉(zhuǎn)盤(pán)的吧，當(dāng)然網(wǎng)上至少有一打的 demo 可供參考。真的只需要一點(diǎn)點(diǎn)時(shí)間而...

    趙春朋 評(píng)論0 收藏0

  • 微信小程序營(yíng)銷組件wxapp-market

    摘要：是基于微信小程序的營(yíng)銷組件，用于快速開(kāi)發(fā)營(yíng)銷玩法類小程序項(xiàng)目頁(yè)面，包含大轉(zhuǎn)盤(pán)刮刮樂(lè)老虎機(jī)水果機(jī)九宮格翻紙牌搖一搖手勢(shì)解鎖等多種營(yíng)銷組件。 wxapp-market 是基于微信小程序的營(yíng)銷組件，用于快速開(kāi)發(fā)營(yíng)銷玩法類小程序項(xiàng)目頁(yè)面，包含大轉(zhuǎn)盤(pán)、刮刮樂(lè)、老虎機(jī)、水果機(jī)、九宮格翻紙牌、搖一搖、手勢(shì)解鎖等多種營(yíng)銷組件。 使用 1.拉取倉(cāng)庫(kù) git clone [email protected]:o2...

    william 評(píng)論0 收藏0

  • jQuery帶次數(shù)帶彈窗的大轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼（支持h5）

    摘要：您已擁有次抽獎(jiǎng)機(jī)會(huì)，點(diǎn)擊立刻抽獎(jiǎng)開(kāi)始抽獎(jiǎng)初始次數(shù)，由后臺(tái)傳入為隨機(jī)出來(lái)的結(jié)果，根據(jù)概率后的結(jié)果如果在執(zhí)行就退出標(biāo)志為在執(zhí)行先判斷是否登錄未登錄則執(zhí)行下面的函數(shù)請(qǐng)先登錄登錄了就執(zhí)行下面當(dāng)抽獎(jiǎng)次數(shù)為的時(shí)候執(zhí)行沒(méi)有次數(shù)了還有次 showImg(https://segmentfault.com/img/bVbqAdu); showImg(https://segmentfault.com/img...

    lemon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<