https://github.com/khc-zhihao/longtake

Very simple canvas library.
https://github.com/khc-zhihao/longtake

canvas javascript

Last synced: about 2 months ago
JSON representation

Very simple canvas library.

• Host: GitHub
• URL: https://github.com/khc-zhihao/longtake
• Owner: KHC-ZhiHao
• License: mit
• Created: 2018-09-20T08:44:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-03T09:49:46.000Z (2 months ago)
• Last Synced: 2024-11-13T17:49:55.578Z (about 2 months ago)
• Topics: canvas, javascript
• Language: TypeScript
• Homepage:
• Size: 19.3 MB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        





LongTake

Web Canvas Animate Library




    

        

    

    

        

    

    

        

    

    




LongTake 是個輕巧、快速的繪製 Web Canvas 動畫庫。

[Demos](https://khc-zhihao.github.io/LongTake)

[APIs](https://github.com/KHC-ZhiHao/LongTake/blob/master/apis/summary.md)

[v0.4 以下版本文件請看](https://khc-zhihao.github.io/LongTake/old)

### 輕便、簡單建立、快速擴展

當你想為你的網站添加一些動態渲染、過場特效，但需求又不到檯面上那些功能過於強大的繪圖庫，本庫將是你的好選擇。

```html

    //建立一個實際大小為 1920 * 1080 的畫布

    const app = new LongTake(document.getElementById('app'), 1920, 1080)

```

webpack

```bash

npm install longtake

```

```js

import LongTake from 'longtake'

const app = new LongTake(document.getElementById('app'), 1920, 1080)

```

### 精靈與精靈樹

Sprite 為該系統的基本單位，每個 Sprite 都封裝了`位元圖`與`變形`等模式，基本上就是...不要管這麼多了，建立 Sprite 就對了!

```js

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 將協助您在呈現動畫之前先將圖片載入完成，讓主題圖片不破碎呈現。

```ts

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種 [緩動函數](https://easings.net/zh-tw) 為你的動畫添加生命。

```js

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 提供了基礎的事件監聽，可以建立簡單的互動模型，但始終是簡易的互動，要複雜的話請慎重考慮。

```js

let sprite = new LongTake.Sprite()

sprite.on('click', () => {

    // do something...

})

```

### Close

如果你要捨棄頁面時，記得關閉正在運行的 LongTake 。

```js

const app = new LongTake(document.getElementById('app'), 800, 600)

// 當你要捨棄頁面...

app.close()

```