极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

小程序canvas動畫解決方案,繪制一個塔羅牌動畫

Rolan 2019-4-17 00:41

目前還有個問題:android上面無卡頓,但是ios直接把微信卡掉!wxmlcanvas style='width:{{windowWidth}}px;height:{{height}}px; position: fixed;' canvas-id="secondCanvas0"/canvascanvas style='width:{{windowW ...

目前還有個問題:android上面無卡頓,但是ios直接把微信卡掉!

wxml

  1. <canvas style='width:{{windowWidth}}px;height:{{height}}px; position: fixed;' canvas-id="secondCanvas0">
  2. </canvas>
  3. <canvas style='width:{{windowWidth}}px;height:{{height}}px; position: fixed;' canvas-id="secondCanvas1"></canvas>
  4. <view class='receivenow_view'>
  5. <view class="receivenow_button_view" bindtap='{{!start_state?"shuffle_func":"card_selection_func"}}' style='margin-top:{{height+10}}px' animation="{{animation3}}">
  6. <text>{{!start_state?"開始洗牌":"開始選牌"}}</text>
  7. </view>
  8. </view>

wxss

  1. .receivenow_view {
  2. display: flex;
  3. flex-direction: column;
  4. justify-content: center;
  5. align-items: center;
  6. padding-bottom: 80rpx;
  7. }
  8. .receivenow_button_view {
  9. font-size: 30rpx;
  10. color: #fff;
  11. padding: 35rpx 190rpx;
  12. border-radius: 60rpx;
  13. background: linear-gradient(to right, #ff5846, #ff067a);
  14. line-height: normal;
  15. }

js

  1. const animationFrame = require('../../utils/requestAnimationFrame.js')
  2. const ctx0 = wx.createCanvasContext('secondCanvas0')
  3. const ctx = wx.createCanvasContext('secondCanvas1')
  4. Page({
  5. /**
  6. *
  7. */
  8. data: {
  9. //默認canvas高度
  10. height: 375,
  11. //默認canvas寬度
  12. windowWidth: 375,
  13. //背景資源
  14. bg: "",
  15. //卡片資源
  16. card: "",
  17. //是否開始洗牌
  18. start_state: false,
  19. //開場動畫是否結束
  20. kaichang: false,
  21. // 是否開始選牌
  22. card_selection: false,
  23. //20張卡開場動畫過后的所在位置x坐標
  24. xarrs: [],
  25. //20張卡開場動畫過后的所在位置y坐標
  26. yarrs: [],
  27. //開場動畫執行時間
  28. start_time: 1500,
  29. card_width: 46,
  30. card_height: 76.3
  31. },
  32. onLoad: function(options) {
  33. var that = this
  34. //獲取手機屏幕寬度
  35. wx.getSystemInfo({
  36. success(res) {
  37. let windowWidth = res.windowWidth
  38. let height = windowWidth
  39. that.setData({
  40. height: height,
  41. windowWidth: windowWidth
  42. })
  43. }
  44. })
  45. // const ctx = wx.createCanvasContext('secondCanvas')
  46. // ctx.clearRect(0, 0, that.data.windowWidth, that.data.height)
  47. // ctx.draw()
  48. this.init();
  49. },
  50. //初始化數據,獲取繪圖所需圖片
  51. init() {
  52. var doAnimationFrame = animationFrame.doAnimationFrame
  53. this.setData({
  54. bg: "/img/bg.jpg",
  55. card: "/img/card.png"
  56. })
  57. this.draw();
  58. },
  59. //開始畫圖
  60. draw() {
  61. var that = this
  62. let width = that.data.windowWidth
  63. let height = that.data.height
  64. let nowtime = new Date().getTime()
  65. let time = that.data.start_time
  66. let card_width = that.data.card_width
  67. let card_height = that.data.card_height
  68. //用來存儲所有卡片的x坐標和移動距離
  69. let xarrs = []
  70. //設置所有卡片的x坐標和移動距離
  71. for (let i = 0; i < 20; i++) {
  72. xarrs.push([width / 18, card_width * (i * 0.5)])
  73. }
  74. console.log(xarrs)
  75. //用來存儲所有卡片的y坐標和移動距離
  76. let yarrs = [
  77. [height / 2 - card_height / 2, 0]
  78. ]
  79. //畫一個背景
  80. ctx0.drawImage(that.data.bg, 0, 0, width, height);
  81. ctx0.draw()
  82. // animationFrame.doAnimationFrame,e為回調執行時間
  83. var rander = function(e) {
  84. e = e ? e : nowtime
  85. ctx.clearRect(0, 0, width, height) //清空所有的內容
  86. //繪制卡片
  87. for (let i = 0; i < xarrs.length; i++) {
  88. ctx.drawImage(that.data.card, xarrs[i][0], yarrs[0][0], card_width, card_height);
  89. //從新設置卡片的x坐標和剩余移動距離
  90. xarrs[i] = that.move_x_func(xarrs[i][0], xarrs[i][1], time)
  91. }
  92. // console.log(arrs[0])
  93. ctx.draw()
  94. //如果開始執行動畫時間到最后一次的時間大于動畫執行時間則停止動畫
  95. if (e - nowtime < time) {
  96. var id = animationFrame.doAnimationFrame(rander);
  97. } else {
  98. //開場動畫結束保存其位置
  99. that.setData({
  100. xarrs: xarrs,
  101. yarrs: yarrs,
  102. kaichang: true
  103. })
  104. }
  105. }
  106. rander()
  107. },
  108. //x坐標位置,以及移動距離(px),兩秒移動s,16ms移動多少;time動畫持續時間返回一個arr
  109. move_x_func(position, s, time) {
  110. // console.log(position)
  111. //動畫持續時長兩秒
  112. position = parseFloat(position.toFixed(2))
  113. //16ms移動的距離
  114. let time_distance = parseFloat((s * 16 / time).toFixed(2))
  115. s = parseFloat(s.toFixed(2))
  116. if (s === 0) {
  117. return [position, s];
  118. } else {
  119. return [position + time_distance, s - time_distance]
  120. }
  121. },
  122. //y坐標位置,以及移動距離
  123. move_y_func(position, s) {
  124. },
  125. //洗牌開始
  126. shuffle_func() {
  127. let that = this
  128. let width = that.data.windowWidth
  129. let height = that.data.height
  130. let nowtime = new Date().getTime()
  131. let time = that.data.start_time
  132. let card_width = that.data.card_width
  133. let card_height = that.data.card_height
  134. let xarrs = that.data.xarrs
  135. let yarrs = that.data.yarrs
  136. let time1 = 0
  137. //如果還未開場,不進行洗牌
  138. if (!that.data.kaichang | that.data.start_state) {
  139. return false;
  140. }
  141. var animation3 = wx.createAnimation({
  142. duration: 300,
  143. timingFunction: 'ease',
  144. })
  145. animation3.scale3d(0.1, 0.1, 0.1).step().scale3d(1, 1, 1).step();
  146. that.setData({
  147. animation3: animation3,
  148. //洗牌開始了,改變是否洗牌的狀態
  149. start_state: true
  150. })
  151. let x = that.rnd(1, height / 2)
  152. let ys = []
  153. let xs = []
  154. let centers = []
  155. for (let i = 0; i < xarrs.length; i++) {
  156. ys.push(that.rnd(height / 10, height / 8))
  157. // xs.push(that.rnd(width / 8, width / 4))
  158. xs.push(width / 10)
  159. centers.push([that.rnd(width / 4, width / 2), that.rnd(height / 4, height / 2)])
  160. }
  161. //用戶點擊洗牌,執行另一個動畫
  162. var rander = function(e) {
  163. ctx.clearRect(0, 0, width, height) //清空所有的內容
  164. //設置中心點
  165. ctx.translate(width / 2, height / 2);
  166. for (let i = 0; i < xarrs.length; i++) {
  167. //設定每次旋轉的度數
  168. // ctx.save()
  169. ctx.rotate(time1 * Math.PI / 540);
  170. ctx.drawImage(that.data.card, xs[i], ys[i], card_width, card_height);
  171. // ctx.restore()
  172. }
  173. ctx.draw()
  174. time1++
  175. if (!that.data.card_selection) {
  176. var id = animationFrame.doAnimationFrame(rander);
  177. }
  178. }
  179. rander()
  180. },
  181. /**
  182. * 選牌開始
  183. * 所有當前卡牌歸位
  184. */
  185. card_selection_func() {
  186. let that = this
  187. //設置開始選牌為true
  188. that.setData({
  189. card_selection: true
  190. })
  191. },
  192. //在min和max之間取隨機
  193. rnd(min, max) {
  194. return min + Math.floor(Math.random() * (max - min + 1));
  195. },
  196. /**
  197. * 用戶點擊右上角分享
  198. */
  199. onShareAppMessage: function(options) {
  200. var that = this;
  201. return {
  202. title: "塔羅牌測試",
  203. path: '/pages/start/start',
  204. imageUrl: "/img/share.png",
  205. success: function(res) {
  206. var shareTickets = res.shareTickets;
  207. //如果分享不成功,或者不是到群
  208. if (shareTickets.length == 0) {
  209. return false;
  210. }
  211. }
  212. }
  213. },
  214. })

requestAnimationFrame.js

  1. // 模擬 web端的requestAnimationFrame
  2. // lastFrameTime為上次更新時間
  3. var lastFrameTime = 0;
  4. var doAnimationFrame = function(callback) {
  5. //當前毫秒數
  6. var currTime = new Date().getTime();
  7. //設置執行該函數的等待時間,如果上次執行時間和當前時間間隔大于16ms,則設置timeToCall=0立即執行,否則則取16-(currTime - lastFrameTime),確保16ms后執行動畫更新的函數
  8. var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));
  9. // console.log(timeToCall)
  10. var id = setTimeout(function() {
  11. callback(currTime + timeToCall);
  12. //確保每次動畫執行時間間隔為16ms
  13. }, timeToCall);
  14. //timeToCall小于等于16ms,lastFrameTime為上次更新時間
  15. lastFrameTime = currTime + timeToCall;
  16. return id;
  17. };
  18. // 模擬 cancelAnimationFrame
  19. var abortAnimationFrame = function(id) {
  20. clearTimeout(id)
  21. }
  22. module.exports = {
  23. doAnimationFrame: doAnimationFrame,
  24. abortAnimationFrame: abortAnimationFrame
  25. }

作者:hoarcat 
原文:https://blog.csdn.net/qq_31604363/article/details/88788496

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: hoarcat 來自: csdn
极速快3精准计划 20选五走势图带连线 导师带你买彩票骗局 七乐彩福彩30选七 快乐十分前3组选绝招 就发一个独胆 多乐彩历史开奖江西 山西11选五最大遗漏 吉林市时时彩开奖 澳洲幸运8开奖数结果 11选5出前三组万能