longtake
v0.5.6
Published
Very simple canvas library.
Downloads
14
Readme
LongTake 是個輕巧、快速的繪製 Web Canvas 動畫庫。
輕便、簡單建立、快速擴展
當你想為你的網站添加一些動態渲染、過場特效,但需求又不到檯面上那些功能過於強大的繪圖庫,本庫將是你的好選擇。
<script src="./dist/index.js"></script>
<canvas id="app" width="800" height="600"></canvas>
<script>
//建立一個實際大小為 1920 * 1080 的畫布
const app = new LongTake(document.getElementById('app'), 1920, 1080)
</script>
webpack
npm install longtake
import LongTake from 'longtake'
const app = new LongTake(document.getElementById('app'), 1920, 1080)
精靈與精靈樹
Sprite 為該系統的基本單位,每個 Sprite 都封裝了位元圖
與變形
等模式,基本上就是...不要管這麼多了,建立 Sprite 就對了!
const app = new LongTake(document.getElementById('app'), 800, 600)
class Rect extends LongTake.Sprite {
create() {
this.resize(50,50)
this.setAnchor(0.5)
this.x = app.width / 2
this.y = app.height / 2
}
update() {
this.rotation += 1
}
render() {
this.fillRect(0, 0, this.width, this.height)
this.cache()
}
}
app.addChildren(new Rect())
預載入機制
Loader 將協助您在呈現動畫之前先將圖片載入完成,讓主題圖片不破碎呈現。
let loader = new LongTake.Loader()
loader.add('bear', './img/HighBear.png')
// start為執行載入,你可以在這建立讀取畫面的呈現
loader.start()
// onload為載入完畢執行,你可以隨意使用onload,如果圖片已經載入完成即執行
loader.onload(() => {
const app = new LongTake(document.getElementById('app'), 800, 600)
// do something...
})
動畫與緩動函數
Animate 是決定畫面活潑與否的關鍵,本庫內建了30種 緩動函數 為你的動畫添加生命。
class Sprite extends LongTake.Sprite {
create() {
this.animate = new LongTake.Animate({
duration : 1000,
easing : "easeInQuad",
action : (t, d)=>{
// t 為 0 ~ 1
// d 為 1 ~ 0
}
})
}
update() {
this.animate.move()
}
render() {
this.fillRect(0, 0, this.width, this.height)
this.cache()
}
}
事件監聽
LongTake 提供了基礎的事件監聽,可以建立簡單的互動模型,但始終是簡易的互動,要複雜的話請慎重考慮。
let sprite = new LongTake.Sprite()
sprite.on('click', () => {
// do something...
})
Close
如果你要捨棄頁面時,記得關閉正在運行的 LongTake 。
const app = new LongTake(document.getElementById('app'), 800, 600)
// 當你要捨棄頁面...
app.close()