Value
new Value(initial: number)setValue、setOffset、flattenOffset、extractOffset、stopAnimation、resetAnimation を持つ、変更できる数値。
API リファレンス
@kkwaenggwari/animated のすべてのエクスポートと、そのシグネチャー、解説しているガイド。
値とグラフ
ValueXY
new ValueXY({ x?, y? })同じ操作に加えて getLayout と getTranslateTransform を持つ、x と y の値のペア。
createValue
createValue(initial: number | Record<string, number>)React の外で数値か、名前付きの数値レコードを作ります。作成しただけでは何も動きません。
ガイド: 値と styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)すべての値とグラフの読み取り専用の基底: getValue、interpolate、リスナー。
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })入力範囲から出力範囲への動く対応付け。easing と、extend・clamp・identity の外挿を指定できます。
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);1 つ以上の入力に対する、純粋で読み取り専用の計算。これを使う出力は JavaScript で動きます。
ガイド: 値と styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });普通の数値に対して補間を一度だけ評価します。
ガイド: 値と styleadd
add(...inputs);数値と値の和。
ガイド: 値と stylesubtract
subtract(a, b);2 つの入力の差。
ガイド: 値と stylemultiply
multiply(...inputs);数値と値の積。
ガイド: 値と styledivide
divide(a, b);2 つの入力の商。
ガイド: 値と stylemodulo
modulo(a, b);一周して戻る値。たとえば終わりのない回転に。
ガイド: 値と stylediffClamp
diffClamp(input, min, max);入力の変化に追従しつつ、範囲内に収まります。スクロールで隠れるヘッダーに便利です。
ガイド: 値と styleReact フック
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)コンポーネントの寿命の間、数値か数値レコードを持ちます。style の中では CSS 変数です。
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)値と、そのファクトリーで宣言したすべてのコントローラー・入力・出力を所有します。開始し、依存値が変わると再開し、後片付けもします。
ガイド: 値と styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)2 次元の値を丸ごと持ちます。
ガイド: 値と styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringcalc() 式にできない派生ノードに、コンポーネントと同じ寿命の専用の CSS 変数を与えます。
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)ノードや ValueXY が変わるたびに関数を呼びます。アンマウント時に外されます。
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })フックで登場と退場を扱うための { mounted, animatedValue } を返します。
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;配下のフックの値に、デフォルトの CSS 変数のスコープを設定します。
ガイド: 値と styleflushAnimatedUpdates
flushAnimatedUpdates();決定的なテストのために、保留中の出力を同期的に適用します。
ガイド: 値と styleドライバー、組み合わせ、タイムライン
timing
timing(value, { toValue, duration?, delay?, easing? })決まった時間をかけて、イージングカーブに沿って値を動かします。
ガイド: タイミング、スプリング、組み合わせspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })スプリングの物理で値を動かし、中断したモーションの速度を引き継ぎます。
ガイド: タイミング、スプリング、組み合わせdecay
decay(value, { velocity, deceleration? })速度を持って始まり、減速していきます。
ガイド: タイミング、スプリング、組み合わせdelay
delay(ms);待つだけのコントローラー。
ガイド: タイミング、スプリング、組み合わせsequence
sequence([a, b, c]);コントローラーを順番に実行します。
ガイド: タイミング、スプリング、組み合わせparallel
parallel([a, b], { stopTogether? }?)コントローラーを同時に実行します。
ガイド: タイミング、スプリング、組み合わせstagger
stagger(ms, [a, b, c]);一定の間隔をあけて、コントローラーを順に開始します。
ガイド: タイミング、スプリング、組み合わせloop
loop(animation, { iterations?, resetBeforeIteration? }?)コントローラーを指定回数、または無限に繰り返します。
ガイド: タイミング、スプリング、組み合わせkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)省略可能な時刻と繰り返しを使って、ひとつの値を複数の数値へ順に動かします。
ガイド: タイミング、スプリング、組み合わせEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)React Native と同じカーブ: linear、quad、cubic、sin、circle、exp、elastic、back、bounce、bezier と in/out のヘルパー。
ガイド: タイミング、スプリング、組み合わせcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)React の外で使う、名前付きのトラックを持つシークできるクロック。
ガイド: タイミング、スプリング、組み合わせuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)コンポーネントが所有するタイムライン。トラックは普通の style でそのまま使えます。
ガイド: タイミング、スプリング、組み合わせコンポーネントとレイアウト
Animated
<Animated.div seed pose tempo respond depart move />;Animated.div などの HTML・SVG ホストと、React Native の名前で使えるコア関数の名前空間。
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)ref 転送コンポーネントが Animated ホストの props を受け付けるようにします。
ガイド: Animated コンポーネントAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>ポーズ名、tempo、アニメーションのデフォルトを、内側の Animated 要素と共有します。
ガイド: Animated コンポーネントAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>key 付きの子要素を、退場が終わるまでマウントしたままにします。
ガイド: Animated コンポーネントAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>move 要素のレイアウト変化をアニメーションし、同じ識別子を持つ要素どうしをつなぎます。
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }ほかのレンダラー向けの、同じキャプチャーとコミットによるレイアウトの協調。
ガイド: Animated コンポーネントuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)制御されたリストを、ポインターとキーボードで 1 軸に沿って並べ替えます。
ガイド: Animated コンポーネント入力と接続
input
input(targetRef, adapter, onEvent?)入力アダプターを、所有されるコントローラーとして要素に取り付けます。
ガイド: 入力とジェスチャーfollow
follow(target, source, { stiffness?, damping?, mass? }?)ある値を別の値にスプリングで追従させます。
ガイド: 入力とジェスチャーconnect
connect(node, (value) => write(value));ノードが変わるたびに関数へ送ります。
ガイド: 入力とジェスチャーevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);React Native と同じく、入れ子になったイベントデータを値に対応付けます。
ガイド: 入力とジェスチャーdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })範囲、弾力のある端、慣性、settle を備えた、ポインターとキーボードのドラッグ。
ガイド: 入力とジェスチャーpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })2 本指のジェスチャーからの拡大率と回転。
ガイド: 入力とジェスチャーmoveInput
moveInput({ x?, y?, relative?, reset? })ポインターの座標。要素の中心からの相対座標にもできます。
ガイド: 入力とジェスチャーscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })要素、ページ、またはビューポートを通過する要素の、スクロール位置と進み具合。
ガイド: 入力とジェスチャーwheelInput
wheelInput({ x?, y? })ホイールの移動量。
ガイド: 入力とジェスチャーviewportInput
viewportInput({ root?, margin?, amount?, once? })要素がビューポート内にあるかどうか。
ガイド: 入力とジェスチャーmediaInput
mediaInput('(min-width: 768px)');メディアクエリーに一致するかどうか。
ガイド: 入力とジェスチャーlongPressInput
longPressInput({ delay?, threshold? })一定時間が経ち、移動量がしきい値以内のまま押され続けているポインター。
ガイド: 入力とジェスチャーswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })スワイプの方向、距離、速度。
ガイド: 入力とジェスチャー出力と診断
bind
bind(element, style) → { update, inspect, dispose }React の外で Animated のスタイルを要素に結び付けます。update、inspect、dispose を返します。
inspect
inspect(element) → [{ property, driver, reason }]要素のアニメーションしている各プロパティの再生経路と、フォールバックの理由。
ガイド: パフォーマンスと再生output
output(targetRef, { style?, attributes?, properties?, text? })useAnimated の中で、style、属性、テキスト、プロパティへの出力を所有します。
bindOutput
bindOutput(target, mapping) → { flush, dispose }出力のマッピングをすぐに取り付けます。flush と dispose を返します。