Skip to content

Latest commit

 

History

History
347 lines (278 loc) · 9.78 KB

README.md

File metadata and controls

347 lines (278 loc) · 9.78 KB
Raw

Termination npm-shield

Terminal animation done right!

Demo

The Man

Source Code

2022-01-12_1-15-20.mp4

Packman

Source Code

2022-01-12_1-17-09.mp4

Newton Cradle

Source Code

cradleman.mp4

Easing Transition

Source Code

balls.mp4

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

or

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

Contribution

Any contribution is welcome. Especially for Readme and Demos. To see the list of priority features, check here