Add loop and default props

[chriscerie]

Loop prop

Use loop = true to repeat an animation.

-- Transparency repeatedly animates from 0 to 1
local styles = RoactSpring.useSpring(hooks, {
    from = { transparency = 0 },
    to = { transparency = 1 },
    loop = true,
})

The loop function

Pass a function to be called after each loop. Return true to continue looping, or false to stop.

-- Transparency animates from 0 to 1 three times
local count = hooks.useValue(0)
local styles = RoactSpring.useSpring(hooks, {
    from = { transparency = 0 },
    to = { transparency = 1 },
    loop = function()
        count += 1
        return 3 > count.value
    end,
})

The loop table

Define a loop table to customize the loop animation separately from the initial animation. It may contain any of the useSpring props. For example, if delay: 1 is used, the loop animation will delay for 1 second on each loop.

-- Transparency repeatedly animates from 0 to 1 with 1 second delays
local count = hooks.useValue(0)
local styles = RoactSpring.useSpring(hooks, {
    from = { transparency = 0 },
    to = { transparency = 1 },
    loop = { delay = 1, reset = true },
})

Inherited props

The loop object is always merged into a copy of the props object it was defined in. The following example shows a loop animation that inherits its config prop.

-- The loop doesn't run more than once
local styles = RoactSpring.useSpring(hooks, {
    from = { transparency = 0 },
    loop = {
        transparency = 1,
    },
})

⚠️ The loop doesn't run more than once. That's because some props are never inherited. These props include default, reset, and reverse

To loop the animation, try adding reset = true to the loop prop in the above example. Alternatively, you could add from = { transparency: 1 } to get the same effect.

Lastly, try adding config = { friction: 5 } to the loop object. This overrides the inherited config.duration with a springy animation.

-- Transparency repeatedly animates from 0 to 1
local styles = RoactSpring.useSpring(hooks, {
    from = { transparency = 0 },
    loop = {
        transparency = 1,
        reset = true,
    },
})

-- Transparency repeatedly animates from 0 to 1
local styles = RoactSpring.useSpring(hooks, {
    from = { transparency = 0 },
    loop = {
        transparency = 1,
        from = { transparency = 1 },
    },
})

Closes #11