Using the Animation object
Next up: the object.
For this example, we start with a green square placed 200 points left of the center:
greenSquare = new Layer borderRadius: 20 backgroundColor: "rgb(125,221,17)" x: Align.center -200 y: Align.center
We then create an Animation object. It’s an object (just like a layer), so you create it with the
Animation, you have to add the layer you want to animate, followed by a comma (
# move greenSquare 400 points to the right # while rotating it 180 degrees move = new Animation greenSquare, x: greenSquare.x + 400 rotation: 180 options: time: 2
The rest works the same as the animate() function: you set the properties you want to animate to, and settings like
curve, etc. go under
In this example, we’ll be moving the square 400 points to the right while rotating it 180 degrees.
Then, to trigger the animation, we call
start() on our animation object, like this:
But most often you’ll trigger an animation with an event, like a tap or click on the layer.
# start ‘move’ when ‘greenSquare’ is tapped greenSquare.onTap -> move.start()
Different animations that target the same layer
Say you would like the rotation to start later. You can do this by simply turning it into a separate animation object with a different timing.
# move greenSquare 400 points to the right move = new Animation greenSquare, x: greenSquare.x + 400 options: time: 2
# rotate greenSquare 180 degrees # after a delay of half a second rotate = new Animation greenSquare, rotation: 180 options: delay: .5
rotate animation has a delay of half a second but will still finish before the
move animation, because of its (default) duration of one second.
# start both ‘move’ and ‘rotate’ when tapped greenSquare.onTap -> move.start() rotate.start()
Different animation objects can be started on the same layer as long they don’t animate the same properties.
Here’s an example of what happens when you do trigger two animation objects that alter the same property at the same time. If we add an
x property to the
rotate = new Animation greenSquare, rotation: 180 x: greenSquare.x + 400 options: delay: .5
…it will override the
x animation in the
move animation object, resulting in the rotation and slide animations running simultaneously (after
rotate’s 0.5-second delay).
Starting and stopping an animation
start() there’s also
In this example, we’re using two new events:
onTouchStart triggers when you press down, and
onTouchEnd when you release.
The events are attached to
Framer.Device.screen, so that you can tap anywhere:
# Press anywhere to start Framer.Device.screen.onTouchStart -> move.start() # Release to stop Framer.Device.screen.onTouchEnd -> move.stop()
Press down to
start() the animation, release to
You’ll notice that the animation moves slower every time you start it anew. This is because an animation will always begin from its current properties and will animate for the whole of its duration (in this case, two seconds) to the new properties.
Pro tip: Use
restart() to have an animation always start with the same properties.
# Press anywhere to start Framer.Device.screen.onTouchStart -> # always start the same move.restart()
Reversing an animation
reverse() function does just one thing, but it does it well. It creates a new animation object that’s exactly the opposite of the object you called it on.
# create a reverse of ‘move’ moveBack = move.reverse()
We’ll trigger this new animation two seconds later so that it’ll start directly after
# start ‘move’ move.start() # start ‘moveBack’ after 2 seconds Utils.delay 2, -> moveBack.start()
Pro tip: You can create the reverse animation and directly trigger it, like this:
# start a reverse animation after 2 seconds Utils.delay 2, -> move.reverse().start()
This way you don’t even have to create
But wouldn’t it be nice if we didn’t have to count two seconds, and instead could just say “Start that animation, when this one ends.”? Well, we can, with the animation events.