@ue-too/animate / index / CompositeAnimation

クラス: CompositeAnimation

定義: composite-animation.ts:113

Container for sequencing and composing multiple animations.

Remarks

CompositeAnimation allows you to orchestrate complex animation sequences by:

• Sequencing: Add animations to play one after another
• Overlapping: Start animations before previous ones complete
• Synchronizing: Play multiple animations simultaneously
• Nesting: Compose animations contain other composite animations

Key Features

• Add animations at specific time offsets
• Position animations relative to other animations (addAnimationAfter, addAnimationBefore)
• Automatic duration calculation based on child animations
• Hierarchical composition for complex sequences
• Prevent cyclic animation dependencies

例

Basic sequence

const sequence = new CompositeAnimation();

// Add first animation at start (time 0)
sequence.addAnimation('fadeIn', fadeAnimation, 0);

// Add second animation after first completes
sequence.addAnimationAfter('slideIn', slideAnimation, 'fadeIn');

// Add third animation to overlap with second (100ms after second starts)
sequence.addAnimationAdmist('scaleUp', scaleAnimation, 'slideIn', 100);

sequence.start();

実装

• Animator
• AnimatorContainer

コンストラクター

コンストラクター

new CompositeAnimation(animations, loop, parent, setupFn, tearDownFn): CompositeAnimation

定義: composite-animation.ts:132

パラメータ

animations

Map<string, { animator: Animator; startTime?: number; }> = ...

loop

boolean = false

parent

AnimatorContainer | undefined

setupFn

Function = ...

tearDownFn

Function = ...

戻り値

CompositeAnimation

アクセッサー

delay

署名を取得する

get delay(): number

定義: composite-animation.ts:540

戻り値

number

署名を設定する

set delay(delayTime): void

定義: composite-animation.ts:533

パラメータ

delayTime

number

戻り値

void

の実装

Animator.delay

---

drag

署名を取得する

get drag(): number

定義: composite-animation.ts:551

戻り値

number

署名を設定する

set drag(dragTime): void

定義: composite-animation.ts:544

パラメータ

dragTime

number

戻り値

void

の実装

Animator.drag

---

duration

署名を取得する

get duration(): number

定義: composite-animation.ts:338

戻り値

number

署名を設定する

set duration(duration): void

定義: composite-animation.ts:342

パラメータ

duration

number

戻り値

void

の実装

Animator.duration

---

loops

署名を取得する

get loops(): boolean

定義: composite-animation.ts:590

戻り値

boolean

署名を設定する

set loops(loop): void

定義: composite-animation.ts:594

パラメータ

loop

boolean

戻り値

void

の実装

Animator.loops

---

maxLoopCount

署名を取得する

get maxLoopCount(): number | undefined

定義: composite-animation.ts:683

戻り値

number | undefined

署名を設定する

set maxLoopCount(maxLoopCount): void

定義: composite-animation.ts:687

パラメータ

maxLoopCount

number | undefined

戻り値

void

の実装

Animator.maxLoopCount

---

playing

署名を取得する

get playing(): boolean

定義: composite-animation.ts:679

戻り値

boolean

の実装

Animator.playing

メソッド

addAnimation()

addAnimation(name, animation, startTime, endCallback): void

定義: composite-animation.ts:414

パラメータ

name

string

animation

Animator

startTime

number = 0

endCallback

Function = ...

戻り値

void

---

addAnimationAdmist()

addAnimationAdmist(name, animation, admistName, delay): void

定義: composite-animation.ts:467

パラメータ

name

string

animation

Animator

admistName

string

delay

number

戻り値

void

---

addAnimationAfter()

addAnimationAfter(name, animation, afterName, delay): void

定義: composite-animation.ts:444

パラメータ

name

string

animation

Animator

afterName

string

delay

number = 0

戻り値

void

---

addAnimationBefore()

addAnimationBefore(name, animation, beforeName, aheadTime): void

定義: composite-animation.ts:488

パラメータ

name

string

animation

Animator

beforeName

string

aheadTime

number = 0

戻り値

void

---

animate()

animate(deltaTime): void

定義: composite-animation.ts:178

パラメータ

deltaTime

number

戻り値

void

の実装

