Skip to content

Navigation Menu

Sign in
Appearance settings

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

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 900114b

Browse files
committed
use wiggle in website animation
1 parent 326b060 commit 900114b

File tree

3 files changed

+29
-9
lines changed

3 files changed

+29
-9
lines changed

‎README.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ ctx.stroke(path);
9898
const ctx = /* ... */;
9999
const animation = blobs2Animate.canvasPath();
100100

101+
TODO wiggle
102+
101103
// Set up "requestAnimationFrame" rendering loop.
102104
const renderAnimation = () => {
103105
ctx.clearRect(0, 0, width, height);
@@ -233,9 +235,11 @@ export const canvasPath: (timestampProvider?: TimestampProvider) => Animation;
233235

234236
export interface WiggleOptions {
235237
speed: number;
236-
delay?: number;
238+
initialDelay?: number;
239+
initialTransition?: number;
240+
initialTimingFunction?: Keyframe["timingFunction"];
237241
}
238-
// Preset animation that produces natural-looking random movement.
242+
// Preset animation that produces natural-looking random movement.
239243
// The wiggle animation will continue indefinitely until the next transition.
240244
export const wigglePreset = (
241245
animation: Animation,

‎demo/example.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {CanvasKeyframe, canvasPath} from "../public/animate";
1+
import {CanvasKeyframe, canvasPath,wigglePreset} from "../public/animate";
22
import {colors} from "./internal/layout";
33

44
// Fetch reference to example container.
@@ -37,6 +37,20 @@ requestAnimationFrame(renderFrame);
3737
// Extra points that increases when blob gets clicked.
3838
let extraPoints = 0;
3939

40+
const genWiggle = (transition: number) => {
41+
wigglePreset(
42+
animation,
43+
{
44+
extraPoints: 3 + extraPoints,
45+
randomness: 1.5,
46+
seed: Math.random(),
47+
size,
48+
},
49+
{},
50+
{speed: 1, initialTransition: transition, initialTimingFunction: "ease"},
51+
);
52+
};
53+
4054
// Generate a keyframe with overridable default values.
4155
const genFrame = (overrides: any = {}): CanvasKeyframe => {
4256
const blobOptions = {
@@ -58,7 +72,7 @@ const genFrame = (overrides: any = {}): CanvasKeyframe => {
5872
// Callback for every frame which starts transition to a new frame.
5973
const loopAnimation = (): void => {
6074
extraPoints = 0;
61-
animation.transition(genFrame());
75+
genWiggle(4000);
6276
};
6377

6478
// Quickly animate to a new frame when canvas is clicked.
@@ -72,7 +86,7 @@ canvas.onclick = () => {
7286
// Immediately show a new frame.
7387
window.addEventListener("load", () => {
7488
resize();
75-
animation.transition(genFrame({duration: 0}));
89+
genWiggle(0);
7690
});
7791

7892
// Make blob a circle while window is being resized.

‎public/animate.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ export interface TimestampProvider {
7979

8080
export interface WiggleOptions {
8181
speed: number;
82-
delay?: number;
82+
initialDelay?: number;
83+
initialTransition?: number;
84+
initialTimingFunction?: Keyframe["timingFunction"];
8385
}
8486

8587
const canvasPointGenerator = (keyframe: CanvasKeyframe | CanvasCustomKeyframe): Point[] => {
@@ -148,15 +150,15 @@ export const wigglePreset = (
148150
const loopAnimation = (first?: boolean, delay?: number) => {
149151
count++;
150152
animation.transition({
151-
duration: first ? 0 : intervalMs,
153+
duration: first ? wiggleOptions.initialTransition||0 : intervalMs,
152154
delay: delay || 0,
153-
timingFunction: "linear",
155+
timingFunction: (first&&wiggleOptions.initialTimingFunction)||"linear",
154156
canvasOptions,
155157
points: genFromOptions(blobOptions, (index) => {
156158
return noiseField(leapSize * count, index);
157159
}),
158160
callback: loopAnimation,
159161
});
160162
};
161-
loopAnimation(true, wiggleOptions.delay);
163+
loopAnimation(true, wiggleOptions.initialDelay);
162164
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /