There has always been a great deal of enthusiasm for motion design, and it’s not unusual to see a lot of “cool” UI motion “magic” in design communities like Dribbble.
But most of the kinetic effects we’re seeing so far seem to be designers’ fantasies.
In an era where UI designers are expected to be dynamic, how do you make your dynamic design productive? Here we combine our team’s actual combat work experience to give you some simple summary, hoping to help designers who are still struggling in dynamic effect design.
First of all, there are too many factors involved in whether a dynamic effect can be implemented. What fits the user experience, respects the user’s habits, improves interaction efficiency, guides the user and so on will give you a hundred reasons to “help” polish your design work. When you break through all the obstacles and finally meet all the needs, you happily take your demo to the developers, and they mercilessly throw a sentence to you that this effect can not be done, what kind of acid cool, I believe that everyone reading this article must be deeply touched. (Nonsense not much to say, the article content is longer, please prepare yourself refreshing wind oil essence!)
UI dynamic effect classification
According to the application scenarios in work, UI dynamic effect design can be simply divided into the following four scenarios:
Vector graphics animation
2. Scene animation – emotional design
3. Special effects animation
4. Interactive transitions
The solution
In view of the above four common application scenarios, we will expand the corresponding solutions respectively.
1. For the dynamic effect scenes of vector paths, which generally involve some graphic changes, stroke animations of lines are often used in the common vector animation scenes as shown in the following figure
These are typical vector animation application scenes. In the face of such dynamic effects, the output process of our designers is relatively simple, and the document handover in SVG format can meet most of the requirements. Here we need to take a look at some features of SVG. SVG: Scalable Vector Graphics A Graphics format used to describe two-dimensional Vector Graphics. It has the following characteristics:
1> Can be arbitrarily scaled: will not damage the image clarity, details.
2> Text independence: the text in the image is independent of the image, and the text remains editable.
3> Save resources: Files are much smaller than common image formats such as GIF and JPEG.
4> Strong display effect: image clarity is suitable for screen and print display requirements.
5> Strong color control: 16 million color palette.
With these characteristics, it is very suitable for the implementation of deformation animation and so on. At the same time, the CSS attribute front end of SVG can directly display some style animations, such as: use fill and stroke to create color and stroke for SVG graphics, use gradient attribute to create gradient you want, etc. (The introduction of specific application level of SVG will be supplemented in the later article on SVG literacy). By setting these style properties, developers can implement stroke animations similar to those shown above.
Knowing that so many features of SVG have been applied, we should also try to follow a few rules when producing SVG documents when handing over to the front end. Here are a few things we should pay attention to when guiding SVG files in our application scenarios:
1> Fewer layers: try to ensure layer arrangement, achieve optimal resources, reduce unnecessary layers
2> Merge paths: close paths as much as possible
3> Avoid layer styles: Since SVG already has CSS style properties, avoid as many complex styles as possible in the transition document.
4> This is my habit, I try my best to use AI to process SVG files. At present, I have observed that AI is relatively clean and concise for the processing of vector files, which can save some unnecessary adjustments compared with other tools.
In fact, besides SVG, many design teams are also using Lottie, a dynamic effects library of Airbnb, for animation production. This is a plug-in that can be installed in AFTER Effects and directly generate effects JSON configuration files. After testing, Lottie’s export effect is good for simple vector deforming-like motion effects, which can meet most of the animation scenes. However, there are some special scenes that are not qualified for, such as some effects inside the mask, shape calculation in ios platform, and so on.
Attach a Lottie’s official download address: https://github.com/airbnb/lottie-android
You can download it and use it. There are many tutorials on the Internet, so I won’t repeat them here.
2. Application scenarios for emotional design
Some of the above scenes are some typical emotional design scenes, it can be seen that in this type of dynamic effect design, the expression form of animation is relatively exaggerated and relatively free, and the following rich visual effects can be achieved. Then how to achieve this kind of relatively complex dynamic effect format? There are several basic schemes offered:
Sequence frame, export PNG sequence with AE, develop sequence playback in the front end, the case is a treasure box effect animation of Workup:
The exported file is shown as follows:
In addition, there are also direct use of video format, or GIF images for document handover. But these above will each have advantages and disadvantages, we can choose according to the specific project needs, such as video MP4 is not transparent, but easy to implement, animation quality is high; GIF format image loss is more serious does not support translucent channel, usually transparent image edge will have zigzagged, and iOS is not support GIF format files, but in some opaque color less scene, especially the web end is often used.
3. Scenes for special effects and action effects
Some special scenario we may because visual needs some special class performance for dynamic display, especially in some hardware applications, tools, applications and data visualization products there will be some such demand, this part of the dynamic effect implementation party does not involve data can also be used above sequence frames or video display, if involved in the change of the data, Generally, some third-party dynamic effect libraries are used for implementation. Here we can recommend some commonly used third-party dynamic effect libraries for negotiation and handover with the development, as shown in the figure:
The iOS official motion apis can implement some basic motion effects.
Some third-party recommendations for dynamic effect libraries are not official maintenance, but can be targeted to achieve some special effects, according to the needs of selection (communication and docking with the development).
4. Interactive transition field quasi-dynamic effect
The implementation of this kind of dynamic effect is a common dynamic effect design scene in our UI interaction, and the implementation of this kind of dynamic effect is relatively troublesome, and the development cost is high. Excellent transition dynamic effect can make the interaction become smooth and natural, improve product usability. The particularity of transition animation lies in that data changes will be involved in the process of interaction, so such dynamic effects cannot be directly exported through demo, and must be combined with developers for data and front-end interaction.
There are also some products in the industry that use lazy loading to avoid the sense of violation before and after the transition. However, in the process of such dynamic output, we basically need to cooperate with the labeling documents of our designers for handover and description.
The following is a demo document from a project production process:
As can be seen from the above figure, several important parameters need to be made clear to the front end in the marking process, which are as follows:
1> Trigger event, the trigger condition of this interaction event (press, hold, slide, zoom, and so on)
2> Change elements, which movement elements are used after the interaction event is triggered
3> Motion properties, the corresponding change properties of the element after it starts to move (displacement, scale, rotation, opacity, etc.)
4> Movement time, the time required for element changes after triggering
5> Change value, the attribute used by the moving element, the change in value during the time of the interaction event, generally the initial value and the end value
6> The motion pattern, in the time axis tool generally refers to the slow curve (Bessel interpolation)
7> Other remarks: It is difficult to parameterize the change process of some special scenes, so try to describe the scenes clearly in the form of documents
After passing the remarks of these attributes, general annotation documents can basically be transferred to the front end. In our design process, they are basically visually visible, and only the description of the motion law seems to be particularly abstract. So how can we make our motion effect as natural and smooth as the design demo? It is known that most of the time axis tools used by designers will have related motion curve Settings. Take AE as an example, the slow motion law of key frames is affected by the slow curve. Then how to parameterize the abstract slow curve? Here, it is necessary to understand the generation principle of Bezier curve:
Video from @pnowellDesign
We can see that the shape of bezier curve is actually related to the handle points at the beginning and end of the curve, and more specifically, the positions of the two handle points directly affect the shape of the curve
So here’s what we call a Bessel interpolator, a picture to show you what’s going on
Here you can clearly feel that the purple and green dippers are influencing the shape of the curve, and the corresponding value on the right is the position parameter of the two dippers. With these parameters, the developer can customize the interpolator to achieve the dynamic effect created by the designer. How do I get this parameter?
Online Bezier curve interpolator tools recommended:
First: http://cubic-bezier.com/
http://www.css3beziercurve.net/
http://inloop.github.io/interpolator/
After Effects curve adjustment and interpolation parameters export plugins you can use the third party plugin flow
Download link: https://pan.baidu.com/s/1eSInboA password: HSKD
At the same time, we strongly recommend the dynamic effect annotation export plug-in: InspectorSpacetime developed by Google design team
The official link: https://google.github.io/inspectorspacetime/
The methods used in this paper are all internal trial methods of the team, which are not comprehensive and can be used as a reference scheme in the process of work output. This is the end of the sharing, and there will be independent articles about specific implementation methods later.
You can also reply to your needs and learn together.
Conclusion: try our best to share our learning methods with everyone in a tone that people can understand, deliberately avoiding the use of professional terms, nouns, paper ideas, etc., so as not to confuse the public. Everything to share our learning experience as quickly as possible. Author blog forbids braggart B, absolute low posture, welcome to exchange study together, code word is very tired, hope everyone reprint note name once source ~ thanked!