-
Notifications
You must be signed in to change notification settings - Fork 0
/
lenisanimation.js
52 lines (43 loc) · 1.43 KB
/
lenisanimation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { clamp, damp } from './maths'
// Animate class to handle value animations with lerping or easing
export class Animate {
// Advance the animation by the given delta time
advance(deltaTime) {
if (!this.isRunning) return
let completed = false
if (this.lerp) {
this.value = damp(this.value, this.to, this.lerp * 60, deltaTime)
if (Math.round(this.value) === this.to) {
this.value = this.to
completed = true
}
} else {
this.currentTime += deltaTime
const linearProgress = clamp(0, this.currentTime / this.duration, 1)
completed = linearProgress >= 1
const easedProgress = completed ? 1 : this.easing(linearProgress)
this.value = this.from + (this.to - this.from) * easedProgress
}
// Call the onUpdate callback with the current value and completed status
this.onUpdate?.(this.value, { completed })
if (completed) {
this.stop()
}
}
// Stop the animation
stop() {
this.isRunning = false
}
// Set up the animation from a starting value to an ending value
// with optional parameters for lerping, duration, easing, and onUpdate callback
fromTo(from, to, { lerp = 0.1, duration = 1, easing = (t) => t, onUpdate }) {
this.from = this.value = from
this.to = to
this.lerp = lerp
this.duration = duration
this.easing = easing
this.currentTime = 0
this.isRunning = true
this.onUpdate = onUpdate
}
}