How To Make Animations In A CLI App

While working on my 1st project at flatiron I wanted to liven it up a bit with some CLI animations.

What Is A CLI Animation?

Simply put, a CLI (Command Line Interface) is moving ascii art that lives inside the terminal.

Boxer Animation

How To Do This

• Find the gif that you want to use and save it locally
• Split the gif into smaller gif instances https://ezgif.com/split

Split animated GIF image in frames (free online tool)

• Save your now split gif instances locally
• Create a folder in the project to store and save each gif instance
• Create a file within the gif folder for each gif instance. Start the naming convention from the number “0” and work up from there
• Convert each gif instance into ascii art https://www.text-image.com/convert/ascii.html

TEXT-IMAGE.com :: Convert

• Copy and paste the ascii text in the gif file that corresponds to that specific gif instance

Important! put a puts “ “ in the beginning of each file and paste the ascii art within the “puts” statement otherwise the ascii art will get cut off (the “puts” can be deleted after the ascii is pasted properly within the file .)

Making the animation

Create a file within your project library called “animation.rb.” (this is where the animation will live.)

#example code of what the file should look like
def animation
  10.times do #however many times you want it to go for
  i = 1
    while i < 20 #20 gif instances starting from 0
      print "\033[2J" 
                 #the folder path     #the iterating file 
                             |               |     
       File.foreach("project/cli_animation/#{i}.rb") { |f| puts f }
      sleep(0.05) #how long it is displayed for
      i += 1
    end
  end
end

If done successfully, you should have a really cool animation to show off.

Something like this