You can do a “Scale” keyword search on the key path list to find out all the scalable node’s key paths. There are 2 major components that are involved in the explosion effect - the dots and the ellipse. Next up, let’s scale up the explosion effect. Note how we are using the double-asterisk (**) wildcard match to represent both H1 and H2. Let keyPath = AnimationKeypath(keypath: "**.Shape 1.Fill 1.Color")ĪtValueProvider(orangeColorValueProvider, keypath: keyPath) Set color value provider to animation view Let orangeColorValueProvider = ColorValueProvider(orange) Create ColorValueProvider using Lottie's Color class
Lottie json editor code#
H1.Shape 1.Fill 1.ColorĪfter identifying the correct color node, let’s write some code to change the heart to orange color.
Since all the key path’s names are self-explanatory, figuring out which key path is representing the heart’s color node is pretty straightforward.Īfter going through all the color nodes, following are the 2 key paths that represent the heart’s color node where H1 and H2 are representing the heart’s layer before and after the explosion effect, respectively. In order to change the heart’s background color, we must first find out the key paths that represent the heart’s color node.īy performing a search on the key path list using the word “Color”, you should be able to identify all the layers with a color node. The modified TwitterHeart animation Changing Color with ColorValueProvider In this section, I will be using the TwitterHeart animation as an example. With all the animation’s key paths being listed out, we are now ready to modify Lottie animations using value providers. AnimationView.logHierarchyKeypaths() Listing out key paths in Xcode console Luckily Lottie does provide an API that we can use to list out all key paths of an animation into the Xcode console. Up until this point, you might wonder how you can get all the key paths of an animation. The single-asterisk will search a single depth for the next node, meanwhile, the double-asterisk will search any depth. Lottie animation’s key path accepts single-asterisk (*) and double-asterisk (**) wildcard match. Represents the color node for every Stroke named "Stroke 1" in the animation. Represents the color node for every Stroke in a specific layer and shape group. Following are a few key path examples: // Represents a specific color node on a specific stroke. With real-time distance and dimension measurements, you can ensure pixel-perfect alignment of your app designs.Īll the elements within a Lottie animation are represented by nodes, in order to access a node, we must know the key path of the node. Tired of eyeballing measurements on screen? PixelSnap is an essential tool for developers who need to measure on-screen elements with precision. PixelSnap - All you need for pixel-prefect apps Controlling Lottie Animation with Markers.Getting Started with Lottie Animations in iOS.Lottie has total of 5 prebuilt value providers:īefore we dive deep into these value providers, if you are not familiar with Lottie, make sure to check out my previous articles that related to Lottie: Introducing Value Providers - Classes that developers can utilise to easily modify the animation properties at run time.
Is that even possible?įear not! Lottie animation is rendered natively at run time, therefore, modifying the animation programmatically is definitely possible. What if you have a black color Lottie animation that does not look good in dark mode, you want to dynamically change the animation appearance based on the app’s user interface style. Unfortunately, the colors of the animation do not match your app’s theme. Imagine you downloaded a piece of Lottie animation, you really like the animation and you want to use it in your iOS app.
0 kommentar(er)
