Low‑Code Property Animations on Android: Principles, Workflow, and Implementation
This article explains the concept of property animation on mobile, analyzes the inefficiencies of manual animation coding, proposes a low‑code solution inspired by Lottie, and provides detailed Java code and workflow diagrams for integrating reusable attribute animations into Android applications.
Property animation is a crucial animation system for mobile UI components, allowing any object property to change over time, whether or not the object is rendered on screen. By defining the target property, duration, and value range, developers can create smooth motion effects such as position shifts, scaling, and fading.
The working principle is illustrated with an example where an object's horizontal x property moves 40 pixels over 40 ms, updating every 10 ms (the default frame refresh rate) using linear interpolation.
Because each animation currently requires hand‑written logic, development time and code volume grow proportionally with animation complexity. Low‑code aims to reduce repetitive work by standardising and automating common animation tasks, allowing developers to focus on core functionality.
The proposed solution draws inspiration from Lottie: an AE‑exported animation file is parsed into a data model, then automatically wrapped into a property‑animation component that can be attached to any view. Business‑specific animations (e.g., button scaling, card fade‑in/out) are handled similarly, while purely decorative animations remain suitable for Lottie.
Key classes in the Android implementation include AnimationManager (entry point), AnimationViewWrapper (view wrapper), and AttributeCompositionFactory (resource loading). The manager provides two overloads of playAnimation —one for the default animation and one for a named animation.
public class AnimationManager {
private static final String DEFAULT_ANIMATION = "animation";
public DynamicComponent playAnimation(View target, String assetName) {
return playAnimation(target, assetName, DEFAULT_ANIMATION);
}
public DynamicComponent playAnimation(View target, String assetName, String animationName) {
DynamicComponent viewWrapper = new AnimationViewWrapper(target, assetName, animationName);
viewWrapper.playAnimation();
return viewWrapper;
}
}The wrapper initialises the animation by loading the JSON asset, creating an AttributeComposition via AttributeCompositionFactory , and then parsing layers, transforms, and keyframes to generate AnimatorSet objects for translation, rotation, scaling, and alpha.
public List
getAnimatorSetList(View target, final String animation) {
List
animatorSets = new ArrayList<>();
parseScale(target, animatorSets, transform);
parseRotation(target, animatorSets, transform);
parseAlpha(target, animatorSets, transform);
parseTranslation(target, animatorSets, transform);
Collections.sort(animatorSets);
return animatorSets;
}Finally, the article presents a complete workflow diagram, a sample JSON animation file, and a concluding note that the solution was derived from real project pain points and aims to improve development efficiency.
Kuaishou Tech
Official Kuaishou tech account, providing real-time updates on the latest Kuaishou technology practices.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.