msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

examples

Browse Source
pull/4742/head
pushkine 5 years ago
parent 291703d291
commit e9f0ffbd29
6 changed files with 695 additions and 508 deletions
Show Stats Download Patch File Download Diff File

187
site/content/examples/08-motion/01-spring/App.svelte
Unescape View File

@ -1,35 +1,184 @@
<script> <script>
import { spring } from 'svelte/motion'; import { spring } from "svelte/motion";
import { framerate } from "svelte/environment";
import { derived } from "svelte/store";
let coords = spring({ x: 50, y: 50 }, { const s = spring(50);
stiffness: 0.1, let prev_time = now();
damping: 0.25 let prev_value = 50;
}); const velocity = derived(
s,
(v) =>
(-prev_value + (prev_value = v)) / (-prev_time + (prev_time = now())),
0.0
);
let l_time;
$: canvas && Draw($velocity, $s);
let { mass, stiffness, damping, soft } = s;
$: s.soft = soft;
$: s.mass = mass;
$: s.stiffness = stiffness;
$: s.damping = damping;
let solver;
let size = spring(10); function solve_spring(target, prev_velocity) {
const target_ = target;
const delta = target - $s;
if (soft || 1 <= damping / (2.0 * Math.sqrt(stiffness * mass))) {
const angular_frequency = -Math.sqrt(stiffness / mass);
solver = (t) =>
target_ -
(delta + t * (-angular_frequency * delta - prev_velocity)) *
Math.exp(t * angular_frequency);
} else {
const damping_frequency = Math.sqrt(
4.0 * mass * stiffness - damping ** 2
);
const leftover =
(damping * delta - 2.0 * mass * prev_velocity) / damping_frequency;
const dfm = (0.5 * damping_frequency) / mass;
const dm = -(0.5 * damping) / mass;
let f = 0.0;
solver = (t) =>
target_ -
(Math.cos((f = t * dfm)) * delta + Math.sin(f) * leftover) *
Math.exp(t * dm);
}
reset_time = now();
s.set((target__ = target));
}
let target__ = 50;
let canvas;
const start_time = now();
let reset_time = start_time;
const canvas_history = [];
let max_x, min_x, max_y, min_y, canvas_width, canvas_height;
let step, length;
let last_index;
let ctx;
const XC = (x) => ((x - min_x) / (max_x - min_x)) * canvas_width;
const YC = (y) =>
canvas_height - ((y - min_y) / (max_y - min_y)) * canvas_height;
const get_index = (i = 0) =>
(i + Math.floor((prev_time - start_time) / framerate)) % length;
function Draw() {
if (!step) {
max_y = canvas_height / 2;
min_y = -canvas_height / 2;
max_x = canvas_width / 1000;
min_x = -max_x;
step = framerate / 1000; //framerate / canvas_width;
length = Math.floor(max_x / step);
canvas_history.length = length;
canvas_history.fill(0);
ctx = canvas.getContext("2d");
}
ctx.lineWidth = 12;
let offset = (prev_time - reset_time) / 1000;
const start_index = get_index(0);
if (last_index === (last_index = start_index) || !solver) return;
ctx.clearRect(0, 0, canvas_width, canvas_height);
ctx.beginPath();
let x = min_x,
y = 0,
i = start_index + 1;
ctx.moveTo(XC(x), YC(y));
for (x += step; i <= length; i++)
ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
for (i = 0; i < start_index; i++)
ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
ctx.lineTo(
XC(x),
YC((canvas_history[start_index] = canvas_height / 2 - prev_value))
);
if (Math.abs(prev_value - solver(offset)) > 20) {
solve_spring(target__, $velocity);
offset = 0;
}
x = 0;
while (x <= max_x)
ctx.lineTo(
XC((x += step)),
canvas_height / 2 - YC(solver(x + step + offset))
);
ctx.stroke();
}
</script> </script>
<style> <style>
svg { width: 100%; height: 100%; margin: -8px } :global(body) {
circle { fill: #ff3e00 } width: 100vw;
height: 100vh;
overflow: hidden;
}
svg {
width: 100vw;
height: 100vh;
}
circle {
fill: tomato;
}
canvas {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
</style> </style>
<svelte:window
on:mousemove={(e) => solve_spring(e.clientY, $velocity)}
bind:innerWidth={canvas_width}
bind:innerHeight={canvas_height} />
<div style="position: absolute; right: 1em;"> <div style="position: absolute; right: 1em;">
<label> <label>
<h3>stiffness ({coords.stiffness})</h3> <h3>velocity</h3>
<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01"> <progress
value={!Number.isNaN($velocity) && Number.isFinite($velocity) && $velocity + 10}
min={0}
max={20} />
</label>
<label>
<h3>speed</h3>
<progress
value={!Number.isNaN($velocity) && Number.isFinite($velocity) && Math.abs($velocity)}
min={0}
max={20} />
</label>
<label>
<h3>y {$s.toFixed(0)}</h3>
<progress value={!Number.isNaN($s) && $s} min={0} max={1000} />
</label>
<label>
<h3>target {target__}</h3>
<progress value={!Number.isNaN(target__) && target__} min={0} max={1000} />
</label>
<label>
<h3>stiffness ({stiffness})</h3>
<input bind:value={stiffness} type="range" min="10" max="200" step="0.01" />
</label> </label>
<label> <label>
<h3>damping ({coords.damping})</h3> <h3>damping ({damping})</h3>
<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01"> <input bind:value={damping} type="range" min="0.1" max="20" step="0.01" />
</label>
<label>
<h3>mass ({mass})</h3>
<input bind:value={mass} type="range" min="0.1" max="20" step="0.01" />
</label>
<label>
<h3>
soft
<input bind:checked={soft} type="checkbox" />
</h3>
</label> </label>
</div> </div>
<svg>
<svg <circle
on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}" cx={-15+canvas_width / 2}
on:mousedown="{() => size.set(30)}" cy={$s}
on:mouseup="{() => size.set(10)}" r={30} />
>
<circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg> </svg>
<canvas bind:this={canvas} width={canvas_width} height={canvas_height} />

140
site/content/examples/10-animations/00-animate/App.svelte
Unescape View File

@ -1,49 +1,49 @@
<script> <script>
import { quintOut } from 'svelte/easing'; import { quintOut } from "svelte/easing";
import { crossfade } from 'svelte/transition'; import { crossfade } from "svelte/transition";
import { flip } from 'svelte/animate'; import { flip } from "svelte/animate";
const [send, receive] = crossfade({ const [send, receive] = crossfade({
fallback(node, params) { fallback(node, params) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform; const transform = style.transform === "none" ? "" : style.transform;
return { return {
duration: 600, duration: 600,
easing: quintOut, easing: quintOut,
css: t => ` css: (t) => `
transform: ${transform} scale(${t}); transform: ${transform} scale(${t});
opacity: ${t} opacity: ${t}
` `,
}; };
} },
}); });
let todos = [ let todos = [
{ id: 1, done: false, description: 'write some docs' }, { key: 1, done: false, description: "write some docs" },
{ id: 2, done: false, description: 'start writing JSConf talk' }, { key: 2, done: false, description: "start writing JSConf talk" },
{ id: 3, done: true, description: 'buy some milk' }, { key: 3, done: true, description: "buy some milk" },
{ id: 4, done: false, description: 'mow the lawn' }, { key: 4, done: false, description: "mow the lawn" },
{ id: 5, done: false, description: 'feed the turtle' }, { key: 5, done: false, description: "feed the turtle" },
{ id: 6, done: false, description: 'fix some bugs' }, { key: 6, done: false, description: "fix some bugs" },
]; ];
let uid = todos.length + 1; let ukey = todos.length + 1;
function add(input) { function add(input) {
const todo = { todos = [{ key: ukey++, done: false, description: input.value }, ...todos];
id: uid++, input.value = "";
done: false,
description: input.value
};
todos = [todo, ...todos];
input.value = '';
} }
function remove(todo) { function remove(key1) {
todos = todos.filter(t => t !== todo); todos = todos.filter(({ key }) => key !== key1);
} }
$: list = todos.reduce((prev, td) => (prev[+td.done].push(td), prev), [
[],
[],
]);
const animating = new Map();
let lastShuffle = Date.now();
let t = 0;
</script> </script>
<style> <style>
@ -52,25 +52,22 @@
width: 100%; width: 100%;
margin: 2em 0 1em 0; margin: 2em 0 1em 0;
} }
.board { .board {
max-width: 36em; max-width: 36em;
margin: 0 auto; margin: 0 auto;
} }
.left,
.left, .right { .right {
float: left; float: left;
width: 50%; width: 50%;
padding: 0 1em 0 0; padding: 0 1em 0 0;
box-sizing: border-box; box-sizing: border-box;
} }
h2 { h2 {
font-size: 2em; font-size: 2em;
font-weight: 200; font-weight: 200;
user-select: none; user-select: none;
} }
label { label {
top: 0; top: 0;
left: 0; left: 0;
@ -83,13 +80,12 @@
background-color: #eee; background-color: #eee;
user-select: none; user-select: none;
} }
input {
input { margin: 0 } margin: 0;
}
.right label { .right label {
background-color: rgb(180,240,100); background-color: rgb(180, 240, 100);
} }
button { button {
float: right; float: right;
height: 1em; height: 1em;
@ -98,50 +94,66 @@
line-height: 1; line-height: 1;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: rgb(170,30,30); color: rgb(170, 30, 30);
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
label:hover button { label:hover button {
opacity: 1; opacity: 1;
} }
</style> </style>
<div class='board'> <svelte:window
on:keydown={(e) => {
let [{ length: a }, { length: b }] = list;
if (e.keyCode == 32) {
if (lastShuffle > Date.now() - 100) {
return;
}
lastShuffle = Date.now();
e = 0;
if (!a) e += 1;
if (!b) e -= 2;
if (!e) e += t = 0.5 + (b - a) / (a + b);
s: if (~e) {
a += b;
let w = 1;
while (animating.get((e = (e = list[(e = +(Math.random() + e > 0.5))])[Math.floor(Math.random() * e.length)]).key)) if (w++ > a) break s;
e.done = !e.done;
list = list;
}
}
}} />
<div class="board">
<input <input
class="new-todo" class="new-todo"
placeholder="what needs to be done?" placeholder="what needs to be done?"
on:keydown="{event => event.which === 13 && add(event.target)}" on:keydown={(event) => void (event.key === 'Enter' && add(event.target))} />
> {#each list as todo, i (i)}
<div class={!i ? 'left' : 'right'}>
<div class='left'> <h2>{!i ? 'todo' : 'done'}</h2>
<h2>todo</h2> {#each todo as { key, description, done: checked } (key)}
{#each todos.filter(t => !t.done) as todo (todo.id)}
<label <label
in:receive="{{key: todo.id}}" in:receive={{ key }}
out:send="{{key: todo.id}}" out:send={{ key }}
animate:flip animate:flip
> on:outrostart={() => {
<input type=checkbox bind:checked={todo.done}> animating.set(key, true);
{todo.description} }}
<button on:click="{() => remove(todo)}">x</button> on:outroend={() => {
animating.set(key, false);
}}
on:introstart={() => {
animating.set(key, true);
}}
on:introend={() => {
animating.set(key, false);
}}>
<input type="checkbox" bind:checked />
{description}
<button on:click={remove.bind(null, key)}>x</button>
</label> </label>
{/each} {/each}
</div> </div>
<div class='right'>
<h2>done</h2>
{#each todos.filter(t => t.done) as todo (todo.id)}
<label
in:receive="{{key: todo.id}}"
out:send="{{key: todo.id}}"
animate:flip
>
<input type=checkbox bind:checked={todo.done}>
{todo.description}
<button on:click="{() => remove(todo)}">x</button>
</label>
{/each} {/each}
</div>
</div> </div>

97
site/content/examples/11-easing/00-easing/App.svelte
Unescape View File

@ -1,40 +1,46 @@
<script> <script>
import { interpolateString as interpolate } from 'd3-interpolate'; import { strings } from "svelte/interpolate";
import { tweened } from 'svelte/motion'; import { tweened } from "svelte/motion";
import { cubicBezier, easeOut } from "svelte/easing";
import { onDestroy } from "svelte";
import Grid from './Grid.svelte'; import Grid from "./Grid.svelte";
import Controls from './Controls.svelte'; import Controls from "./Controls.svelte";
import { eases, types } from './eases.js'; import { eases, types, generate } from "./eases.js";
let current_type = 'In'; let current_type = "In";
let current_ease = 'sine'; let current_ease = "sine";
let duration = 2000; let duration = 2000;
let current = eases.get(current_ease)[current_type]; let current = eases.get(current_ease)[current_type];
let playing = false; let playing = false;
let width; let width;
const ease_path = tweened(current.shape, { interpolate }); const ease_path = tweened(current.shape, {
interpolate: strings,
easing: easeOut,
});
const time = tweened(0); const time = tweened(0);
const value = tweened(1000); const value = tweened(1000);
async function runAnimations() { async function runAnimations() {
playing = true; playing = true;
value.setImmediate(1000);
value.set(1000, {duration: 0}); time.setImmediate(0);
time.set(0, {duration: 0}); ease_path.set(is_custom ? generate(current_bezier) : current.shape);
time.set(1000, { duration });
await ease_path.set(current.shape); value.set(0, { duration, easing: is_custom ? current_bezier : current.fn });
await Promise.all([
time.set(1000, {duration, easing: x => x}),
value.set(0, {duration, easing: current.fn})
]);
playing = false;
} }
$: current = eases.get(current_ease)[current_type]; onDestroy(time.onRest(() => (playing = false)));
$: current && runAnimations(); $: is_custom = current_ease.includes("Bezier");
$: current = !is_custom && eases.get(current_ease)[current_type];
$: current_bezier, current, runAnimations();
let eq;
let x1, x2, y1, y2;
$: current_bezier = bezier && cubicBezier(...bezier);
let bezier;
let div;
</script> </script>
<style> <style>
@ -49,58 +55,53 @@
padding: 20px; padding: 20px;
} }
svg { .svg1 {
width: 100%; width: 100%;
margin: 0 20px 0 0; margin: 0 20px 0 0;
} }
.graph { .graph {
transform: translate(200px,400px) transform: translate(200px, 400px);
} }
@media (max-width:600px) { @media (max-width: 600px) {
.easing-vis { .easing-vis {
flex-direction: column; flex-direction: column;
max-height: calc(100% - 3rem); max-height: calc(100% - 3rem);
} }
} }
circle {
z-index: 10;
position: absolute;
}
</style> </style>
<div bind:offsetWidth={width} class="easing-vis"> <div bind:offsetWidth={width} bind:this={div} class="easing-vis">
<svg viewBox="0 0 1400 1802"> {#if is_custom}
<div
style="position:absolute;z-index:10;left:120px;top:150px;font-size:24px;">
cubicBezier({bezier})
</div>
{/if}
<svg class="svg1" viewBox="0 0 1400 1802">
<g class="canvas"> <g class="canvas">
<Grid x={$time} y={$value}/> <Grid {is_custom} bind:bezier x={$time} y={$value}>
<g class="graph"> <g class="graph">
<path <path d={$ease_path} stroke="tomato" stroke-width="10" fill="none" />
d={$ease_path} <circle cx={$time} cy={$value} r="15" fill="#333" />
stroke="#333"
stroke-width="2"
fill="none"
/>
<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
fill="#ff3e00"
style="transform: translate(1060px, {($value - 24)}px)"
/>
<circle
cx="{$time}"
cy="{$value}"
r="15"
fill="#ff3e00"
/>
</g> </g>
</Grid>
</g> </g>
</svg> </svg>
<Controls <Controls
{is_custom}
{eases} {eases}
{types} {types}
{playing} {playing}
{width} {width}
{bezier}
bind:duration bind:duration
bind:current_ease bind:current_ease
bind:current_type bind:current_type
on:play={runAnimations} on:play={runAnimations} />
/>
</div> </div>

43
site/content/examples/11-easing/00-easing/Controls.svelte
Unescape View File

@ -1,5 +1,5 @@
<script> <script>
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from "svelte";
export let current_ease; export let current_ease;
export let current_type; export let current_type;
@ -33,7 +33,7 @@
background: #eee; background: #eee;
border-radius: 2px; border-radius: 2px;
margin: 3px 0; margin: 3px 0;
cursor:pointer; cursor: pointer;
} }
li:hover { li:hover {
@ -73,7 +73,7 @@
.duration input { .duration input {
width: 80px; width: 80px;
margin: 10px 10px 10px 0 ; margin: 10px 10px 10px 0;
} }
.duration button { .duration button {
@ -89,7 +89,7 @@
width: 100%; width: 100%;
} }
@media (max-width:600px) { @media (max-width: 600px) {
.easing-types { .easing-types {
display: flex; display: flex;
align-items: center; align-items: center;
@ -125,36 +125,28 @@
<h3>Ease</h3> <h3>Ease</h3>
{#if mobile} {#if mobile}
<select bind:value={current_ease}> <select bind:value={current_ease}>
{#each [...eases] as [name]} {#each [...eases, [`cubicBezier`]] as [name]}
<option <option value={name} class:selected={name === current_ease}>
value={name}
class:selected={name === current_ease}
>
{name} {name}
</option> </option>
{/each} {/each}
</select> </select>
{:else} {:else}
<ul> <ul>
{#each [...eases] as [name]} {#each [...eases, [`cubicBezier`]] as [name]}
<li <li
class:selected={name === current_ease} class:selected={name === current_ease}
on:click={() => current_ease = name} on:click={() => (current_ease = name)}>
>
{name} {name}
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}
<h3>Type</h3> <h3>Type</h3>
{#if mobile } {#if mobile}
<select bind:value={current_type}> <select bind:value={current_type}>
{#each types as [name, type]} {#each types as [name, type]}
<option <option value={type}>{name}</option>
value={type}
>
{name}
</option>
{/each} {/each}
</select> </select>
{:else} {:else}
@ -162,25 +154,22 @@
{#each types as [name, type]} {#each types as [name, type]}
<li <li
class:selected={type === current_type} class:selected={type === current_type}
on:click={() => current_type = type} on:click={() => (current_type = type)}>
>
{name} {name}
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}
</div> </div>
<h4> <h4>Duration</h4>
Duration
</h4>
<div class="duration"> <div class="duration">
<span> <span>
<input type="number" bind:value={duration} min="0" step="100"/> <input type="number" bind:value={duration} min="0" step="100" />
<button class="number" on:click={() => duration -= 100}>-</button> <button class="number" on:click={() => (duration -= 100)}>-</button>
<button class="number" on:click={() => duration += 100}>+</button> <button class="number" on:click={() => (duration += 100)}>+</button>
</span> </span>
<button class="play" on:click={() => dispatch('play')}> <button class="play" on:click={() => dispatch('play')}>
{playing ? 'Restart' : 'Play'} {playing ? 'Restart' : 'Play'}
</button> </button>
</div> </div>
</div> </div>

116
site/content/examples/11-easing/00-easing/Grid.svelte
Unescape View File

@ -1,62 +1,98 @@
<script> <script>
export let is_custom;
export let x, y; export let x, y;
let rect;
let rect2;
export let x1 = 200,
y1 = 1400,
x2 = 1200,
y2 = 400;
let selected1 = false,
selected2 = false;
export let bezier = [0, 0, 0, 0];
const radius = 30;
$: {
if (rect2) {
const { x, y, width, height } = rect2.getBoundingClientRect();
bezier = [
Math.max(0, Math.min(1, (x1 - 200) / 1000)),
-(y1 - 1400) / 1000,
Math.max(0, Math.min(1, 1 + (x2 - 1200) / 1000)),
1 - (y2 - 400) / 1000,
].map((v) => Math.round(v * 100) / 100);
}
}
</script> </script>
<style> <style>
.grid-line { .grid-line {
stroke:#ccc; stroke: #ccc;
opacity: 0.5; opacity: 0.5;
stroke-width: 2; stroke-width: 2;
} }
circle {
.grid-line-xy { z-index: 10;
stroke: tomato; position: absolute;
stroke-width: 2;
} }
</style> </style>
<svelte:options namespace="svg" /> <svelte:options namespace="svg" />
<rect <rect
x=0 bind:this={rect}
y=0 x="0"
width=1400 y="0"
height=1800 width="1400"
stroke=#ccc height="1800"
stroke="#ccc"
style="opacity: 0.5" style="opacity: 0.5"
fill=none fill="none"
stroke-width=2 stroke-width="2" />
/>
{#each { length: 8 } as _, i} {#each { length: 8 } as _, i}
{#if i < 6} {#if i < 6}
<path <path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
class="grid-line"
/>
{/if} {/if}
<path <path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
class="grid-line"
/>
{/each} {/each}
<path
style="transform: translateX({x+200}px)"
d="M0 0 L0 1800"
class="grid-line-xy"
/>
<path
style="transform: translateY({y}px)"
d="M0 400 L1400 400"
class="grid-line-xy"
/>
<rect <rect
x=200 bind:this={rect2}
y=400 x="200"
width=1000 y="400"
height=1000 width="1000"
stroke=#999 height="1000"
fill=none stroke="#999"
stroke-width=2 fill="none"
/> stroke-width="4" />
<svelte:window
on:mousemove={(e) => {
const { x, y, width, height } = rect.getBoundingClientRect();
const _x1 = Math.min(1200, Math.max(200, (e.clientX - x) * (1400 / width)));
const _y1 = Math.min(1800, Math.max(0, (e.clientY - y) * (1800 / height)));
if (selected1) (x1 = _x1), (y1 = _y1);
else if (selected2) (x2 = _x1), (y2 = _y1);
}}
on:mouseup={() => {
selected1 = selected2 = false;
}} />
<slot />
{#if is_custom}
<path d="M200 1400 L{x1} {y1} " stroke="#333333d9" stroke-width="10" />
<path d="M1200 400 L{x2} {y2} " stroke="#333333d9" stroke-width="10" />
<circle
cx={x1}
cy={y1}
r={radius}
fill="#333"
stroke="transparent"
stroke-width="100"
on:mousedown={() => (selected1 = true)} />
<circle
cx={x2}
cy={y2}
r={radius}
fill="#333"
stroke="transparent"
stroke-width="100"
on:mousedown={() => (selected2 = true)} />
{/if}

42
site/content/examples/11-easing/00-easing/eases.js
Unescape View File

@ -1,25 +1,25 @@
import * as eases from 'svelte/easing'; import * as eases from 'svelte/easing'
const processed_eases = {}; const processed_eases = {}
let ease
for (const ease in eases) { for (ease in eases) {
if (ease === "linear") { if (ease === 'linear') {
processed_eases.linear = eases.linear; processed_eases.linear = eases.linear
} else if (ease === 'cubicBezier') {
continue
} else { } else {
const name = ease.replace(/In$|InOut$|Out$/, ''); const name = ease.replace(/In$|InOut$|Out$/, '')
const type = ease.match(/In$|InOut$|Out$/)[0]; ;(processed_eases[name] || (processed_eases[name] = {}))[ease.match(/In$|InOut$|Out$/)[0]] = {
fn: eases[ease],
if (!(name in processed_eases)) processed_eases[name] = {}; shape: generate(eases[ease]),
processed_eases[name][type] = {};
processed_eases[name][type].fn = eases[ease];
let shape = 'M0 1000';
for (let i = 1; i <= 1000; i++) {
shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
processed_eases[name][type].shape = shape;
} }
} }
} }
export function generate(easing, from = 0, to = 1000) {
let shape = `M${from} ${to}`
for (let i = from + 1; i <= to; i++) shape += ` L${i} ${to - to * easing(i / to)}`
return shape
}
const sorted_eases = new Map([ const sorted_eases = new Map([
['sine', processed_eases.sine], ['sine', processed_eases.sine],
@ -32,12 +32,12 @@ const sorted_eases = new Map([
['back', processed_eases.back], ['back', processed_eases.back],
['elastic', processed_eases.elastic], ['elastic', processed_eases.elastic],
['bounce', processed_eases.bounce], ['bounce', processed_eases.bounce],
]); ])
export const types = [ export const types = [
['Ease In', 'In'], ['Ease In', 'In'],
['Ease Out', 'Out'], ['Ease Out', 'Out'],
['Ease In Out', 'InOut'] ['Ease In Out', 'InOut'],
]; ]
export { sorted_eases as eases }; export { sorted_eases as eases }

Write Preview
Loading…
Cancel
Save