Animation in mobile applications. We test Kite compositor

In 2017, the program Kite compositor for MacOS was released, which can become an intermediary between designers and developers. The main idea is the rapid creation of animation and prototyping with the subsequent generation of code for the iOS platform. We will not dwell on the structure of the program, there is already a detailed material on this subject. The purpose of this article is an experiment. The designer will try to create an animation using the program, and the developers will check the code and give feedback.

The program will help solve two problems of animation.

The first - the production of successful cases is expensive. Application animation is now developing very rapidly: dribbble and Behans are inundated with beautiful gifs with examples and new types of interactions. However, not many applications can boast of successful implementation of animation. Customers usually emphasize functionality and intelligent interaction logic. In this regard, funding for additional modifications such as animations and other features is cut or postponed.
')
The second barrier is communication. Practice shows that designers use words, gestures, sounds and interjections, in rare cases, gifs, to describe the final result. Then the developers try to pick up and sort out all the possible tools available to implement the idea. GIF saves a little time, but it still does not help in determining the exact parameters and properties of the animation. Repeated and energy-intensive process often leads to the rejection of custom animation.

Animation script

The program interface is somewhat similar to Adobe AfterEffects. There is a timeline on which the applied effects are displayed, a window with layers, settings and types of effects. There is a field of work that can be changed to standard device sizes.


Program interface

We do not have a goal to study in detail the capabilities of the program, so we do not plan supernatural animation. Let's try to recreate from scratch a simple scenario of user interaction with the interface. The script is:

1. The user on the map enters the name of the place
2. Pin is displayed on the map
3. Click (Action) on it
4. There is a brief information about the place
5. The user reveals a card (Action) in which the full information about the place appears.

Import Design

Create a design in Sketch, without closing the file in it, open the Kite compositor, select in the menu of the program Import - From Sketch. No plug-ins or add-ons need to be installed, everything is transferred automatically. Before importing to Kite compositor, create an artboard with the same parameters as the layout. In this case, the standard size of iPhone is 375x667.

Import was not very successful. Kite compositor could not display some layers (the shadow under the big plate), and some displays strange (the shadow of the pin moved off, and the frame with the editing area of ​​the shadow itself remained in place).


Display in the sketch layout (left) - there is a shadow, but in the Kite compositor (right) it is not transferred


Sketch (left) - the shadow is in place, in Kite compositor (right) - the shadow has moved, and the frame for its editing remains in place

In the process, another attempt was made to import into Kite compositor from Sketch, the result remained the same.

Moving on. When meeting with the possibilities of animation, the first thing I wanted to do was to transform the figures. For example, turn a triangle into a square and back. Unfortunately, this was not possible. The only available transformation of figures - from a circle to a square and back.

There is also an animation of the lines, which allowed us to do something like a snake.

Take the simple and familiar types of animation: opacity, transform.scale, transform.translation.


List of main animations

We hide all layers so that it is more convenient to work with them and less confused in the order of animation assignment. Then we open each layer in turn, add the desired effect to it, proceed to the next.

Particular attention should be paid to anchor points. They allow you to control where the animation will begin.



Here, too, were found pitfalls. It turned out that when using the transform.scale.x function, rounded corners are deformed. In some places it is not so much noticeable, but in others it seriously hinders and leads to the development of the layout, which affects the speed of work.



Using the timeline set the sequence and duration of the animations. The track allows you to play from beginning to end all the effects in accordance with the scenario.



To make the application prototype responsive, add Actions. It is the Actions that trigger the scheduled animations. For convenience, we take simple gestures - mouse clicks.


Types of Action

When adding an animation to the Action area, attention should be paid to its order. It turned out that just throwing all the animation and hope that it will start according to the timeline will not work. The whole idea of ​​the distribution of animation on the timeline loses its meaning. Now you need to arrange the order in the Actions window and spend time on it.


Actions window with added animation playback

To view the results of work, use the Demonstration mode. It shows how the animation and actions of all elements will be displayed. Our expectations were not met. There are new oddities in the program. Although the order of the animation we have placed, but the playback does not meet expectations. All items are displayed simultaneously, without any sequence.


Displays animation after adding to Action and interacting with it.

You can turn on the Delay function, then the Actions in the demo mode will work slower, but the animation will play in order, according to the timeline.



For our application, the delay is not required, so turn it off in the hope that everything will be displayed in the code as it should. The discrepancy between the actions performed and their display is frustrating. It seems that you didn’t understand, or the skis do not go. Some effects were made exactly as in the tutorial, but the results were completely different.

In the Kite compositor community on Facebook, you can see that almost no one brags about the results of their work in demo mode. All participants shoot video in the workspace mode - they just start playing on the timeline.

Once again we check all the animations and effects, write the hyphae to compare with what happened in the code. Generate the code and give it to the developers for analysis.

Test code

The code is obtained, but there are nuances.

Code duplication
The first thing that attracts attention even before the launch of the code is its structure. On the one hand, it looks simple: each action is described in a separate line. All values ​​are immediately visible: the position of the elements, colors, shadow parameters and animation. On the other hand, before the eyes of a sheet of duplicate code, in the end we got 1996 lines. Ideally, so that it can be used in further development, it is necessary to rewrite it, reducing duplication through the use of functions. And this again takes time.


Bed sheet code

Non-adaptability
During code reproduction, errors and non-adaptability were found.


Scheduled playback in the app


and how Xcode compiled it

Above, we wrote about specific areas of active actions: a pin and a small card. In the assembly, these areas have disappeared, now you can click anywhere. It is not good.
The Kite compositor code sets static dimensions for all interface elements, which creates a problem with adaptability. Initially, designers work in 1x (375x667px) layouts, Kite compositor, in the process of creating animation code generation, does not take into account the possibility of adaptability for devices of a different size. Even under the condition that during the import from Sketch all the shapes remain in the vector.

Non-adaptability leads to the fact that when creating an animation, the designer will have to make a separate file for each resolution. Or developers to prescribe additional conditions, and this complicates and slows down the process a bit. You can rewrite the code under Autolayout, but it will be a completely different code, in which almost nothing remains of the old one.

Few tutorials
Another important factor in popularity is the presence of tutorials. Of the available for free training, there is only one channel. Amos Gyamfi tells and shows how to make this or that animation in Kite compositor. The only negative: sometimes some of his videos repeat the same tricks and animation effects, just on other objects. But there are few such videos. There is also a resource with training , but there is literally a couple of freebies, and then you have to pay.

On the official website of Kite compositor, a section devoted to training has recently appeared, and this is really encouraging. Perhaps in the near future the situation may change for the better.

Overall tolerable
Kite compositor can process the parameters of animation, shadows and colors into a code. Thus, at least some, but the bridge between the designer and the developer is installed. The programmer can see exactly all the necessary values ​​up to a millisecond, and not guess what, where, why. The generated code is created in Swift language. This allows you to send the code to Xcode without any problems, create a project there and run it.

Animation Kite compositor can be used, but only in static animations, where active user participation is not required. For example, in splash screens. Yes, and with gestures, serious restrictions - a maximum of tap or scroll. Something complicated will result in the rewriting of the entire code.

Look for more

The program did not cope with our task. Note errors, bugs and insufficient number of functions in comparison with competing programs. Kite compositor is not so easy to use, the interface is not obvious. But this, probably, no program to create effects can not boast.

The idea of ​​combining the work of designers and programmers is very promising. We believe in it. Therefore, let's try to find the perfect program for turning animation into code. Follow the news.