https://github.com/michitaro/easing

easing functions for Typescript
https://github.com/michitaro/easing

easing typescript

Last synced: 6 months ago
JSON representation

easing functions for Typescript

• Host: GitHub
• URL: https://github.com/michitaro/easing
• Owner: michitaro
• License: mit
• Created: 2017-08-19T12:26:56.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-19T12:46:00.000Z (over 8 years ago)
• Last Synced: 2025-02-03T10:47:50.978Z (about 1 year ago)
• Topics: easing, typescript
• Language: TypeScript
• Homepage:
• Size: 37.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# easing

Simple easing functions for TypeScript

* [Working Demo](https://michitaro.github.io/easing/)

## Install

```sh

npm instasll --save @hscmap/easing

```

## Example

```typescript

import * as easing from "@hscmap/easing"

window.addEventListener('load', e => {

    const fs = [

        easing.linear,

        easing.fastStart2, easing.fastStart4,

        easing.slowStart2, easing.slowStart4,

        easing.slowStartStop2,

        easing.slowStartStop4,

    ]

    for (const f of fs) {

        const box = document.createElement('div')

        box.className = 'box'

        const title = document.createElement('h2')

        title.innerHTML = f.name

        const canvas = document.createElement('canvas')

        drawFunction(canvas, f)

        box.appendChild(title)

        box.appendChild(canvas)

        document.body.appendChild(box)

    }

})

function drawFunction(canvas: HTMLCanvasElement, f: (x: number) => number) {

    function canvasCoord(x: number, y: number) {

        return [canvas.width * x, canvas.height * (1 - y)]

    }

    const ctx = canvas.getContext('2d')!

    ctx.beginPath()

    for (let x = 0; x <= 1; x += 0.01) {

        const y = f(x)

        const [X, Y] = canvasCoord(x, y)

        ctx.lineTo(X, Y)

    }

    ctx.stroke()

}

```