Image Transition

Image Transition

The image transition is a beautiful effect in Material-Design used to make Images appear, it is similar to a fade-in but more complex and looks more realistic.

Note: This is not the exact color modification Google specifies, but a similar effect.

This is done through a shader, but don't worry, computers that don't support shaders get a simple fade-in effect instead of this one.

##Usage

To use this library just require image.lua in your project, this returns a table with two functions, plus the shader string that can be found in image.shader.

The first function is image.draw this function handles drawing an image with the proper transition

image.draw(image, time, x, y, rotation, sx, sy)

• image: The Image you want to apply the effect to.
• time: The time elapsed, a number from 0 to 1, 0 is the beginning while 1 is completed transition.
• x,y: The image position in screen.
• `rotation: The rotation angle (in radians).
• sx,sy: The scale at which the image will be drawn in the x axis and the y axis.

This lets you control all the variables of the draw operation, if you want a simpler method use image:new which returns an ImageObject with update, reset and draw methods.

love.load = function ()
    local img = require "material-love.libs.image"
    image = love.graphics.newImage("myasset")
    transition = img.new(image)
end

love.update = function (dt)
    transition:update(dt)
end

love.draw = function ()
    transition:draw(x,y,rotation,sx,sy)
end

The x, y, rotation, sx and sy arguments are the same as the previous function. Most of them can be ignored (except for x and y).

Files

The only file needed is libs/image.lua