We are proud to announce the release of Antetype 1.6.1. The release is a simultaneous…
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).
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:
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).
If you need more information on how to build a drawer menu in Antetype, please refer to the following tutorial:
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.
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.
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.
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.
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.
Within this beta version, there are a couple of limitations for using the animations. Find them listed here:
We are really looking forward to your feedback on our animations! Please do get in contact if you have questions via email@example.com