原標(biāo)題：開發(fā) | 小程序做動(dòng)畫效果難？送你一個(gè)框架，10 分鐘就能搞定

在小程序中使用 canvas 繪制圖案、動(dòng)畫的難度有目共睹。 除了本身寫法繁瑣，小程序的技術(shù)特性，也使得小程序無(wú)法使用普通 HTML 5 的 canvas 框架 ，進(jìn)行圖案、動(dòng)畫繪制。

而今天，知曉程序就來(lái)為你推薦一款框架。這款框架專為小程序設(shè)計(jì)， 它可以讓你在小程序里，更輕松地完成圖案繪制，還能使用事件響應(yīng)。

想知道用它在小程序創(chuàng)建動(dòng)畫有多炫酷嗎？往下看就知道了。

關(guān)注「知曉程序」公眾號(hào)，在微信后臺(tái)回復(fù)「 開發(fā) 」，讓你的小程序性能再上一層樓。

文 | bobiscool

它是什么？

Canvas（畫板）是 HTML 5 的一個(gè)重要元素，它能夠高效的繪制圖形。

但是它過(guò)于底層，且 API 粗糙，導(dǎo)致開發(fā)者很難使用它來(lái)做較為復(fù)雜的圖形。而且它的即時(shí)繪制無(wú)記憶特性，使得它內(nèi)部的圖形并不支持動(dòng)畫更不支持一切交互事件。

這樣的問(wèn)題出現(xiàn)在所有支持 canvas 的客戶端上，微信小程序也不例外。

而且，由于小程序由 JS core 支持，并沒(méi)有 window 對(duì)象，并且 canvas 的 API 與標(biāo)準(zhǔn)的 canvas 的 API 有所出入， 所以市面上絕大部分 canvas 庫(kù)，都與小程序無(wú)緣。

而 wxDraw 也就應(yīng)運(yùn)而生，專門用于處理小程序上 canvas 圖形創(chuàng)建、圖形動(dòng)畫，以及相關(guān)交互問(wèn)題。

關(guān)注「知曉程序」微信公眾號(hào)，回復(fù)「 源碼 」，獲取 wxDraw 框架項(xiàng)目源碼地址。

特性

  • 簡(jiǎn)單：不需要你會(huì) canvas，會(huì)用 jQuery 就會(huì)使用 wxDraw。
  • 靈活：所有圖形、隨時(shí)隨地都可以進(jìn)行屬性修改、圖形添加以及圖形銷毀。
  • 事件支持：只要是合理的小程序事件，它都支持。
    緩動(dòng)動(dòng)畫支持 wxDraw 支持鏈?zhǔn)秸{(diào)用動(dòng)畫（就像 jQuery 的 animate 一樣），并且支持幾乎所有的緩動(dòng)函數(shù)。

繪制圖形

目前， wxDraw 框架支持 rect 、 circle 、 polygon 、 ellipse 、 line 等圖形 ，如果想要自己創(chuàng)建自定義圖形，還可以使用 cshape 圖形，或是使用 text 做出文字形狀的圖形。

下面，以 circle 為例，展示 wxDraw 的代碼編寫過(guò)程。

let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, 
                       fillStyle: "#C0D860",
                       strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', 
                       gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 
                       'fill', true)

繪制動(dòng)畫

利用 wxDraw，你可以輕松在小程序中，做出好看的動(dòng)畫。

事件處理

wxDraw 也支持處理事件。具體支持的事件如下：

  • tap
  • touchStart
  • touchEnd
  • touchMove
  • longPress
  • drag （自定義的事件）

具體運(yùn)行效果如何呢？看看旁邊 UI 小妹妹親自示范就知道了。 :stuck_out_tongue_winking_eye:

是不是特別簡(jiǎn)單、特別方便呢？來(lái)，老鐵們，star 走一波！