How do designers work with engineers to create UI animations?

Today, designer @Akane_Lee and an engineer share their experiences. In today's world where motion effects are popular, if you want to create a cool animation effect, how can you communicate with engineers so that you can work together without doing anything? Let the engineers tell you in person.

Before talking about how to cooperate with RD to produce UI Animation, let’s first take a look at this advice article recommended by Rplus Chen, Stop Gratuitous UI Animation. This article calls on everyone not to show off for the sake of showing off, and to use less inexplicable dynamic effects.

(This article is a personal note. I always use Hype3 to directly generate Prototype and JS to avoid the big fight with a bunch of numbers, but you still need to understand the part about "why you do this".)

Hype animation tool zero-based introductory tutorial series:

• 《Sketch helps! Getting started with Hype3, a tool for making motion effects without coding》
• 《Code-free animation tool! Teach you how to use HYPE3 to make basic transitions for APP prototypes (with tool attached)》
• 《More convenient than AE! Teach you to use HYPE to create PATH fan-shaped menu animation without code》

If designers want to produce dynamic special effects for RD, they need several kinds of information. Thanks to Qiu Zhengxian, Cateyes Lin, and Xie Mengzhe for sharing, I have summarized the following 6 points based on their opinions:

1. Starting state, ending state
2. Changing properties (width, height, XY coordinates, XYZ rotation angle, transparency, color...)
3. Time script (change which attribute from x ms to x ms)
4. Ease-in
5. Operation behavior (stop and change to user operation, ignore, other)
6. Reference Examples

1. Starting state and ending state

The state when the dynamic effect starts and ends. That is, what the screen will look like before the animation starts and after the animation ends.

2. Change attributes

Designers who have written labeling documents know that a component needs to be labeled with its size, distance, color code, transparency, etc. If it is text, it also needs to add font size and line height, etc. In the field of animation, in addition to the X-axis and Y-axis, the Z-axis must be added in 3D space.

All components that need to produce dynamic effects must be marked with these values. Please note that it is a value, not a "feeling". RD cannot rely on feeling when writing programs.

The H5 of Baidu Search User Experience Center realizes a cool water drop effect. The article has a very scary + vicious numerical demonstration of "water drop" (shake).

Even if there is a wild and unrestrained design in front of me, I have to make it happen even if I cry - the inner monologue of a Baidu front-end engineer

Designers happily throw their imagined dynamic effects to RD, who has to go through such complex calculations to realize them. If there is a position dedicated to handling animation, it's fine, as this is his job, but it's often not such a beautiful dream. RD doesn't even have time to fix bugs, so how can he have so much energy to deal with the icing on the cake? )

[[144922]]

3. Time Script

At what point in time does the property of a component change? This is also the concept of keyframes. In conjunction with "changing properties", what changes have occurred in the value of a component from time point A to time point B?

If the change time of each component is different, there will be many different "time passage" and "property change" combinations to deal with.

4. Gradient Function

It can be understood as "acceleration and deceleration of action". According to Disney's 12 animation principles, the sixth one is Slow in and slow out. Material Design has a whole chapter explaining the necessity of curves, and also provides many animation examples. Of course, this is very difficult for designers.

Easing function quick reference table You can refer to this website and discuss the path of component actions with RD.

5. Operational Behavior

"Trigger conditions": Will the user's operation affect the animation? Games pay special attention to this part.

6. Reference Examples

Displaying animations, simulation videos, prototypes, etc. is not a big problem for designers. The difficulty is definitely how to mark the five values ​​mentioned above. If these attribute status values ​​are not clearly written, it will depend on RD's psychic communication.

RD's personal experience

Thanks to Xie Mengzhe for publicly sharing his practical experience on FB. I have obtained permission to transcribe it. After reading this article, you will know why RD will practice the full psychic Lv.99.

The full text is as follows:

There are actually two types of animations:

1. General 2D animation (translation, rotation, transparency...)
2. Special or 3D animations (page turning, throwing into the trash on Mac...)

The latter can probably only communicate verbally or through video, and the development cost is very high. I have encountered a situation where there is a professional design team, a professional special effects library team, and a software development team that completes all the work.

The former has certain rules to follow, because when the engineer is developing, the system has already provided relevant operation methods, and only some relevant parameters need to be given:

1. Parameter changes of animation objects (such as coordinates, transparency, rotation angle)
2. The duration of the animation
3. The acceleration and deceleration curve of the animation, f(x)=y means that at time point x, the object parameter is y.

This is what others mentioned above.

The first two points are easy to quantify, but the duration of the animation alone can show the team's sense of UX: How many seconds of animation do users find acceptable? Can the animation be interrupted or change state (swipe left halfway to stop, or change to swipe right)? Or, is this animation necessary?

The most common thing I've encountered by novice designers or engineers is to define the animation time as 0.6 to 1 second. If there is no special design, I usually say it's "too long" and ask them to change it to 0.3 to 0.5 seconds... This is a bit off topic, so I'll just stop here.

The third equation is interesting. Designers don’t know how to describe this part. Even engineers, in this era of great disparity in quality, cannot write the equation f(x)=y. However, there are still some useful tools available, such as this webpage:

http://matthewlein.com/ceaser/

You can pull the blocks to change that curve, and then press those buttons to see the effect in real time.

Of course, as others have said, this equation is readily available, such as Deceleration (web engineers like to say ease-out, and on Android they say DecelerateInterpolator. Since the terms used on different platforms are different, unless you are communicating with engineers on a specific platform, I think it is better to use the common language "decreasing" to describe it. At least the PM can understand it). Generally speaking, it is good to have such a description, but if higher quality is required, a more precise description will be required. The word "decreasing" is like yellow, which is a very imprecise concept. If you want to be more precise, you may say goose yellow or banana yellow, but if you want to be very precise, you must use color codes to describe it, otherwise your banana yellow may be different from my banana yellow. The same is true for Deceleration. Are ease-out and DecelerateInterpolator the same? If you are interested, you can study it. The most precise description must be a mathematical equation.

When developing a mobile app project with high requirements, I directly imitated the concept of the web page above and made an app that looked very similar on the mobile phone to communicate with the designer. They just pulled their fingers and the parameters used in the equation appeared, and they could also see the effect directly on the phone.