Antetype 2.0 Beta 1 – Animations and Onions… ehm, Layers

ogres and onions

“Ogres are like onions – they stink? Nooo, they have layers…”

This shortened citation from the first Shrek movie gives you an indication on why we didn’t release a lot of updates recently as you have been used to before.

And no, it wasn’t because we watched the Shrek trilogy over and over again ;)

For our big update for version 2.0 introducing UI Animations, we wanted to take the opportunity to make Antetype more future proof. The main thing has been so far, to completely re-write our drawing algorithms for objects in Antetype – a change, that will hopefully not be visible at all ;)

This has however a couple of advantages for us, especially regarding the performance of re-drawing elements when we animate properties of a cell or change dimensions of a screen. This will also enable us in the future to have some more cool options with our objects (e.g. blur effects on cell level and many more to come).

User Interface Animations

Our cool new feature for version 2.0 will be UI Animations and a rework of the interactions within Antetype – within this beta version, you’ll find a first glimpse of the possibilities you can do with it.

Within this first beta version, you can basically define for every state change of a widget, how this change can be animated. For example, let’s imagine you have a drawer menu in a mobile app and you want it to slide from left to right when opening it. This is how you can achieve this in the new beta version of Antetype:

User-Interface-Animations User-Interface-Animations-Menu

Setting the States

In our example file, the drawer menu has two states – ‘Collapsed’ and ‘Normal’. In collapsed mode, the widget uses the width property of zero pixel and in the normal mode, it uses the width of 279 pixels (Please note: try to use the size property set to zero instead of the collapsed property as this might not give you an expected result within the beta version).

width-0 width-1

If you need more information on how to build a drawer menu in Antetype, please refer to the following tutorial:

Define the Animation

As soon as the states for a widget are defined, you can switch to the interaction tab to define whether and how this state change should be animated.

interaction-inspector

Here you will find the states listed for the widget and you can enable or disable them via the checkbox in the front and the following elements allow you to define the type and duration of the animation.

animation-options

Set the interaction triggering the state change

What is missing for our drawer menu to be animated now, is to set an interaction to any object on the screen to trigger the state change of our drawer menu widget. I our case, we want to place the trigger on the little ‘burger’ icon in the top left part of the main screen.

Set-the-interaction-triggering-the-state-change

And that’s it because Antetype does the rest for you. It now creates a tween animation between the two different states you created within the steps above. To check out the animation, just go to the in-place presentation mode and click on the little ‘burger’ icon.

Example file

The above example is only a little excerpt from our little example file. We’ve added the file to our Antetype Community Cotype so that you can give the file a try and see how we created the animations within the file. Opening the file in the In-Place Presentation Mode should give you an overview of the possible things you can do.

Known limitations for the beta version

Within this beta version, there are a couple of limitations for using the animations. Find them listed here:

  • Not available in fullscreen presentation mode, iOS or web viewer yet
  • There is a slight colour discrepancy when switching into in-place presentation mode when a calibrated second monitor is connected.
  • smaller animation errors regarding borders
  • If you use the “Direct” cursor in the In-Place Presentation mode to edit your file, all changes to objects will be animated as well and they might behave a bit quirky
  • … and as for every beta version, there might be more ;)

We are really looking forward to your feedback on our animations! Please do get in contact if you have questions via support@antetype.com

One Response to Antetype 2.0 Beta 1 – Animations and Onions… ehm, Layers

  • tobybridson says on March 5, 2016 at 15:24

    I think you should be releasing more regular beta updates, nightly builds if possible.

Leave a Reply