React完美實現可配置轉盤

isaced 發布于2019-05-22 15:17 / 2965人閱讀

摘要：最近在做一些活動的需求，發現用到轉盤的機會很大。轉盤的旋轉控制首先，能夠在點擊轉的按鈕時候做一些判斷是否可以開轉，使用變量來控制。

最近在做一些h5活動的需求，發現用到轉盤的機會很大。

代碼已經開源，感興趣的同學可查看react-turnplate

先上效果

額，因為gif壓縮了，所以畫質有點。。。呵呵，沒關系的

需求

于是將轉盤組件化，具體的需求是：

傳入一個獎品數組.

能夠在點擊轉的按鈕時候做一些判斷是否可以開轉.

開轉后有一個回調，用于請求獎品返回.

轉動結束/中獎回調.

轉動按鈕，背景圖可配置. 具體props為

params	type	desc
image_spin	string	spin button
background_1	string	background_1
background_2	string	background_2
prizeList	array	[{icon:"imageurl",name:"prize1",id:1},{icon:"imageurl",name:"prize1",id:2}]
award	object	award should be null first,after request back return an object like prizelist[0]
canStartRotate	bool	control the turnplate should startRotate
onTryRotate	func	trigger after click the rotate button,should do some check stuff and if it"s ok,set canStartRotate to be true then the turnplate start rotating,meanwhile request for the award and after the request finish,set the award
rotateFinish	func

實現思路

轉盤外圈的閃爍

這里主要是兩張背景圖不斷替換,通過定時器，不斷替換background形成閃爍的效果.

//外面閃閃發光的東東 _outDiscFlash() { const { background_1, background_2 } = this.props; this.outShowImg1 = !this.outShowImg1; if (this.outShowImg1) { this.refs.turnplateBorder.style.backgroundImage = `url(${background_1})`; } else { this.refs.turnplateBorder.style.backgroundImage = `url(${background_2})`; } this._flashTimer = setTimeout(this._outDiscFlash, this.outDiskDiffTimer); } _initFlash() { const { background_1 } = this.props; this.outDiskDiffTimer = 100; this.outShowImg1 = true; this._flashTimer = null; this.refs.turnplateBorder.style.backgroundImage = `url(${background_1})`; }

轉盤的獎品繪制

1.首先是根據傳進來的獎品數組個數，用canvas來畫扇形填充。用devicePixelRatio是為了適配手機。

