亚洲啪啪AV无码片,午夜理理伦a级毛片天天看,可以直接免费的av片

人妻少妇精品视频专区,怡红院成永久免费人视频,伊人久久大香线蕉午夜AV,久久精品WWW人人做人人爽

12月

開發(fā) | 小程序做動畫效果難？送你一個框架，10 分鐘就能搞定

2093

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

在小程序中使用 canvas 繪制圖案、動畫的難度有目共睹。除了本身寫法繁瑣，小程序的技術特性，也使得小程序無法使用普通 HTML 5 的 canvas 框架，進行圖案、動畫繪制。

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

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

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

文 | bobiscool

它是什么？

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

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

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

而且，由于小程序由 JS core 支持，并沒有 window 對象，并且 canvas 的 API 與標準的 canvas 的 API 有所出入，所以市面上絕大部分 canvas 庫，都與小程序無緣。

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

關注「知曉程序」微信公眾號，回復「源碼」，獲取 wxDraw 框架項目源碼地址。

特性

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

繪制圖形

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

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

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)

繪制動畫

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