Skip to content

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