canvas-animation-step-by-step

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #rust #docker #nodejs #java #windows #vue #awesome-list #pytorch #openai #open-source

canvas-animation-step-by-step

(★ 26)

Canvas animation with flowers step by step using TypeScript.

canvas-animation-step-by-step Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Canvas Animation in TypeScript

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I3I63W4OK)

Canvas Animation written in TypeScript. No jQuery and no other 3rd party dependencies. You may also interested in [my another repo about canvas animation](https://github.com/changhuixu/canvas-animation-demos).

![Interactive Canvas with Flowers](https://raw.githubusercontent.com/changhuixu/canvas-animation-step-by-step/master/images/flowers-on-canvas.gif)

## Step-by-step guide can be found in [this Medium Post](https://medium.com/@changhuixu/how-to-compose-canvas-animations-in-typescript-9368dfa29028)

This repo includes blooming flowers animation examples. The flower drawing was inspired and optimized from [this tutorial](https://www.html5canvastutorials.com/advanced/html5-canvas-blooming-flowers-effect/).

## Project Structure

1. **models**

flower.ts

flower-center.ts

petal.ts

point.ts

1. **services**

flower-randomization.service.ts

1. **animations**

blooming-flowers.ts

interactive-flowers.ts

## Supplementary

In order to show the steps of drawing flower, I also kept the "sandbox" that I played with in `supplementary` folder. The code in `supplementary` folder generates an illustration below.

![how to draw flower on canvas](https://raw.githubusercontent.com/changhuixu/canvas-animation-step-by-step/master/images/canvas-animation-1.png)

## How to build locally

```sh
// run the animation app
npm start

// build the app
npm run build
```

Then visit [http://localhost:8080/](http://localhost:8080/)

## License

Feel free to use the code in this repository as it is under MIT license.

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I3I63W4OK)

canvas-animation-step-by-step

canvas-animation-step-by-step Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

canvas-animation-step-by-step

canvas-animation-step-by-step Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README