canvas animation demos

Canvas Animations in Typescript

changhuixu
50
7
TypeScript

Canvas Animation in TypeScript

ko-fi

Canvas Animation written in TypeScript. No jQuery and no other 3rd party dependencies. You might also interest in my another repo about canvas animation.

Demo

Medium Post

This repo includes the following animation examples:

  1. Solar System

    The Sun is in the center; the Earth is rotating around the Sun; the Moon is rotating around the Earth. When the moon is dimmed in the shadow area formed by the Earth blocking Sun light. This animation is based on the example in MDN Basic Animation and this CodePen.

    Note: The composition order of canvas layers is important.

  2. Clock

    A clock with second hand, minute hand and hour hand rotating and pointing to current time. This animation is based on the example in MDN Basic Animation and this CodePen

  3. Bouncing Ball

    A ball bouncing inside of canvas box with some simple Physics. This animation is based on the example in MDN Advanced animations

  4. Constellation

    A number (default 100) stars/particles drifting in the universe (a gradient color background), with some simple Physics. The Constellation model class can take configurations for stars/particles. This animation is based on this CodePen.

  5. Candy Text

    A parameterized text string is created by colorful particles. When mouse over (or touch) particles, they explode and fly away, eventually out of the canvas. When mouse cursor is out of canvas, the animation will pause. When mouse cursor enters canvas, the animation resumes.

    This animation is based on HTML5 Canvas Tutorials: Interacive Text Particles and this CodePen.

    Candy Text

How to build locally

// run the animation app
npm start

// build the app
npm run build

License

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

ko-fi