-
-
Notifications
You must be signed in to change notification settings - Fork 569
Custom Animation
Jakub T. Jankiewicz edited this page Jan 9, 2022
·
7 revisions
You can create custom Text-based animation like this:
term.echo('<Some String>');
var index = term.last_index();
var timer = setInterval(() => {
if (shoultStop) {
clearInterval(timer);
} else {
term.update(index, '<ANIMATION STEP>');
}
}, delay);
You can create an abstraction over animation with a class and renderHandler
:
var animation = false;
var term = $('body').terminal(function(command) {
return new TextAnimation(command);
}, {
renderHandler(obj) {
if (obj instanceof TextAnimation) {
obj.start(this);
return false;
}
},
keydown: () => animation ? false : undefined
});
class TextAnimation {
constructor(string) {
this._string = string;
}
forward() {
// create next frame
}
shouldStop(string) {
return string === this._origin;
}
start(term) {
animation = true;
term.echo(this.toString());
var index = term.last_index();
var timer = setInterval(() => {
this.forward();
var newString = this.toString();
if (this.shouldStop(newString)) {
clearInterval(timer);
animation = false;
}
term.update(index, newString);
}, delay);
}
toString() {
// render frame
}
}
See CodePen Demo
Library for Web-Based Terminal in JavaScript, (jQuery Terminal: git repo)
Copyright (c) 2011-2023 Jakub T. Jankiewicz