MOVIMENTO / iOS / NATIVESCRIPT VUE
Encontre a luz.
Cards mergulham atrás do horizonte curvo e surgem na próxima cena.
Do projeto Auralis ↗O movimento por trás.
Jolt 0.1.0-rc.11O arquivo completo do projeto, vinculado à revisão conferida. Adapte com as dependências descritas abaixo.
NativeScript-Vue 3 e Jolt RC.11. As funções retornam keyframes e opções; AuroraView as agenda em uma timeline com scope. Forneça CardLayout, o limite inferior entre as duas cenas (maior coordenada y) e índice/quantidade de cards. A geometria usa um canvas de 402 pontos com centro x=201: adapte ou escale para sua cena. Separe as transformações de transição em card.view do movimento contínuo em card.art. Preserve fades de movimento reduzido, proteções de ciclo de vida e descarte dos scopes. Os helpers não desenham vidro, texto ou partículas; veja aurora-view.ts e artwork.ts. A plataforma gravada é iOS.
import type { AnimateOptions, Keyframes } from '@rafaelaugusto/jolt'
export interface CardLayout {
x: number
y: number
width: number
height: number
rotation: number
opacity: number
}
export const sceneTiming = {
enterAt: 300,
enterStagger: 42,
enterDuration: 820,
exitStagger: 26,
exitDuration: 440,
horizonAt: 180,
horizonDuration: 620,
} as const
export interface CardFlight {
keyframes: Keyframes
options: AnimateOptions
}
/** All cards pass through the same pool of light, regardless of swipe direction. */
function poolOffset(card: CardLayout, horizon: number) {
return {
x: 201 - (card.x + card.width / 2),
// Hide the whole shrunken card behind the deepest part of the curved edge.
y: horizon + 62 - (card.y + card.height / 2),
}
}
export function exitFlight(card: CardLayout, horizon: number, index: number, count: number): CardFlight {
const pool = poolOffset(card, horizon)
const spin = (index % 2 === 0 ? 1 : -1) * (24 + index * 3)
return {
keyframes: {
x: [0, -pool.x * 0.08, pool.x * 0.3, pool.x],
y: [0, -14, pool.y * 0.25, pool.y],
scale: [1, 1.045, 0.72, 0.06],
rotate: [card.rotation, card.rotation - spin * 0.1, card.rotation + spin * 0.4, card.rotation + spin],
opacity: [card.opacity, card.opacity, card.opacity * 0.85, 0],
},
options: {
duration: sceneTiming.exitDuration,
delay: (count - 1 - index) * sceneTiming.exitStagger,
times: [0, 0.2, 0.6, 1],
ease: ['easeOut', 'easeIn', 'easeIn'],
opacity: { times: [0, 0.5, 0.82, 1] },
},
}
}
export function entryFlight(card: CardLayout, horizon: number, index: number): CardFlight {
const pool = poolOffset(card, horizon)
const twist = (index % 2 === 0 ? -1 : 1) * (30 + index * 2)
const overshoot = 23 + index % 3 * 6
return {
keyframes: {
x: [pool.x, -pool.x * 0.07, pool.x * 0.02, 0],
y: [pool.y, -overshoot, 7, 0],
scale: [0.08, 1.055, 0.985, 1],
rotate: [card.rotation + twist, card.rotation - twist * 0.17, card.rotation + twist * 0.04, card.rotation],
opacity: [0, card.opacity, card.opacity, card.opacity],
},
options: {
duration: sceneTiming.enterDuration,
delay: sceneTiming.enterAt + index * sceneTiming.enterStagger,
times: [0, 0.55, 0.79, 1],
ease: ['easeOut', 'easeInOut', 'easeOut'],
opacity: { times: [0, 0.22, 0.79, 1] },
},
}
}