How to display animation while moving a sprite?

Question

I'm using anim8 library, and referenced his answer to a similar problem, but I still don't grab how to make my animations trigger when I press a key to walk/move:

-- main.lua
local anim8 = require('lib.anim8.anim8')
local player, animation, g

function love.load()
  player = {}
  player.spritesheet = love.graphics.newImage('sprites/hero.png')
  player.x = 200
  player.y = 200
  player.speed = 50

  g = anim8.newGrid(16, 24, player.spritesheet:getWidth(),
    player.spritesheet:getHeight())

  animation = anim8.newAnimation('loop', g('1-8,1-5'), 1.0)
end

function love.update(dt)
   animation:update(dt)

   if love.keyboard.isDown("w") then 
      animation = anim8.newAnimation('loop', g('4-6,1'), 0.1)   
    player.y = player.y - player.speed * dt
   elseif love.keyboard.isDown("s") then 
    player.y = player.y + player.speed * dt
    animation = anim8.newAnimation('loop', g('1-3,1'), 0.1) 
   elseif love.keyboard.isDown("a") and player.x > 0 then 
    player.x = player.x - player.speed * dt
    animation = anim8.newAnimation('loop', g('7-8,1'), 0.1) 
   elseif love.keyboard.isDown("d") and player.x < 10000 then
    player.x = player.x + player.speed * dt
    animation = anim8.newAnimation('loop', g('4,2'), 0.1)   
   end

 end


function love.draw()
   animation:draw(player.spritesheet, player.x, player.y)
end

Currently, what's happening is the sprite would move up,down,left,right, but the animation freezes when I hold onto the [respective] keyboard key, and continues after I release the keyboard key.

Answer 1

You are creating animations on each frame. Instead of doing that, you should create them once (in love.load, for example) and then reuse them inside love.update.

local anim8 = require('lib.anim8.anim8')
local player

function love.load()
  local spritesheet = love.graphics.newImage('sprites/hero.png');
  local g = anim8.newGrid(16, 24, spritesheet:getWidth(), spritesheet:getHeight())

  player = {
    spritesheet = spritesheet,
    x = 200,
    y = 200,
    speed = 50,
    animations = {
      up = anim8.newAnimation('loop', g('4-6,1'), 1.0),
      down = anim8.newAnimation('loop', g('1-3,1'), 1.0),
      left = anim8.newAnimation('loop', g('7-8,1'), 1.0),
      right =  anim8.newAnimation('loop', g('4,2'), 1.0)
    }
  }
  player.animation = player.animations.down -- player starts looking down
end

function love.update(dt)
  if love.keyboard.isDown("w") then 
    player.y = player.y - player.speed * dt
    player.animation = player.animations.up
  elseif love.keyboard.isDown("s") then 
    player.y = player.y + player.speed * dt
    player.animation = player.animations.down
  elseif love.keyboard.isDown("a") and player.x > 0 then 
    player.x = player.x - player.speed * dt
    player.animation = player.animations.left
  elseif love.keyboard.isDown("d") and player.x < 10000 then
    player.x = player.x + player.speed * dt
    player.animation = player.animations.right
  end
  player.animation:update(dt)
end

function love.draw()
  player.animation:draw(player.spritesheet, player.x, player.y)
end

function love.keypressed(key) 
   if love.keyboard.isDown("escape") then
     love.event.quit("quit")
    end
end