Commit 378ae27

committed

add animation to shapes demo

1 parent af646d4 commit 378ae27Copy full SHA for 378ae27

File tree

2 files changed

+21

-3

lines changed

demo
- content.ts
public
- animate.ts

2 files changed

+21

-3

lines changed

`‎demo/content.ts`

Lines changed: 19 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ import {BlobOptions} from "../public/blobs";`
`30`	`30`	`import {interpolateBetween, interpolateBetweenSmooth} from "../internal/animate/interpolate";`
`31`	`31`	`import {divide} from "../internal/animate/prepare";`
`32`	`32`	`import {statefulAnimationGenerator} from "../internal/animate/state";`
`33`		`-import {CanvasCustomKeyframe, CanvasKeyframe, wigglePreset} from "../public/animate";`
	`33`	`+import {CanvasCustomKeyframe, CanvasKeyframe, canvasPath,wigglePreset} from "../public/animate";`
`34`	`34`
`35`	`35`	`const makePoly = (pointCount: number, radius: number, center: Coord): Point[] => {`
`36`	`36`	`const angle = (2 * Math.PI) / pointCount;`
`@@ -848,7 +848,7 @@ addCanvas(`
`848`	`848`	`been reached. However if the animation is interrupted during interpolation there is no`
`849`	`849`	opportunity to clean up the extra points.`;
`850`	`850`	`},`
`851`		`- (ctx, width, height) => {`
	`851`	`+ (ctx, width, height,animate) => {`
`852`	`852`	`const center: Coord = {x: width * 0.5, y: height * 0.5};`
`853`	`853`	`const size = Math.min(width, height) * 0.8;`
`854`	`854`
`@@ -870,7 +870,23 @@ addCanvas(`
`870`	`870`	`return points;`
`871`	`871`	`};`
`872`	`872`
`873`		`- drawClosed(ctx, smoothBlob(drawStar(12, size, size * 0.9)), true);`
	`873`	`+ const pointy = drawStar(8, size, size * 0.4);`
	`874`	`+ const wobblyGerm = smoothBlob(drawStar(12, size, size * 0.9));`
	`875`	`+ const shapes = [pointy, wobblyGerm];`
	`876`	`+`
	`877`	`+ const animation = canvasPath();`
	`878`	`+ animation.transition({`
	`879`	`+ points: pointy,`
	`880`	`+ duration: 1000,`
	`881`	`+ callback: () => animation.transition({`
	`882`	`+ points: wobblyGerm,`
	`883`	`+ duration: 4000,`
	`884`	`+ }),`
	`885`	`+ });`
	`886`	`+`
	`887`	`+ animate(() => drawClosed(ctx, animation.renderPoints(), true));`
	`888`	`+`
	`889`	`+ drawClosed(ctx, pointy, true);`
`874`	`890`
`875`	`891`	return `Putting all these pieces together, the blob transition library can also be used to
`876`	`892`	`tween between non-blob shapes. The more detail a shape has, the more unconvincing the`

`‎public/animate.ts`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,8 @@ export interface CanvasCustomKeyframe extends Keyframe {`
`58`	`58`	`export interface Animation {`
`59`	`59`	`// Renders the current state of the animation.`
`60`	`60`	`renderFrame: () => Path2D;`
	`61`	`+ // Renders the current state of the animation as points.`
	`62`	`+ renderPoints: () => Point[];`
`61`	`63`	`// Immediately begin animating through the given keyframes.`
`62`	`64`	`// Non-rendered keyframes from previous transitions are cancelled.`
`63`	`65`	`transition: (...keyframes: (CanvasKeyframe \| CanvasCustomKeyframe)[]) => void;`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 378ae27

File tree

2 files changed

2 files changed

`‎demo/content.ts`

`‎public/animate.ts`

0 commit comments