draw() { const { prizeList } = this.props; let rotateDeg = 360 / prizeList.length / 2 + 90, // 扇形回轉角度 ctx; const canvas = document.getElementById("canvas"); if (!canvas.getContext) { return; } // 獲取繪圖上下文 ctx = canvas.getContext("2d"); for (let i = 0; i < prizeList.length; i++) { // 保存當前狀態 ctx.save(); // 開始一條新路徑 ctx.beginPath(); // 位移到圓心，下面需要圍繞圓心旋轉 ctx.translate(105 * this.devicePixelRatio, 105 * this.devicePixelRatio); // 從(0, 0)坐標開始定義一條新的子路徑 ctx.moveTo(0, 0); // 旋轉弧度,需將角度轉換為弧度,使用 degrees * Math.PI/180 公式進行計算。 ctx.rotate((((360 / prizeList.length) * i - rotateDeg) * Math.PI) / 180); // 繪制圓弧 ctx.arc( 0, 0, 105 * this.devicePixelRatio, 0, (2 * Math.PI) / prizeList.length, false ); // 顏色間隔 if (i % 2 == 0) { ctx.fillStyle = "#FFEAB0"; } else { ctx.fillStyle = "#ffffff"; } // 填充扇形 ctx.fill(); // 繪制邊框 ctx.lineWidth = 0.5; ctx.strokeStyle = "#e4370e"; ctx.stroke(); // 恢復前一個狀態 ctx.restore(); } }

2.其次是將產品填充，做一個rotate。

_getTurnPrizeList() { const { prizeList } = this.props; const turnplateList = []; for (let i = 0; i < prizeList.length; i++) { const turnplateItem = (

"turnplate-item" key={i}>
          ${i / prizeList.length}turn)` }}>
            {prizeList[i].name}

); turnplateList.push(turnplateItem); } return

"turnplate-list">{turnplateList}; }

轉盤的旋轉控制

首先，能夠在點擊轉的按鈕時候做一些判斷是否可以開轉，使用變量canStartRotate來控制。當canStartRotate為true后，一直旋轉，直到傳進來的award不為空，每次transitionEnd判斷award的狀態，不為空就結束旋轉，回調rotateFinish。

UNSAFE_componentWillReceiveProps(nextProps, nextState) { if (this.props.prizeList.length != nextProps.prizeList.length) { this.draw(); } //如果在請求，還沒返回結果，就先轉著 if ( !this.props.canStartRotate && nextProps.canStartRotate && !nextProps.award ) { this._initFlash(); this._outDiscFlash(); this._justRotate(); } if (!this.props.award && nextProps.award) { this.setState({ award: nextProps.award }); } } _justRotate() { const container = document.getElementById("turnplate"); const rotateDeg = 360 * 3; this.setState({ lastRotateDeg: rotateDeg + this.state.lastRotateDeg, rotating: true, justRotate: true }); container.style.transform = "rotate(" + (rotateDeg + this.state.lastRotateDeg) + "deg)"; } finishRotate() { const { rotateFinish } = this.props; const { award, justRotate } = this.state; //如果獎品來了，并且不是justRotate if (award && !justRotate) { clearTimeout(this._flashTimer); this.setState({ rotating: false }); rotateFinish(award); } //如果獎品來了，是justRotate,就開始抽 else if (award && justRotate) { this._lottery(); } else { //否則就繼續等吧兄弟 this._justRotate(); } }

"turnplate-wrapper" id="turnplate" onTransitionEnd={this.finishRotate.bind(this)} >

每次transition結束的時候都查看award是否已經傳入,可看到finishRotate有3種情況的判斷

待實現的功能

轉盤大小可配置

轉盤每個扇形顏色可配置 ....

這些之后都會在react-turnplate完善。

此處只是提供了一種思路，拋磚引玉。

云服務器 GPU云服務器可配置轉盤 react實現輪播圖 php實現表格可編輯私有云系統可實現功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6744.html

轉盤抽獎腳本自己擼

摘要：效果需求很多場景都需要做各種活動，抽獎最是司空見慣了，跑馬燈的，轉盤的，下面先花幾分鐘擼出一個轉盤的吧，當然網上至少有一打的可供參考。但是我們只差一個定時器循環了接下里實現這個主循環，不斷更新值就可以了。 demo 效果需求很多場景都需要做各種活動，抽獎最是司空見慣了，跑馬燈的，轉盤的，下面先花幾分鐘擼出一個轉盤的吧，當然網上至少有一打的 demo 可供參考。真的只需要一點點時間而...

趙春朋 2019-08-23 11:01 評論0 收藏0
基于 Nest.js(Node.js) 的模塊化敏捷開發系統架構 Notadd 2.0 Beta2

摘要：快速開始下載碼云高速下載安裝執行包安裝，如無，請先執行自動創建數據庫配置必須使用必須使用必須使用運行更新月報年月年月年月年月年月年月年月年月年月下載地址碼云一點說明月將發布用戶中心模塊和模塊，月月后續還會有商城模塊微信模塊前言大多數 node.js 框架都沒解決架構問題，使得 node.js 沒能像 spring 一樣的適合大型項目開發和維護的框架。 nest.js 出現改變了這種...

gaosboy 2019-08-22 15:58 評論0 收藏0
canvas之轉盤抽獎

摘要：最近工作中重構了抽獎轉盤，給大家提供一個開發轉盤抽獎的思路需求轉盤根據獎品數量不同而有變化目錄結構由于業務需要所以開發了兩個版本抽獎，和，不過部分只能替換圖片，沒有功能邏輯。最近工作中重構了抽獎轉盤，給大家提供一個開發轉盤抽獎的思路需求 1、轉盤根據獎品數量不同而有變化 2、canvas 目錄結構 showImg(https://segmentfault.com/img/bVbwL...

_ang 2019-08-26 10:58 評論0 收藏0
300行代碼寫一個音樂播放器小程序

摘要：項目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼，更多關于小程序的內容可見微信小程序開發文檔小程序框架結構微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。剛進公司不久，因為公司部門年后業務拓展的關系，可能在年后會被分配到公司的微信公眾號組做小程序相關的開發工作，因此寫了個微信小程序wx-audio踩坑。目前還有一些功能沒有寫完：如返...

chenatu 2019-08-20 13:56 評論0 收藏0