@@ -98,37 +98,46 @@ ctx.stroke(path);
9898const ctx = /* ... */
9999const animation = blobs2Animate .canvasPath ();
100100
101- TODO wiggle
102- 103- // Set up "requestAnimationFrame" rendering loop.
101+ // Set up rendering loop.
104102const renderAnimation = () => {
105103 ctx .clearRect (0 , 0 , width, height);
106104 ctx .fill (animation .renderFrame ());
107105 requestAnimationFrame (renderAnimation);
108106};
109107requestAnimationFrame (renderAnimation);
110108
111- // Keyframe loop .
112- const loopAnimation = () => {
109+ // Transition to new blob on canvas click .
110+ ctx . canvas . onclick = () => {
113111 animation .transition ({
114112 duration: 4000 ,
115113 timingFunction: " ease"
116114 callback: loopAnimation,
117115 blobOptions: {... },
118116 });
119117};
118+ ```
120119
121- // Initial frame.
122- animation .transition ({
123- duration: 0 , // Render immediately.
124- callback: loopAnimation,
125- blobOptions: {... },
126- });
120+ ## Canvas Wiggle
127121
128- // Toggle play/pause animation on canvas click.
129- ctx .canvas .onclick = () => {
130- animation .playPause ();
122+ ``` js
123+ const ctx = /* ... */
124+ const animation = blobs2Animate .canvasPath ();
125+ 126+ // Set up rendering loop.
127+ const renderAnimation = () => {
128+ ctx .clearRect (0 , 0 , width, height);
129+ ctx .fill (animation .renderFrame ());
130+ requestAnimationFrame (renderAnimation);
131131};
132+ requestAnimationFrame (renderAnimation);
133+ 134+ // Begin wiggle animation.
135+ blobs2Animate .wigglePreset (
136+ animation
137+ /* blobOptions= */ ... },
138+ /* canvasOptions= */
139+ /* wiggleOptions= */ : 2 },
140+ )
132141```
133142
134143## Complete API
0 commit comments