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 f38431d

Browse files
committed
smooth out initial wiggle animation
1 parent 71265e3 commit f38431d

File tree

3 files changed

+10
-25
lines changed

3 files changed

+10
-25
lines changed

‎demo/content.ts

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -925,27 +925,8 @@ addCanvas(
925925
addCanvas(1.8, (ctx, width, height, animate) => {
926926
const size = Math.min(width, height) * 0.8;
927927
const center: Coord = {x: width * 0.5, y: height * 0.5};
928-
const trailLength = 40;
929-
930-
const canvasPointGenerator = (keyframe: CanvasKeyframe | CanvasCustomKeyframe): Point[] => {
931-
let points: Point[];
932-
if ("points" in keyframe) {
933-
points = keyframe.points;
934-
} else {
935-
points = genFromOptions(keyframe.blobOptions);
936-
}
937-
return mapPoints(points, ({curr}) => {
938-
curr.x += center.x - size / 2;
939-
curr.y += center.y - size / 2;
940-
return curr;
941-
});
942-
};
943928

944-
const animation = statefulAnimationGenerator(
945-
canvasPointGenerator,
946-
(points: Point[]) => points as any,
947-
() => {},
948-
)(Date.now);
929+
const animation = canvasPath();
949930

950931
wigglePreset(
951932
animation,
@@ -955,7 +936,10 @@ addCanvas(1.8, (ctx, width, height, animate) => {
955936
seed: Math.random(),
956937
size,
957938
},
958-
{},
939+
{
940+
offsetX: center.x - size / 2,
941+
offsetY: center.y - size / 2,
942+
},
959943
{
960944
speed: 2,
961945
},

‎demo/example.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const genFrame = (overrides: any = {}): CanvasKeyframe => {
8484
// Callback for every frame which starts transition to a new frame.
8585
const loopAnimation = (): void => {
8686
extraPoints = 0;
87-
genWiggle(2000);
87+
genWiggle(5000);
8888
};
8989

9090
// Quickly animate to a new frame when canvas is clicked.

‎public/animate.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {BlobOptions, CanvasOptions} from "./blobs";
1313
import {noise} from "../internal/rand";
1414
import {interpolateBetween} from "../internal/animate/interpolate";
1515
import {prepare} from "../internal/animate/prepare";
16+
import {timingFunctions} from "../internal/animate/timing";
1617

1718
interface Keyframe {
1819
// Duration of the keyframe animation in milliseconds.
@@ -145,11 +146,11 @@ export const wigglePreset = (
145146
) => {
146147
// Interval at which a new sample is taken.
147148
// Multiple of 16 to do work every N frames.
148-
const intervalMs = 16 * 5;
149+
const intervalMs = 16 * 10;
149150
const leapSize = 0.01 * wiggleOptions.speed;
150151
const noiseField = noise(String(blobOptions.seed));
151152

152-
const transitionFrameCount = 1+Math.min((wiggleOptions.initialTransition || 0) / intervalMs);
153+
const transitionFrameCount = Math.min((wiggleOptions.initialTransition || 0) / intervalMs);
153154
let transitionStartFrame = animation.renderPoints();
154155

155156
let count = 0;
@@ -172,7 +173,7 @@ export const wigglePreset = (
172173
divideRatio: 1,
173174
},
174175
);
175-
const progress = 1/ (transitionFrameCount - count);
176+
const progress = Math.min(1,2/ (transitionFrameCount - count));
176177
const targetPoints = interpolateBetween(
177178
progress,
178179
preparedStartPoints,

0 commit comments

Comments
(0)

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