5

Motion Canvas - Visualize complex ideas programmatically

 1 year ago
source link: https://motioncanvas.io/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Visualize Complex
Ideas Programmatically

sceneevent3030100405080701006090110-1035

Best of Both Worlds

Some things are easier with a mouse. Write animations in TypeScript with your favorite IDE; Use a web-based editor to sync them with audio.

Powered by Vite, a real-time preview of your animation automatically updates upon any changes.

Try the Editor

export makeScene(function* (view) {
  const circle = createRef<Circle>();
  view.add(
    <Circle 
      ref={circle} 
      width={320} 
      height={320} 
      fill={'blue'} 
    />
  );

yield* circle().scale(2, 0.3);
  yield* waitUntil('event');
  yield* all(
    circle().scale(1, 0.3),
    circle().position.y(200, 0.3),
  );
  yield* circle().fill('green', 0.3);
});

Procedural for a Change

Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step.

Focus on duration, speed and acceleration instead of hardcoded key frames.

Learn More

Tested in Combat

The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.

Video Source Code


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK