Arc
Curved paths between two points, for a transition's path: x and y travel along the curve
together, rather than each on a straight line. make makes Motion's arc(), a curve that bulges off
the straight line between them; any function of Path's shape is a path too.
import * as Arc from "@wardic/core/Arc"
const at = Arc.make({ strength: 0.3 })({ x: 0, y: 0 }, { x: 200, y: 80 })
at(0.5) // the curve's middle: { x, y }Interfaces
Options
An arc's options, Motion's arc's.
Properties
direction?
readonly direction?: "cw" | "ccw";The side it bulges to, turning with the direction of travel: "cw" or "ccw". Left out, it
keeps to one side of the screen across the paths one arc makes.
peak?
readonly peak?: number;Where along the way (0–1) the arc is at its highest. Default 0.5.
rotate?
readonly rotate?: number | boolean;Whether it turns the element to follow the curve: true all the way, a number 0–1 that share of it.
strength?
readonly strength?: number;How far the arc bulges off the straight line, as a share of the distance it travels: 1 peaks
at the whole distance. Default 0.5.
PathPoint
A point along a path: x and y, and, for a path that turns the element, rotate in degrees.
Extends
Properties
rotate?
readonly rotate?: number;x
readonly x: number;Across.
Inherited from
y
readonly y: number;Down.
Inherited from
Type Aliases
Path
type Path = (from, to) => (t) => PathPoint;A path for x and y: given where they start and end, the point at each progress t, 0 at the start
and 1 at the end. make makes one; any function of this shape is one.
Parameters
from
to
Returns
(t) => PathPoint
Example
// A hop: a straight line that lifts 40 px at its middle.
const hop: Arc.Path = (from, to) => (t) => ({
x: from.x + (to.x - from.x) * t,
y: from.y + (to.y - from.y) * t - Math.sin(Math.PI * t) * 40,
})Functions
make()
function make(options?): Path;A curved path, Motion's arc(). Make one and keep it: with no direction, it remembers the side of
the screen it bulged to, and keeps to it when the direction of travel turns.
Parameters
options?
Options = {}
Returns
Example
const path = Arc.make({ strength: 0.4, rotate: true }) // a binding's transition={{ path }}