@ue-too/animate / index / Animation

クラス: Animation<T>

定義: composite-animation.ts:740

Keyframe-based animation for a single value.

Remarks

The Animation class interpolates a value through a series of keyframes over time. It handles:

• Keyframe interpolation with binary search for efficiency
• Easing functions for smooth motion curves
• Reverse playback
• Looping with optional max loop count
• Delays before start and drag time after completion
• Lifecycle callbacks

How It Works

1. Define keyframes at percentages (0.0 to 1.0) along the timeline
2. Provide a callback to apply the animated value
3. Provide an interpolation helper for the value type
4. Call animate(deltaTime) each frame to progress the animation

例

Animating a number with easing

let opacity = 0;

const fadeIn = new Animation(
  [
    { percentage: 0, value: 0 },
    { percentage: 1, value: 1, easingFn: (t) => t * t } // Ease-in
  ],
  (value) => { opacity = value; },
  numberHelperFunctions,
  1000 // 1 second duration
);

fadeIn.start();

// In animation loop
function loop(deltaTime: number) {
  fadeIn.animate(deltaTime);
  element.style.opacity = opacity;
}

型パラメーター

T

T

The type of value being animated

実装

• Animator

コンストラクター

コンストラクター

new Animation<T>(keyFrames, applyAnimationValue, animatableAttributeHelper, duration, loop, parent, setUpFn, tearDownFn, easeFn): Animation<T>

定義: composite-animation.ts:766

パラメータ

keyFrames

Keyframe<T>[]

applyAnimationValue

(value) => void

animatableAttributeHelper

AnimatableAttributeHelper<T>

duration

number = 1000

loop

boolean = false

parent

AnimatorContainer | undefined

setUpFn

Function = ...

tearDownFn

Function = ...

easeFn

(percentage) => number

戻り値

Animation<T>

アクセッサー

delay

署名を取得する

get delay(): number

定義: composite-animation.ts:1102

戻り値

number

署名を設定する

set delay(delayTime): void

定義: composite-animation.ts:1106

パラメータ

delayTime

number

戻り値

void

の実装

Animator.delay

---

drag

署名を取得する

get drag(): number

定義: composite-animation.ts:1113

戻り値

number

署名を設定する

set drag(dragTime): void

定義: composite-animation.ts:1117

パラメータ

dragTime

number

戻り値

void

の実装

Animator.drag

---

duration

署名を取得する

get duration(): number

定義: composite-animation.ts:1054

戻り値

number

署名を設定する

set duration(duration): void

定義: composite-animation.ts:1058

パラメータ

duration

number

戻り値

void

の実装

Animator.duration

---

easeFunction

署名を取得する

get easeFunction(): (percentage) => number

定義: composite-animation.ts:1156

戻り値

(percentage): number

パラメータ

percentage

number

戻り値

number

署名を設定する

set easeFunction(easeFn): void

定義: composite-animation.ts:1160

パラメータ

easeFn

(percentage) => number

戻り値

void

---

keyFrames

署名を取得する

get keyFrames(): Keyframe<T>[]

定義: composite-animation.ts:1152

戻り値

Keyframe<T>[]

署名を設定する

set keyFrames(keyFrames): void

定義: composite-animation.ts:1143

パラメータ

keyFrames

Keyframe<T>[]

戻り値

void

---

loops

署名を取得する

get loops(): boolean

定義: composite-animation.ts:1046

戻り値

boolean

署名を設定する

set loops(loop): void

定義: composite-animation.ts:1050

パラメータ

loop

boolean

戻り値

void

の実装

Animator.loops

---

maxLoopCount

署名を取得する

get maxLoopCount(): number | undefined

定義: composite-animation.ts:1196

戻り値

number | undefined

署名を設定する

set maxLoopCount(maxLoopCount): void

定義: composite-animation.ts:1200

パラメータ

maxLoopCount

number | undefined

戻り値

void

の実装

Animator.maxLoopCount

---

playing

署名を取得する

get playing(): boolean

定義: composite-animation.ts:824

戻り値

boolean

の実装

Animator.playing

---

trueDuration

署名を取得する

get trueDuration(): number

定義: composite-animation.ts:1124

戻り値

number

署名を設定する

set trueDuration(duration): void

定義: composite-animation.ts:1128

パラメータ

duration

number

戻り値

void

メソッド

animate()

animate(deltaTime): void

定義: composite-animation.ts:828

パラメータ

deltaTime

number

戻り値

void

の実装

Animator.animate

---

clearOnEnd()

clearOnEnd(): void

定義: composite-animation.ts:1188

戻り値

void

の実装

Animator.clearOnEnd

---

clearOnStart()

clearOnStart(): void

定義: composite-animation.ts:1192

戻り値

void

の実装

Animator.clearOnStart

---

detachParent()

detachParent(): void

定義: composite-animation.ts:1139

戻り値

void

の実装

Animator.detachParent

---

findValue()

findValue(valuePercentage, keyframes, animatableAttributeHelper): T

定義: composite-animation.ts:957

パラメータ

valuePercentage

number

keyframes

Keyframe<T>[]

animatableAttributeHelper

AnimatableAttributeHelper<T>

戻り値

T

---

nonCascadingDuration()

nonCascadingDuration(newDuration): void

定義: composite-animation.ts:1075

パラメータ

newDuration

number

戻り値

void

の実装

Animator.nonCascadingDuration

---

onEnd()

onEnd(callback): UnSubscribe

定義: composite-animation.ts:1164

パラメータ

callback

Function

戻り値

UnSubscribe

の実装

Animator.onEnd

---

onStart()

onStart(callback): UnSubscribe

定義: composite-animation.ts:1171

パラメータ

callback

Function

戻り値

UnSubscribe

の実装

Animator.onStart

---

onStartAfterDelay()

onStartAfterDelay(callback): UnSubscribe

定義: composite-animation.ts:1180

パラメータ

callback

Function

戻り値

UnSubscribe

---

pause()

pause(): void

定義: composite-animation.ts:816

戻り値

void

の実装

Animator.pause

---

resetAnimationState()

resetAnimationState(): void

定義: composite-animation.ts:1089

戻り値

void

の実装

Animator.resetAnimationState

---

resume()

resume(): void

定義: composite-animation.ts:820

戻り値

void

の実装

Animator.resume

---

setParent()

setParent(parent): void

定義: composite-animation.ts:1135

パラメータ

parent

AnimatorContainer

戻り値

void

の実装

Animator.setParent

---

setUp()

setUp(): void

定義: composite-animation.ts:1037

戻り値

void

の実装

Animator.setUp

---

start()

start(): void

定義: composite-animation.ts:801

戻り値

void

の実装

Animator.start

---

stop()

stop(): void

定義: composite-animation.ts:809

戻り値

void

の実装

Animator.stop

---

tearDown()

tearDown(): void

定義: composite-animation.ts:1042

戻り値

void

の実装

Animator.tearDown

---

toggleReverse()

toggleReverse(reverse): void

定義: composite-animation.ts:797

パラメータ

reverse

boolean

戻り値

void

の実装

Animator.toggleReverse

---

wrapUp()

wrapUp(): void

定義: composite-animation.ts:1096

戻り値

void