Termination NPM

Termination

Terminal animation done right!

Demo

Any contribution to demo section is very welcome. To add your demos, you can create a PR for /examples

Features

Promise based API
Transition tools
Built in easing transition functions
Animation can be paused, log some thing in console and then continue without touching original CLI logs

Installation

npm i termination

yarn add termination

Usage

These are some basic use cases, for complete API check API section

import { Animation } from 'termination';

// object frames
const cradleFrames = [
    '╔════╤╤╤╤════╗\n' +
    '║    │││ \\   ║\n' +
    '║    │││  O  ║\n' +
    '║    OOO     ║',

    '╔════╤╤╤╤════╗\n' +
    '║    ││││    ║\n' +
    '║    ││││    ║\n' +
    '║    OOOO    ║',

    '╔════╤╤╤╤════╗\n' +
    '║   / │││    ║\n' +
    '║  O  │││    ║\n' +
    '║     OOO    ║',

    '╔════╤╤╤╤════╗\n' +
    '║    ││││    ║\n' +
    '║    ││││    ║\n' +
    '║    OOOO    ║'
];

 
const stickmanFrames = [
`    
     O
     │
    / \\`,
`    
     O
     │
     |`,
`    
     O
     │
    / \\`,
]


// create animation instance
const animation = new Animation({
    fps: 30,
    maxSize: {
        width: 80,
        height: 10,
    }
});

// create objects
const cradle = animation.add({
    x: 0,
    y: 0,
    content: cradleFrames[0],
    replaceSpace: true,
    color: 'cyan'
});

let stickman = animation.add({
    x: -20,
    y: 0,
    content: stickmanFrames[0],
    replaceSpace: true,
    color: 'green'
});

// create content transition, can be useful
// if the object has different frames
// loop option means transtion will loop,
// loop interval is the interval between loops
const cradleFramesTransition = cradle.transition([
    {
        props: { content: cradleFrames[1] },
        duration: 300
    },
    {
        props: { content: cradleFrames[2] },
        duration: 300
    },
    {
        props: { content: cradleFrames[3] },
        duration: 300
    }
], { loop: true, loopInterval: 300 });

const stickmanFramesTransition = stickman.transition([
    {
        props: { content: stickmanFrames[1] },
        duration: 100
    },
    {
        props: { content: stickmanFrames[2] },
        duration: 100
    }
], { loop: true, loopInterval: 100 });

// create movement transition, check API section
// for available transition functions. You can also
// use any custom transition function
// alternate means it will repeat back and forth
const cradleMoveTransition = cradle.transition([
    {
        props: { x: 60 },
        duration: 1500,
        func: 'ease'
    }
], { loop: true, alternate: true }); 

const stickmanMoveTransition = stickman.transition([
    {
        props: { x: 80 },
        duration: 5000,
        func: 'linear'
    },
], {loop: true})

// start renering frames
animation.start();

// run transitions, this will return a promis that resolves 
// when transition is completed
cradleFramesTransition.run();
cradleMoveTransition.run();

// pause cradle movement transition
setTimeout(() => cradleMoveTransition.pause(), 2000);
// resume cradle movement transition
setTimeout(() => cradleMoveTransition.resume(), 4000);

// set stickman object props
setTimeout(() => stickman.update({x: 0, y: 0}), 5000);
// start stickman transitions
setTimeout(() => stickmanMoveTransition.run(), 6000);
setTimeout(() => stickmanFramesTransition.run(), 6000);



// pause animation
setTimeout(() => animation.pause(), 8000);
// resume animation
setTimeout(() => animation.resume(), 10000);

// update animation config
// set background character and color, 
// playback speed (creating slow motion effect) and fps
setTimeout(() => animation.config({
    fps: 60,
    speed: 0.5,
    bg: {char: '.', color: 'gray'}
}), 12000);

// end animation
setTimeout(() => animation.end(), 20000);

API

Class: Animation(options)

The base class for animation

options <Object>
- fps <number> frames per second, default is 30
- maxSize <Object>
  - height <number>
  - width <number>
- speed <number> playback speed
- bg <Object>
  - char <string> character to fill background, default is
  - color <string> background character color, default is white

Event: 'willrender'

emitted right before starting render calculations

Event: 'render'

emitted right after painting

Animation.config(options)

change animation configuration. options are same as Animation constructor

Animation.start()

start rendering animation frames

Animation.pause(options)

pause rendering animation frames

options <Object> - clear <boolean> if true, will remove animation canvas after pausing the animation
Animation.resume(options)
resume rendering animation frames
options <Object> - append <boolean> if true, will not clear animation canvas before resuming render
Animation.add(props)
add an object to animation
props <Object>
- x <number>
- y <number>
- content <string> object content
- color <string> object color, default is white
- replaceSpace <boolean> if true, spaces in content will be ignored. default is false
- visible <boolean>
Returns: <AnimationObject>
Animation.pauseAllTransitions()
pause all transitions
Animation.resumeAllTransitions()
resume all transitions
Animation.end(options)
end animation
options <Object>
- clear <boolean> if true, will remove animation canvas after pausing the animation

Class: AnimationObject

Each object in animation is an instance of this class

AnimationObject.update(props)

update object props

props <Object> - x <number> - y <number> - content <string> object content - color <string> object color, default is white - replaceSpace <boolean> if true, spaces in content will be ignored. default is false - visible <boolean>
AnimationObject.transition(steps, options)
create transition for object props
steps <array> array of step objects
- props <Object> object containing any valid object props
- duration <number> duration of transition to props of this step
options <Object>
- loop <boolean> | <number> if true, will loop forever. if number, will loop number times
- loopInterval <number> delay between loops
- alternate <boolean> if true, transition direction will be reversed after each cycle
Returns: <Transition>
AnimationObject.remove()
remove the object from animation

Class: Transition

Transition of any props of an object

Transition.run(callback)

start the transition, will return a promise that resolves once transition is finished

callback <Function>
Returns: <Promise>
Transition.pause()
Transition.resume()
Transition.end()
will end the transition. callback will be called and promise will resolve