Svelte

Svelte - компілятор для перетворення Svelte компонентів в ванільний js

Директиви для роботи з анімаціями

	Hello Svelte


	Hello Svelte


		Hello Svelte
	

	Hello Svelte

• in - для анімацій появи елементів
• out - для анімацій зникнення елементів

transition:fade|blur|fly|slide|scale|draw={params}
in:fade|blur|fly|slide|scale|draw={params}
out:fade|blur|fly|slide|scale|draw={params}


						

	animate:flip={params}


						

Transition API

transition = (node: HTMLElement, params: any) => {
	delay?: number,
	duration?: number,
	easing?: (t: number) => number,
	css?: (t: number, u: number) => string,
	tick?: (t: number, u: number) => void
}

css transition

js transition

css animation

animation = (
 node: HTMLElement,
 { from: DOMRect, to: DOMRect },
 params: any
) => {
	delay?: number,
	duration?: number,
	easing?: (t: number) => number,
	css?: (t: number, u: number) => string,
	tick?: (t: number, u: number) => void
}

директива use в дії

let action = (
 node: HTMLElement,
 parameters: any
) => {
	return {
		update?: (parameters: any) => void,
		destroy?: () => void
	}
}

crossfade анімації

const [send, receive] = crossfade({
	duration: number|(d) => number,
	fallback: (node: HTMLElement, params: any)  => {
		delay?: number,
		duration?: number,
		easing?: (t: number) => number,
		css?: (t: number, u: number) => string,
		tick?: (t: number, u: number) => void
	}
});
in:receive="{{key: number|string}}"
out:send="{{key: number|string}}"

Sapper (Page transitions)

Допоміжні вбудовані опції

easing

Motion

tweened

store = tweened(
	value: any,
	options: {
		delay: number,
		duration number,
		easing (t:number) => t,
		interpolate: (a, b) => t => value,
	}
)

spring

store = spring(
	value: any,
	options: {
		stiffness: number,
		damping: number,
		precision: number,
	}
)

Заключення

Svelte API для роботи з анімаціями має певні недоліки:

1. Підтримка
2. Динамічне створення анімацій
3. Різноманітність підходів

Але різноманітність можливостей і підходи до реалізації дають можливість робити дуже круті анімації з невеликими затратами ресурсів девайса