mirror of https://github.com/sveltejs/svelte
pushkine
5 years ago
parent
291703d291
commit
e9f0ffbd29
@ -1,35 +1,184 @@
|
||||
<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 }, {
|
||||
stiffness: 0.1,
|
||||
damping: 0.25
|
||||
});
|
||||
const s = spring(50);
|
||||
let prev_time = now();
|
||||
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>
|
||||
|
||||
<style>
|
||||
svg { width: 100%; height: 100%; margin: -8px }
|
||||
circle { fill: #ff3e00 }
|
||||
:global(body) {
|
||||
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>
|
||||
|
||||
<svelte:window
|
||||
on:mousemove={(e) => solve_spring(e.clientY, $velocity)}
|
||||
bind:innerWidth={canvas_width}
|
||||
bind:innerHeight={canvas_height} />
|
||||
<div style="position: absolute; right: 1em;">
|
||||
<label>
|
||||
<h3>stiffness ({coords.stiffness})</h3>
|
||||
<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
|
||||
</label>
|
||||
<label>
|
||||
<h3>velocity</h3>
|
||||
<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>
|
||||
<h3>damping ({coords.damping})</h3>
|
||||
<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
|
||||
</label>
|
||||
<label>
|
||||
<h3>damping ({damping})</h3>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
|
||||
on:mousedown="{() => size.set(30)}"
|
||||
on:mouseup="{() => size.set(10)}"
|
||||
>
|
||||
<circle cx={$coords.x} cy={$coords.y} r={$size}/>
|
||||
<svg>
|
||||
<circle
|
||||
cx={-15+canvas_width / 2}
|
||||
cy={$s}
|
||||
r={30} />
|
||||
</svg>
|
||||
<canvas bind:this={canvas} width={canvas_width} height={canvas_height} />
|
||||
|
||||
@ -1,147 +1,159 @@
|
||||
<script>
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { crossfade } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
const [send, receive] = crossfade({
|
||||
fallback(node, params) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
|
||||
return {
|
||||
duration: 600,
|
||||
easing: quintOut,
|
||||
css: t => `
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { crossfade } from "svelte/transition";
|
||||
import { flip } from "svelte/animate";
|
||||
|
||||
const [send, receive] = crossfade({
|
||||
fallback(node, params) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === "none" ? "" : style.transform;
|
||||
return {
|
||||
duration: 600,
|
||||
easing: quintOut,
|
||||
css: (t) => `
|
||||
transform: ${transform} scale(${t});
|
||||
opacity: ${t}
|
||||
`
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
let todos = [
|
||||
{ id: 1, done: false, description: 'write some docs' },
|
||||
{ id: 2, done: false, description: 'start writing JSConf talk' },
|
||||
{ id: 3, done: true, description: 'buy some milk' },
|
||||
{ id: 4, done: false, description: 'mow the lawn' },
|
||||
{ id: 5, done: false, description: 'feed the turtle' },
|
||||
{ id: 6, done: false, description: 'fix some bugs' },
|
||||
];
|
||||
|
||||
let uid = todos.length + 1;
|
||||
|
||||
function add(input) {
|
||||
const todo = {
|
||||
id: uid++,
|
||||
done: false,
|
||||
description: input.value
|
||||
};
|
||||
|
||||
todos = [todo, ...todos];
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
function remove(todo) {
|
||||
todos = todos.filter(t => t !== todo);
|
||||
}
|
||||
`,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
let todos = [
|
||||
{ key: 1, done: false, description: "write some docs" },
|
||||
{ key: 2, done: false, description: "start writing JSConf talk" },
|
||||
{ key: 3, done: true, description: "buy some milk" },
|
||||
{ key: 4, done: false, description: "mow the lawn" },
|
||||
{ key: 5, done: false, description: "feed the turtle" },
|
||||
{ key: 6, done: false, description: "fix some bugs" },
|
||||
];
|
||||
|
||||
let ukey = todos.length + 1;
|
||||
|
||||
function add(input) {
|
||||
todos = [{ key: ukey++, done: false, description: input.value }, ...todos];
|
||||
input.value = "";
|
||||
}
|
||||
|
||||
function remove(key1) {
|
||||
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>
|
||||
|
||||
<style>
|
||||
.new-todo {
|
||||
font-size: 1.4em;
|
||||
width: 100%;
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
max-width: 36em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 0 1em 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
font-weight: 200;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
label {
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
padding: 0.5em;
|
||||
margin: 0 auto 0.5em auto;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input { margin: 0 }
|
||||
|
||||
.right label {
|
||||
background-color: rgb(180,240,100);
|
||||
}
|
||||
|
||||
button {
|
||||
float: right;
|
||||
height: 1em;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5em;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: rgb(170,30,30);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
label:hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
.new-todo {
|
||||
font-size: 1.4em;
|
||||
width: 100%;
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
.board {
|
||||
max-width: 36em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 0 1em 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
font-weight: 200;
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
padding: 0.5em;
|
||||
margin: 0 auto 0.5em auto;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
user-select: none;
|
||||
}
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
.right label {
|
||||
background-color: rgb(180, 240, 100);
|
||||
}
|
||||
button {
|
||||
float: right;
|
||||
height: 1em;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5em;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: rgb(170, 30, 30);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
label:hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='board'>
|
||||
<input
|
||||
class="new-todo"
|
||||
placeholder="what needs to be done?"
|
||||
on:keydown="{event => event.which === 13 && add(event.target)}"
|
||||
>
|
||||
|
||||
<div class='left'>
|
||||
<h2>todo</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}
|
||||
</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}
|
||||
</div>
|
||||
<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
|
||||
class="new-todo"
|
||||
placeholder="what needs to be done?"
|
||||
on:keydown={(event) => void (event.key === 'Enter' && add(event.target))} />
|
||||
{#each list as todo, i (i)}
|
||||
<div class={!i ? 'left' : 'right'}>
|
||||
<h2>{!i ? 'todo' : 'done'}</h2>
|
||||
{#each todo as { key, description, done: checked } (key)}
|
||||
<label
|
||||
in:receive={{ key }}
|
||||
out:send={{ key }}
|
||||
animate:flip
|
||||
on:outrostart={() => {
|
||||
animating.set(key, true);
|
||||
}}
|
||||
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>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -1,106 +1,107 @@
|
||||
<script>
|
||||
import { interpolateString as interpolate } from 'd3-interpolate';
|
||||
import { tweened } from 'svelte/motion';
|
||||
|
||||
import Grid from './Grid.svelte';
|
||||
import Controls from './Controls.svelte';
|
||||
|
||||
import { eases, types } from './eases.js';
|
||||
|
||||
let current_type = 'In';
|
||||
let current_ease = 'sine';
|
||||
let duration = 2000;
|
||||
let current = eases.get(current_ease)[current_type];
|
||||
let playing = false;
|
||||
let width;
|
||||
|
||||
const ease_path = tweened(current.shape, { interpolate });
|
||||
const time = tweened(0);
|
||||
const value = tweened(1000);
|
||||
|
||||
async function runAnimations() {
|
||||
playing = true;
|
||||
|
||||
value.set(1000, {duration: 0});
|
||||
time.set(0, {duration: 0});
|
||||
|
||||
await ease_path.set(current.shape);
|
||||
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];
|
||||
$: current && runAnimations();
|
||||
import { strings } from "svelte/interpolate";
|
||||
import { tweened } from "svelte/motion";
|
||||
import { cubicBezier, easeOut } from "svelte/easing";
|
||||
import { onDestroy } from "svelte";
|
||||
|
||||
import Grid from "./Grid.svelte";
|
||||
import Controls from "./Controls.svelte";
|
||||
|
||||
import { eases, types, generate } from "./eases.js";
|
||||
|
||||
let current_type = "In";
|
||||
let current_ease = "sine";
|
||||
let duration = 2000;
|
||||
let current = eases.get(current_ease)[current_type];
|
||||
let playing = false;
|
||||
let width;
|
||||
|
||||
const ease_path = tweened(current.shape, {
|
||||
interpolate: strings,
|
||||
easing: easeOut,
|
||||
});
|
||||
const time = tweened(0);
|
||||
const value = tweened(1000);
|
||||
|
||||
async function runAnimations() {
|
||||
playing = true;
|
||||
value.setImmediate(1000);
|
||||
time.setImmediate(0);
|
||||
ease_path.set(is_custom ? generate(current_bezier) : current.shape);
|
||||
time.set(1000, { duration });
|
||||
value.set(0, { duration, easing: is_custom ? current_bezier : current.fn });
|
||||
}
|
||||
|
||||
onDestroy(time.onRest(() => (playing = false)));
|
||||
$: 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>
|
||||
|
||||
<style>
|
||||
.easing-vis {
|
||||
display: flex;
|
||||
max-height: 95%;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 2px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
||||
.graph {
|
||||
transform: translate(200px,400px)
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
.easing-vis {
|
||||
flex-direction: column;
|
||||
max-height: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
.easing-vis {
|
||||
display: flex;
|
||||
max-height: 95%;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 2px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.svg1 {
|
||||
width: 100%;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
||||
.graph {
|
||||
transform: translate(200px, 400px);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.easing-vis {
|
||||
flex-direction: column;
|
||||
max-height: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
circle {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div bind:offsetWidth={width} class="easing-vis">
|
||||
<svg viewBox="0 0 1400 1802">
|
||||
<g class="canvas">
|
||||
<Grid x={$time} y={$value}/>
|
||||
<g class="graph">
|
||||
<path
|
||||
d={$ease_path}
|
||||
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>
|
||||
</svg>
|
||||
|
||||
<Controls
|
||||
{eases}
|
||||
{types}
|
||||
{playing}
|
||||
{width}
|
||||
bind:duration
|
||||
bind:current_ease
|
||||
bind:current_type
|
||||
on:play={runAnimations}
|
||||
/>
|
||||
<div bind:offsetWidth={width} bind:this={div} class="easing-vis">
|
||||
{#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">
|
||||
<Grid {is_custom} bind:bezier x={$time} y={$value}>
|
||||
<g class="graph">
|
||||
<path d={$ease_path} stroke="tomato" stroke-width="10" fill="none" />
|
||||
<circle cx={$time} cy={$value} r="15" fill="#333" />
|
||||
</g>
|
||||
</Grid>
|
||||
</g>
|
||||
</svg>
|
||||
<Controls
|
||||
{is_custom}
|
||||
{eases}
|
||||
{types}
|
||||
{playing}
|
||||
{width}
|
||||
{bezier}
|
||||
bind:duration
|
||||
bind:current_ease
|
||||
bind:current_type
|
||||
on:play={runAnimations} />
|
||||
</div>
|
||||
@ -1,186 +1,175 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
export let current_ease;
|
||||
export let current_type;
|
||||
export let eases;
|
||||
export let types;
|
||||
export let duration;
|
||||
export let playing;
|
||||
export let width;
|
||||
export let current_ease;
|
||||
export let current_type;
|
||||
export let eases;
|
||||
export let types;
|
||||
export let duration;
|
||||
export let playing;
|
||||
export let width;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: mobile = width && width < 600;
|
||||
$: mobile = width && width < 600;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.easing-sidebar {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 5px 10px;
|
||||
background: #eee;
|
||||
border-radius: 2px;
|
||||
margin: 3px 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #676778;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #ff3e00;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
display: inline;
|
||||
padding: 0.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.duration {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.duration span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.duration input {
|
||||
width: 80px;
|
||||
margin: 10px 10px 10px 0 ;
|
||||
}
|
||||
|
||||
.duration button {
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
.duration .number {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.duration .play {
|
||||
margin: 0 5px 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
.easing-types {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.easing-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.duration .play {
|
||||
margin-left: auto;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.9em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h3:nth-of-type(2) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.easing-sidebar {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 5px 10px;
|
||||
background: #eee;
|
||||
border-radius: 2px;
|
||||
margin: 3px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #676778;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #ff3e00;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
display: inline;
|
||||
padding: 0.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.duration {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.duration span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.duration input {
|
||||
width: 80px;
|
||||
margin: 10px 10px 10px 0;
|
||||
}
|
||||
|
||||
.duration button {
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
.duration .number {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.duration .play {
|
||||
margin: 0 5px 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.easing-types {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.easing-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.duration .play {
|
||||
margin-left: auto;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.9em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h3:nth-of-type(2) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="easing-sidebar">
|
||||
<div class="easing-types">
|
||||
<h3>Ease</h3>
|
||||
{#if mobile}
|
||||
<select bind:value={current_ease}>
|
||||
{#each [...eases] as [name]}
|
||||
<option
|
||||
value={name}
|
||||
class:selected={name === current_ease}
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<ul>
|
||||
{#each [...eases] as [name]}
|
||||
<li
|
||||
class:selected={name === current_ease}
|
||||
on:click={() => current_ease = name}
|
||||
>
|
||||
{name}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<h3>Type</h3>
|
||||
{#if mobile }
|
||||
<select bind:value={current_type}>
|
||||
{#each types as [name, type]}
|
||||
<option
|
||||
value={type}
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<ul>
|
||||
{#each types as [name, type]}
|
||||
<li
|
||||
class:selected={type === current_type}
|
||||
on:click={() => current_type = type}
|
||||
>
|
||||
{name}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<h4>
|
||||
Duration
|
||||
</h4>
|
||||
<div class="duration">
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
<button class="play" on:click={() => dispatch('play')}>
|
||||
{playing ? 'Restart' : 'Play'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="easing-types">
|
||||
<h3>Ease</h3>
|
||||
{#if mobile}
|
||||
<select bind:value={current_ease}>
|
||||
{#each [...eases, [`cubicBezier`]] as [name]}
|
||||
<option value={name} class:selected={name === current_ease}>
|
||||
{name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<ul>
|
||||
{#each [...eases, [`cubicBezier`]] as [name]}
|
||||
<li
|
||||
class:selected={name === current_ease}
|
||||
on:click={() => (current_ease = name)}>
|
||||
{name}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<h3>Type</h3>
|
||||
{#if mobile}
|
||||
<select bind:value={current_type}>
|
||||
{#each types as [name, type]}
|
||||
<option value={type}>{name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<ul>
|
||||
{#each types as [name, type]}
|
||||
<li
|
||||
class:selected={type === current_type}
|
||||
on:click={() => (current_type = type)}>
|
||||
{name}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<h4>Duration</h4>
|
||||
<div class="duration">
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
<button class="play" on:click={() => dispatch('play')}>
|
||||
{playing ? 'Restart' : 'Play'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,62 +1,98 @@
|
||||
<script>
|
||||
export let x, y;
|
||||
export let is_custom;
|
||||
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>
|
||||
|
||||
<style>
|
||||
.grid-line {
|
||||
stroke:#ccc;
|
||||
opacity: 0.5;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.grid-line-xy {
|
||||
stroke: tomato;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.grid-line {
|
||||
stroke: #ccc;
|
||||
opacity: 0.5;
|
||||
stroke-width: 2;
|
||||
}
|
||||
circle {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:options namespace="svg" />
|
||||
|
||||
<rect
|
||||
x=0
|
||||
y=0
|
||||
width=1400
|
||||
height=1800
|
||||
stroke=#ccc
|
||||
style="opacity: 0.5"
|
||||
fill=none
|
||||
stroke-width=2
|
||||
/>
|
||||
bind:this={rect}
|
||||
x="0"
|
||||
y="0"
|
||||
width="1400"
|
||||
height="1800"
|
||||
stroke="#ccc"
|
||||
style="opacity: 0.5"
|
||||
fill="none"
|
||||
stroke-width="2" />
|
||||
|
||||
{#each { length: 8 } as _, i}
|
||||
{#if i < 6}
|
||||
<path
|
||||
d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
|
||||
class="grid-line"
|
||||
/>
|
||||
{/if}
|
||||
<path
|
||||
d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
|
||||
class="grid-line"
|
||||
/>
|
||||
{#if i < 6}
|
||||
<path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
|
||||
{/if}
|
||||
<path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
|
||||
{/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
|
||||
x=200
|
||||
y=400
|
||||
width=1000
|
||||
height=1000
|
||||
stroke=#999
|
||||
fill=none
|
||||
stroke-width=2
|
||||
/>
|
||||
bind:this={rect2}
|
||||
x="200"
|
||||
y="400"
|
||||
width="1000"
|
||||
height="1000"
|
||||
stroke="#999"
|
||||
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}
|
||||
|
||||
Loading…
Reference in new issue