rlottie - a new approach to motion graphics ui
•Transferir como PPTX, PDF•
0 gostou•186 visualizações
Dive into the key features, technical details, and project history of the rlottie project during this session. You'll explore practical use cases in Tizen and interesting ways to use Lottie in your Applications. Lottie animation is one of the most promising vector-based animation methods and its format is JSON exported from After Effect or other software. Last year, Samsung started an open-source project called rlottie to provide Lottie animation features. The rlottie software is a platform independent standalone library, targeting multi-platforms. Services, apps, and even frameworks can use this library to display visual animation results, which is useful because it's small and has no dependencies on specific frameworks or libraries. It's extremely compatible and faster than other Lottie players, and you can play Lottie animation easily in your program.
Recomendados
Mais conteúdo relacionado
Semelhante a rlottie - a new approach to motion graphics ui
Semelhante a rlottie - a new approach to motion graphics ui (20)
Último
Último (20)
rlottie - a new approach to motion graphics ui
- 2. rlottie: A New Approach to Motion Graphics UI Hermet Park Staff Engineer, Samsung Research
- 3. Motion Graphics Overview: • Computer graphics animation • Generate moving objects images • Movie, Game, Effects … • UIAnimation,Visual Interaction • Essential in Modern UX • ++Usability • ++Complexity (In development)
- 4. Motion Graphics Method Abstraction: Rendering (Vector Graphics & Images) Frame Controlling (Timing & Update Property) Source Output 60 times / 1s Animation Loop
- 5. Animation Update frames: 0s 0.2s 0.3s Frame Controlling (Timing & Update Property) Key Frame:1 Key Frame:2 Key Frame:3 LoopTime: 0.25s Rendering (Vector Graphics & Images) Interpolated Vector, Image Properties Source [Key Frame Data list] Output [Frame Images] 60 times / 1s Animation Loop
- 6. Vector Graphics Key features: • Mathematical equation algorithm • Stroke, Dash, Path, Fill, Gradient … • Model / Scene by Shapes Composition • Generate images on runtime • Scalable without loss • --Binary Size < 0.05x (4K PNGs) • ++ComputationalComplexity
- 7. Tizen Vector Graphics Engine features: • Designed forTiny SVG, Lottie • Multi-threaded Rasterizer • Data Compression • Precise Caching • Zero-Copy Binding • … Graphics System (TBM / GL /Vulkan …) RenderingCore Vector Graphics Engine UI Engine Xamarin / C# Interfaces Tizen UI Graphics
- 8. Tizen Vector Animation Legacy Concept: • Property States • Tweening Programs • Vector Morphing State 1 State 2 State N Type:VECTOR State: “state1”; Data: “batman1.svg”; Tween: “state2”; Interpolate: LINEAR; Duration: 0.25s; Type:VECTOR; State: “state2”; Data: “batman2.svg”; Type:VECTOR; State: “state2”; Data: “batmanN.svg”; Tween: “state3”; Interpolate: ACCEL; Duration: 0.5s; Tween: “state1”; Interpolate: DECCEL; Duration: 0.25s; Program: State: Tweening & Morphing
- 10. Lottie Animation Lottie File Work-flow: After Effect (AE) AE Plugin Program (App) BodyMovin Platform OS Lottie Player App Logic
- 12. Lottie Animation Visual & Functional Components: • Shapes • Transform • Interpolation • Masks • Texts & Images • Renderable • Merge Paths • Layer Effects Matte Matte Inverse Merge Paths Layer Effects (Color Correction)Layer B Layer A Composition Shape A Shape B Shape C • Mattes
- 13. Lottie Animation Visual & Functional Components: • Shapes • Transform • Interpolation • Masks • Texts & Images • Renderable • Merge Paths • Layer Effects Matte Matte Inverse Merge Paths Layer Effects (Color Correction)Layer B Layer A Composition Shape A Shape B Shape C • Mattes
- 14. Lottie Animation Visual & Functional Components: • Shapes • Transform • Interpolation • Masks • Texts & Images • Renderable • Mattes • Merge Paths • Layer Effects "shapes": [ { "ty": "gr", "it": [ { "ty": "fl", "c": { "a": 0, "k": [ 0, 0.894117474556, 1, 1 ], "ix": 4 }, "o": { "a": 0, "k": 100, "ix": 5 … Lottie File (TEXT)Layer & Shape Attributes List (AE)
- 15. Lottie Animation Composition CompLayer NullLayer ShapeLayer SolidLayer CompLayer (Recursively) ContentGroup Trim Repeater Path Stroke ContentGroup (Recursively) Data Structure: "shapes": [ { "ty": "gr", "it": [ { "ty": "fl", "c": { "a": 0, "k": [ 0, 0.894117474556, 1, 1 ], "ix": 4 }, "o": { "a": 0, "k": 100, "ix": 5 … Lottie File (TEXT) Lottie Player Interpret Data Structure
- 16. rlottie project “Render Lottie” • Standalone Library • Outputs: • Shared RGBA bitmap • Vector Property List • ScalableTask Scheduling • Open-Source (LGPL 2.1) • Linux Oriented (Debian, Fedora) • github.com/Samsung/rlottie LottieAnimation (Controller) Lottie File Loader Lottie Scene Renderer Vector Rasterizer rlottie (Lottie-Player)
- 17. rlottie project “Render Lottie” • Standalone Library • Outputs: • Shared RGBA bitmap • Vector Property List • ScalableTask Scheduling • Open-Source (LGPL 2.1) • Linux Oriented (Debian, Fedora) • github.com/Samsung/rlottie LottieAnimation (Controller) Lottie File Loader Lottie Scene Renderer Vector Rasterizer rlottie (Lottie-Player)
- 18. rlottie project Basic Programming: using namespace rlottie; // Open “example.json” file. Animation *animation =Animation :: loadFromFile(“./example.json”); // Animation time in seconds.This might be necessary to decide current pos value by your animation loop. double duration = animation->duration(); // Decide which frame you’d like to show in thisAnimation.This pos must be in range, 0 – 1. size_t frameNo = animation->frameAtPos(pos); // Prepare a surface to obtain current animation frame image. Given buffer would take 32bits RGBA format data. Surface surface = Surface(buffer, width, height, bytesPerLine); // Request current frame rendering synchronously. Animation->renderSync(frameNo, surface);
- 19. rlottie project Tizen Integration: • AnimationView (API) • Xamarin to Native UI • Animation Loop by Rendering Core • Using ShareableTBM Buffer rlottie <forms:AnimationView x:Name=“animationView” Animation=“swimming.json” Loop=“true”; OnFinish=“Handle_OnFinish” VerticalOptions = “FillAndExpand” HorizontalOptions = “FillAndExpand” /> Request framesLoad Swimming TBM Buffers Tizen UI Graphics Lottie File Graphics System (TBM / GL /Vulkan …) RenderingCore Vector Graphics Engine UI Engine Tizen .NET / Xamarin Native UI Calls
- 20. rlottie project Tizen Integration (alternative approach): • GenericVector Commands • Use legacyVector Engine • Free to Customize Animation rlottie Request frames Graphics System (TBM / GL /Vulkan …) RenderingCore Vector Graphics Engine UI Engine Vector Commands Tizen UI Graphics
- 22. • Cloud-based instant messaging and voice over IP service • ClientApp on multi-platforms • 200+ million active users • Animated Stickers & Emoticons rlottie Showcase Telegram Messenger:
- 23. • PropertyTable • OnlineViewer • LocalTesting rlottie Compatibility CollaborationWork-flow: www.rlottie.com VI Designer App Developer 3. Release 1. Check Spec. 2.Verify No Upload rlottieWASM
- 24. Lottie Customization Dynamic Property: • Overriding properties by requests • Color,Opacity,Transform … • “keypath” to specify the overriding part e a b c d propertyProvider.setKeypath(“a.b.c.d.e”); propertyProvider.setFillColor(0, 140, 187); propertyProvider.setStrokeWidth(1.5); … animationView.overrideProperty(propertyProvider); … Overriding part: “e” Keypath: “a.b.c.d.e” DisabledFocusedNormal Theme B
- 26. Lottie Customization AdaptiveTransition: • Lottie as Place/Transition Holder • Dynamic Mapping UIObjects • MappingView, Image,Text, Controls … AdaptiveTransition “.center” “.right”“.left” animationView.setFile(“ui.json”); … animationView.setContent(“.center”, view1); animationView.setContent(“.left”, view2); animationView.setContent(“.right”, view3); … animationView.play(); view1 view2 view3 mapping by keypath
- 32. What’s going on? Summary • Trying more visual effects, further optimization • Tizen UX are replacingVI with Lottie • Lottie in more Samsung devices • Mobile,Wearable, SmartTV, Home Appliances …
Notas do Editor
- Ok, It’s time to start, Welcome everyone. Pleased to introduce myself, My name is Hermet, I’m one of Tizen developers specifically working for Tizen UI and Graphics parts in Samsung Research Center. Today, I’d like to talk A new approach to Motion Graphics UI with Lottie Animation. Perhaps, some of you may have heard about Lottie Animation before. As you now, Lottie Animation is one of the promising methods to develop Motion Graphics. Actually, most platforms support this animation method for app UI. This year, from Tizen 5.5 we also started to support Lottie Animation. And I’ve been involved in that project, as an output, we created an additional open-source project, the name is rlottie. So in this presentation, I’d like to talk briefly about the history of this project, How we started rlottie project and how built up rlottie on Tizen. What we’ve done with Lottie animation until now and what we’re doing for further features. Ok, then let’s get started.
- If you are not a visual interaction designer, you might be unclear or have no idea what exactly Motion graphics is. Motion graphics is a sort of computer graphics animation like animation movies, video games or UI effects. If there are some objects were moving on the screen and those screen scenes or frames were generated by computer processing, then That is motion graphics. For the last 10 years, Motion graphics have been getting more and more used in UI world. Nowadays, it’s one of the essential needs for better user experience. Obviously, if you look at the UI of your smartphones, it must be full of fancy animations. Even in smart TV, watches and other types of devices are as well. But you know, animation is not just for eye candy, obviously, it’s functional and useful. In case of the UI, animation effect could provide clear feedback to users as the interaction effects. Also, it allows apps to save screen space so that app could fulfill several functions simultaneously. Therefore, the users can practically understand the scenario context and functionalities more easily. The thing is, in point of development perspective, Motion graphics is likely to increase the burden of development. That means, it’s much harder to design and code, it requires more development resources. As a result, developers needed a better method to develop animation effects quickly and more easily.
- Before moving on to the Lottie solution, we are going to check how motion graphics works under the hood. To talk about this briefly, I’d like to separate Motion Graphics into major two parts - frame controlling and rendering. Here frame controlling means which animation data we’d like to display with and rendering indicates how we draw the animation images with that animation source data. Let’s assume we already prepared a lot of Animation source. Then, we just need to select one of animation sources at a certain time. For this, we need to run process or a sort of an Animation Loop 60 times per second as far as we support 60 fps in a program.
- Theoretically, the Animation Loop iterates continuously then prepares animation data for each loop to request for rendering it. But generally, this animation data is only available within certain interval as it’s key-frame. Otherwise, there must be full of heavy animation data size. Thus, if we have no animation frame data at a certain frame time, We must generate it by interpolating between previous and next existing data. And this animation data could contain timeline information, interpolation method, object properties, vector properties, image index and more. We can use basic or custom interpolation equation to interpolate these properties. By this basic concept, we can control animation frames on animation loop and make a transition for motion graphics. Now, that I have talked about frame controlling, Let’s move on to the rendering part. As I mentioned earlier, the rendering is a drawing job to generate animation images. And of course, there are a lot of rendering methods but in this case, we are going to just focus on vector graphics only.
- Vector Graphics, it’s a sort of mathematical equation algorithm method to draw all kinds of 2D shapes. In Vector graphics, there are some traditional drawing commands such as stroke, dash, path, fill, gradient so on. Basically, we can compose shapes using these commands, moreover we can compose a model or a scene by mixing several shapes together. As you may know, one of the famous vector graphics formats is SVG. Not like in the past, these days vector graphics or vector drawing method is more encouraged to use for modern app UI. Because it’s available on the scalable resolution. Actually, vector graphics is able to generate full size resolution images on run-time. That means, apps don’t need a set of various resolution image data of the same contents for supporting various displays. In other words, vector graphics use much less resource data that brings app binary size reduction. On the other hand, vector graphics may require more processing power than images if the demanded model or a scene is complex. But hopefully, these days decent mobile machines are fairly sufficient to handle this computation in real-time. Besides the design trends, that’s one major fact why vector graphics UI is more used than ever before.
- In case of Tizen, as you can look at the figure right-side, Tizen UI Graphics Stack, Tizen supports its own Vector Graphics Engine. Back in Tizen 2.4, the engine was introduced for supporting Tiny SVG format so that it applied vector drawings all over UI control visuals. Then lately it has expanded to support Lottie Animation. At the end, vector engine integrated with rendering core to respond to the commands requested and to share the drawing outputs. And here Rendering core is responsible for all kinds of drawing methods and composing methods not only for vector results but also for generic images and text and more. To get vector engine working nicely with rendering core, we applied some basic optimization strategies. For example, we applied multi-threading rasterizer, SIMD instructions and a certain compression method which is applied to the internal intermediate shape data to reduce the memory size and processing data size. Furthermore, we applied caching mechanism case by case more precisely for drawing buffers. For instance, we are not going to cache animated buffers but to cache static or shareable buffers among the vector objects for compromising memory and performance. And of course, we use shareable buffers to avoid memory copy between rendering core and vector graphics engine.
- Of course, Tizen supports basic vector animation programming methods. Basically we can describe several states of one vector object. And in those states, we can describe some object properties such as shapes path, fill and stroke colors, gradient methods, even resource file path name and more. By switching these states with engine transitions program, The engine could generate animation results by interpolating these state properties instead of us. However, the numeric data of vector properties is not so intuitive to us. Thus perhaps we should construct a model from a vector data such as SVG to avoid the manual coding. In this case, we’d rather design the engine to support shapes morphing mechanism for auto animation. But one problem is, the morphing method has a limitation at complex shapes and models. Sometimes it generates different results than we expected. Even worse, if the animation has more than 2 states, programmers must write code to chain the states case by case that might be easy to bring the logical mistakes. As a result, we needed a better method to vector animation programming and our choice was Lottie.
- As you may know, Lottie is one of the vector-based animation methods, it was organized and introduced by AirBnB company. The original idea came from the programmer Hernan Torris. He made an exporter plugin to extract animation data from Adobe After Effect tool, which is one of the most popular vector design tools among the designers in the industry. The data exporting from Affect Effect is a good point since that tool is very professional and powerful. Already a lot of visual interaction designers are used to it and continue to stick to its further usage. Consequently, Lottie Animation has been getting more popular in the industry now. Also, there more design tools are coming out supporting Lottie Animation format. Not only Native Web but also major platforms such as Android, iOS, Windows even Tizen support this Lottie Animation. Therefore, applications running on these platforms can use this animation method to make fancy, aesthetic visual effects.
- Let’s have a look at more details of Lottie Animation. This page shows an abstracted work-flow of Lottie usage. Firstly, after we design in After Effect, we can export the animation data using BodyMovin plugin of After Effect. This BodyMovin translates After Effect animation source to sort of specified structure data using JSON format. And we can call this, Lottie File. Now apps are ready to use this Lottie File as its own animation resources. But still, the applications need a sort of Lottie-Player module which consists of Lottie file loader and renderer. And let’s assume Lottie-Player is a static or extern library module. It depends on the cases. Anyway, by using Lottie-Player, apps could request Lottie Animations and control them based on app scenario. Also, the application might need a vector rasterizer to draw Lottie Animation frames. As we figured out Tizen case, we could understand platforms basically support its own decent Vector Graphics engine. That means, Lottie Player could request the platform to rasterize the animation frames. Therefore, apps could request Lottie-Player to play Lottie animation and display the result on apps screen.
- Basically, After Effects has a lot of visual and functional components for visual effects. As you can see the behaviors sample on the screen, These primitive components contain not only shapes but also composition and transition methods. Thus, designers can practically design visual effects by applying these components together.
- We can check a categorization through the Lottie visual & functional components. I think most of the items are understandable by looking at its names. But Mattes 7th in the list might be a little strange name for you but it’s quite similar with masking method. Actually, Mattes is practically useful and necessary by the designers. Specifically, a matte is a layer that defines the transparent areas of that layer or another layer. An alpha channel is often used as a matte, but not like masking, you can use a matte better than the alpha channel does. Just keep in mind, this masking and mattes may require additional render buffers and another render stages in run-time processing. That means, these components could be a little bit or very expensive if they were used many times for one Lottie Animation. Thus, if designers can make the same design without masking and mattes, then I can recommend that you can avoid using them. Next, Merge Paths merge shape paths together, as its name suggests. In fact, it’s not such a recommended component since it also requires a complex logical computation on runtime. Even some platforms don’t support this feature perfectly yet.
- At the last, Layer effects is sort of filter effects of After Effect. It provides some color corrections like fill, tint, tritone to layers. You know, I just pointed few components but very important for Lottie Design since time limitation, There are actually more specification of After Effect visual & functional components than this list, I think you can visit the after effect online documentation later to check more details about them.
- These components in the list are available as After Effect Layer & Shape attributes list. Mostly these components are directly mapping to the design components of After Effect. Also, they are expected to be consistently described in Lottie Files.
- As you can see Lottie file in the left side, it is well organized in the structure, but the readability might not be satisfactory if you don’t have any idea of the meaning of keywords because the keywords are abbreviated. Thus, for understanding the lottie file, you can check the body movin project to understand them. Anyway, once an app is ready for reading Lottie file, the Lottie-Player takes parsing and interpreting Lottie texts and transforming the text to interpret data structures that is designed for Lottie animation. You know, this result data structure is quite similar to the original design structure of After Effects because every components in After Effects are roughly going to convert to data item of rlottie one to one. In fact, in the earlier designing step, we can figure out how many design components would be transformed to the data structure. That means, we can figure out how many components data will be processed and work in programs on runtime. Thus, it might be helpful for the optimized design if designers understand how expensive each component is.
- For supporting Lottie Animation in Tizen, we suggested a new Lottie-Player library, the name is rlottie. Rlottie means “Render Lottie” inspired by RSVG project which is for SVG rendering. rlottie basically does reading Lottie file, lexing, parsing and interpreting Lottie syntaxes then transform to an understandable scene-graph data structure for Lottie scene-renderer. And Lottie scene renderer is programmed to update all kinds of Lottie components properties by processing them at a given frame time. Then rlottie ultimately generates the animation scene images through its own backend vector rasterizer that is originated from Tizen Vector Engine. All in all, this library contains Lottie file loader, a scene renderer and vector rasterizer. Additionally, it contains a convenient API set for controlling Lottie Animation. To sum up the key features of rlottie, Firstly, it’s an open-source, a standalone library that doesn’t have any package dependencies. Thus, apps can easily contain this library symbol if it’s necessary. Especially, it's quite good if apps need exactly the same method of Lottie Animation across the platforms. Secondly, rlottie output is a simple RGBA bitmap data which is available to share with the requester. As I mentioned, rlottie has its own vector rasterizer, basically, it doesn’t need to depends on any platform ui graphics system. You can just use the result data as independent image source in your application.
- And for more advanced usage, it also provides Lottie result as a general vector property list such as path, fill, gradient and so on. Though that interface is not recommended unless you fully understand the interface method. But we are expecting, users can control Lottie animation properties more precisely by using this method. And it’s actually being used in Tizen. We are going to check a showcase later in the presentation. Third, the task processing and rendering of rlottie supports both synchronous and asynchronous way so that you can optionally choose either method. Actually rlottie works based on its task scheduler which is a sort of threading pool method. Lastly, this project is oriented to Linux world. Now, It’s being used in Tizen plus it’s packaged to Fedora and Debian distros officially. And I guarantee you can easily build & port rlottie to your platforms such as Windows, Android, Mac and others.
- Now we check how to use rlottie in programming wise. Basically rlottie supports C++ interface and an additional C language binding. And in this case, we are going to focus only C++ interfaces. Anyway, as you can understand by the example, it describes a basic usage. Firstly, it creates one Lottie Animation instance by specifying a Lottie file name. Then for controlling Lottie Animation, it queries some animation properties. Lastly, it requests to render and generate an animation frame images by giving a surface target. Then, rlottie will draw the animation frames onto the given surface target so that you can use it as an image source on the next composition stage. And of course, you can create multiple animation instances for playing them simultaneously. That case those instances can share the internal Lottie data very aggressively if they use the same Lottie file.
- Now, rlottie is inside Tizen as the Lottie-Player, it’s integrated with the rendering core directly. In the stacks, the rendering core has a role for a canvas & drawing stuff, it’s is tightly communicating with the lower graphics backend and the higher UI engine. And UI Engine provides native UI controls such as a window, view, scroller, button and more. Upon this, Tizen sets up Tizen.NET and Xamarin framework that exposing C# and XMAL interfaces. As Xamarin is a portable layer that guarantees UI compatibility, Tizen apps can use an Animation View of Xamarin form for Lottie Animation. Then, while this Animation View is working through the Xamarin & Tizen.Net runtime, It requests UI Engine to create a native Animation View UI control, then make it to play Lottie Animation. After that, this UI Engine requests Rendering Core to draw Lottie frames. As we figured out Animation Loop earlier in this topic, we can understand this Rendering Core is supposed to handle the app process main-loop. Therefore, Rendering Core can decide the exact frame number of Lottie Animation for each loop. Thus, rendering core internally requests rlottie to load a Lottie File, update Lottie Animation frames by giving a specific frame number. Then rlottie generates a frame image result, returns it to rendering core so that rendering core can composite this image with a main canvas buffer. For sharing Lottie drawings, we’re using TBM buffers to update the image pixels on the spot. That means, it maps a surface buffer as a Texture source that is directly uploaded to a Graphics engine through OpenGL and others. As you may know, TBM is a Tizen Buffer Management system. It’s fundamentally the same as a dynamic texture of EGL surface that accessing the graphics memory directly by requesters. Hence, TBM allows for sharing texture memory safely among the different processes and modules such as the compositor, graphics driver, server and clients. All in all, we applied the integration method to the native UI systems both EFL and Dali in Tizen.
- To control Vector Animation properties of Lottie, Tizen additionally applied an alternative integration method as the screen shows. In this way, rlottie returns the animation results with Vector commands instead of frame images. Specifically, rlottie returns a list of vector properties that is compatible with rendering core vector drawing interfaces. Thus, rendering core gets the vector input data of Lottie, then handle rendering stuff internally, then transfer them to vector graphics engine to draw the frames. The main pros of this approach is that we can have more benefits by useful functions of Tizen UI & graphics system. But other than that, UI Engine can easily access a vector node of Lottie and change properties through the rendering core. Therefore, we could try to apply Lottie Animation for more dynamic transition effects. And we are going to check some working prototypes about this at the end of this presentation.
- There are some practical use-cases of rlottie running on Tizen. The one representative case is Galaxy Watch series. Officially, that is the first adoption of rlottie in the product. From Galaxy Watch, it applied Lottie Animation for better visual interaction effects. Not only for work-out animation but also for WatchFaces, battery charging, weather and some notification effects were introduced with Lottie. In fact, before Lottie feature, The product UX was barely supported by VI effects. In some cases, they used mp4 or gif resources in a limited way, But in many cases, developers had to write logics manually for VI effects. If the VI design is too complex in implementing by developers, they felt like they were hitting the wall. Meaning, the developers had to compromise with the designers to ease the animation effects or abandon them. Thus obviously, there were many complaints in developing VI effects in Tizen products and now many cases were solved with Lottie solution.
- One another show case is Telegram Messenger. As many of you may know, telegram is one of the most popular instant messaging app & service. It services on the most platforms, has a tremendous users all over the world. As you can see on the screen, this app provides attractive and interesting animated stickers and emoticons with Lottie Animation. And for this, this application of Android, iOS and Window version individually adopted our rlottie library.
- Since the property support of Lottie Animation wholly depends on rlottie implementation, sometimes but rarely, Lottie Animations might not work the same as After Effect design due to bugs or as it’s non-supported feature. Thus, to confirm whether the design is compatible with a real device, designers must install the Lottie resources onto a real device target so that they can check the results on running apps. Often, this step is time-consuming or it’s burdensome for designers. If the designers can figure it out in advance, the collaborative process will be better. For this reason, we suggest verification steps as the screen shows. Firstly, designers can check the feature table of rlottie in the online documentation. In this way, designers can understand which components of After Effects are available on this project. Secondly, once designers finished VI design based on the supporting features, they can check the preview result on the rlottie online viewer. As like the native lottie online viewer, rlottie also provide its own online viewer to check the compatibility very quickly and easily by the designers and developers. Thus, If the preview is acceptable by the designers, then they can pass the resource to the developers. If it doesn’t acceptable, the designers need to review the design again to see whether they broke the compatibility in the designing step. Otherwise, they can raise an issue to rlottie developers to fix the bugs. And as you may guess, in most cases designers may worry about the design confidential issue. Meaning, leaking the design resources under the development process might be critical for the project. To deal with this, we designed the online viewer to simulate it on the local machine. Actually, when you visit the online viewer, it will install the rlottie web assembly binary in your local PC that runs rlottie program. In other words, rlottie online viewer doesn’t upload the design resources to any servers nor does it transfer them outside. In some projects, design confidential is very sensitive and we were able to solve this using this method while achieving the collaboration between developers and designers.
- Dynamic property is a method to customize Lottie Animation. Using this method, we can support customized Lottie animation with just one pair of Lottie resources. Currently, color, opacity and shape transformation are involved in these dynamic properties. As we learnt earlier, Lottie data keeps a tree-based structure, every component node in a Lottie data could have its own unique name keypath. That means, apps can access a node using this keypath to change properties. In fact, this keypath is the continual appending of id names from the root to a specific node. That means, keypath name should be discussed and confirmed in advance between designers and developers so that developers know which nodes are allowed to customize. Obviously, designers can specify id names for the components in After Effects and the developers can use the keypath name in programming step. Practically, this dynamic property is simply used for changing colors. However, we can apply this for more dynamic user interactive transition as well.
- One use-case is here. As you can see the demo videos on the screen, The left is an original Lottie animation and the right is a customized version. We can make this kind of user - interactive Motion Animation by customizing Lottie Animation on runtime. Though, as you can guess, it might need some additional logic for overriding transformation and interpolation for Lottie shape nodes, it’s definitely much better than starting from scratch to code this kind of interactive transition.
- And I’d like to introduce one more interesting feature of Lottie in Tizen. Actually, Tizen is going to support an adaptive transition for more dynamic animation with Lottie. The basic concept of this feature is as the screen shows. We can use Lottie as for Place or Transition Holder. That means, we can do mapping any kinds of UI objects onto Lottie shape nodes while keeping its transition. Let’s assume that apps can replace one Lottie shape with its view, image, text and some controls on runtime.
- Thus, we can make the previous interactive animation but more dynamically changeable. This approach allows designers to design Lottie animation in a more flexible way. That brings apps to have a decision to change transition effects more adaptively on runtime.
- Clearly, we can use this adaptive transition for this kind of animation effects as well. Left is the original Lottie Animation, Apps can bind view or image onto the Lottie shapes nodes on runtime as the right side Animation.
- Or this animation. As you can see, even the mapping method is available for arbitrary shapes. That means, technically mapping 3d transformation is available as well. If you imagine you are implementing this kind of effects from the nothing, You can say it again, It must be horrible. This adaptive transition might be the best of both worlds for developers and designers.
- One of the other benefits of this adaptive transition is Label. Of course, we can map Label or Text objects onto reserved shapes in Lottie animation. In this way, we can support Lottie Animation with specialized label features such as multi-languages, ellipsis and line wrapping and more.
- Ok, it brings us to the end of this presentation, Let’s summarize it. At the moment, we are trying more interesting visual effects with Lottie Animation. And for this, we’re also trying to add more features to rlottie and Tizen UI Graphics and optimize them. Obviously, Tizen UX are replacing VI effects with Lottie Animation. That means, more Samsung devices are coming out using Lottie. Not only for mobile phones but also for wearables, smart TVs, home appliances as a refrigerator and more. Through this presentation, I hope you learnt Motion Graphics, What is Lottie Animation, How to use it, and I hope you will be able to gain more insights to apply Lottie Animation for your future motion graphics effects. Thank you.