Animator.animate

---

animateChildren()

animateChildren(deltaTime): void

定義: composite-animation.ts:234

パラメータ

deltaTime

number

戻り値

void

---

calculateDuration()

calculateDuration(): void

定義: composite-animation.ts:579

戻り値

void

---

checkCyclicChildren()

checkCyclicChildren(): boolean

定義: composite-animation.ts:598

戻り値

boolean

の実装

AnimatorContainer.checkCyclicChildren

---

checkTerminalAndLoop()

checkTerminalAndLoop(): void

定義: composite-animation.ts:201

戻り値

void

---

childShouldAnimate()

childShouldAnimate(animation, prevLocalTime): boolean

定義: composite-animation.ts:264

パラメータ

animation

animator

Animator

startTime?

number

prevLocalTime

number

戻り値

boolean

---

clearOnEnd()

clearOnEnd(): void

定義: composite-animation.ts:671

戻り値

void

の実装

Animator.clearOnEnd

---

clearOnStart()

clearOnStart(): void

定義: composite-animation.ts:675

戻り値

void

の実装

Animator.clearOnStart

---

containsAnimation()

containsAnimation(animationInInterest): boolean

定義: composite-animation.ts:627

パラメータ

animationInInterest

Animator

戻り値

boolean

の実装

AnimatorContainer.containsAnimation

---

detachParent()

detachParent(): void

定義: composite-animation.ts:174

戻り値

void

の実装

Animator.detachParent

---

forceToggleLoop()

forceToggleLoop(loop): void

定義: composite-animation.ts:620

パラメータ

loop

boolean

戻り値

void

---

getTrueDuration()

getTrueDuration(): number

定義: composite-animation.ts:396

戻り値

number

---

nonCascadingDuration()

nonCascadingDuration(newDuration): void

定義: composite-animation.ts:367

パラメータ

newDuration

number

戻り値

void

の実装

Animator.nonCascadingDuration

---

onEnd()

onEnd(callback): UnSubscribe

定義: composite-animation.ts:655

パラメータ

callback

Function

戻り値

UnSubscribe

の実装

Animator.onEnd

---

onStart()

onStart(callback): UnSubscribe

定義: composite-animation.ts:662

パラメータ

callback

Function

戻り値

UnSubscribe

の実装

Animator.onStart

---

pause()

pause(): void

定義: composite-animation.ts:305

戻り値

void

の実装

Animator.pause

---

removeAnimation()

removeAnimation(name): void

定義: composite-animation.ts:519

パラメータ

name

string

戻り値

void

---

removeDelay()

removeDelay(): void

定義: composite-animation.ts:555

戻り値

void

---

removeDrag()

removeDrag(): void

定義: composite-animation.ts:562

戻り値

void

---

resetAnimationState()

resetAnimationState(): void

定義: composite-animation.ts:389

戻り値

void

の実装

Animator.resetAnimationState

---

resume()

resume(): void

定義: composite-animation.ts:312

戻り値

void

の実装

Animator.resume

---

setParent()

setParent(parent): void

定義: composite-animation.ts:170

パラメータ

parent

AnimatorContainer

戻り値

void

の実装

Animator.setParent

---

setUp()

setUp(): void

定義: composite-animation.ts:400

戻り値

void

の実装

Animator.setUp

---

start()

start(): void

定義: composite-animation.ts:319

戻り値

void

の実装

Animator.start

---

stop()

stop(): void

定義: composite-animation.ts:328

戻り値

void

の実装

Animator.stop

---

tearDown()

tearDown(): void

定義: composite-animation.ts:407

戻り値

void

の実装

Animator.tearDown

---

toggleReverse()

toggleReverse(reverse): void

定義: composite-animation.ts:160

パラメータ

reverse

boolean

戻り値

void

の実装

Animator.toggleReverse

---

updateDuration()

updateDuration(): void

定義: composite-animation.ts:569

戻り値

void

の実装

AnimatorContainer.updateDuration

---

wrapUpAnimator()

wrapUpAnimator(animation, prevLocalTime): void

定義: composite-animation.ts:281

パラメータ

animation

animator

Animator

name

string

startTime?

number

prevLocalTime

number

戻り値

void