-
Notifications
You must be signed in to change notification settings - Fork 6
/
MObject.ts
72 lines (67 loc) · 2.05 KB
/
MObject.ts
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { animationTimeline } from '../Scene/controls';
export class MObject {
writeElement!: p5.Element; // <div> for animation
sentence: string; //input string as tex or text
x: number = 10;
y: number = 10;
fillColor: p5.Color;
_size: number; //px -> font size
constructor(sentence: string, x: number, y: number, _size: number) {
this.sentence = sentence;
this.x = x;
this.y = y;
this.fillColor = color('black');
this._size = _size;
}
moveTo(newX, newY, startTime, endTime) {
const object = this.writeElement;
const timeDuration = (endTime - startTime) * 1000;
const delayDuration = startTime * 1000;
const currCoord = {
currX: this.x,
currY: this.y
};
animationTimeline.add(
{
targets: currCoord, //[this.x, this.y],
currX: newX,
currY: newY,
//translateZ: 0,
easing: 'easeInOutCubic',
duration: timeDuration,
update: function (anim) {
this.x = currCoord.currX;
this.y = currCoord.currY;
object.position(this.x, this.y);
}
//delay: anime.stagger(CONFIG.PLAY.DISSOLVE_STAGGERING_DELAY)
//delay: anime.stagger(180, { start: timeDuration }) //time duration must be replaced with delay
},
delayDuration
);
}
resizeTo(newSize, startTime, endTime) {
const object = this.writeElement;
const timeDuration = (endTime - startTime) * 1000;
const delayDuration = startTime * 1000;
const Size = {
currSize: this._size
};
animationTimeline.add(
{
targets: Size, //[this.x, this.y],
currSize: newSize,
//translateZ: 0,
easing: 'easeInOutCubic',
duration: timeDuration,
update: function (anim) {
object.style('font-size', `${this._size}px`);
this._size = Size.currSize;
}
//delay: anime.stagger(CONFIG.PLAY.DISSOLVE_STAGGERING_DELAY)
//delay: anime.stagger(180, { start: timeDuration }) //time duration must be replaced with delay
},
delayDuration
);
}
}