Animation in mobile development: what it is, types and how to use

Animation in Android: Property Animation and View Animation

Android provides two main animation systems: View Animation (legacy) and Property Animation (modern). View Animation (or Tween Animation) works only with visual representation — it changes the display of the View but not its actual properties (for example, click coordinates remain in place). Property Animation, introduced in Android 3.0, changes real object properties through Animator — ValueAnimator, ObjectAnimator or AnimatorSet.

ObjectAnimator and ValueAnimator

ObjectAnimator is the most popular Property Animation class. It animates a specific object property (for example, translationX, alpha, scaleY) over a specified time with a given Interpolator.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator is not tied to a specific object — it generates values that can be used for any property or custom logic.

View Animation and XML Animations

View Animation is described in XML files res/anim/. Four types are supported: scale, translate, rotate, alpha. The drawback is that animation does not change real View parameters. For simple effects (blinking, rotation) View Animation is still applicable, but for new projects Property Animation is recommended.

Animation in Jetpack Compose

Jetpack Compose offers a modern animation API: animateAsState, Animatable, AnimatedVisibility and AnimatedContent. Animation in Compose is reactive: when the state changes, animation starts automatically.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Animation in iOS: Core Animation and UIView.animate

iOS provides a powerful animation stack based on Core Animation — a low-level framework working with CALayer. UIKit builds on top of Core Animation with convenient UIView.animate and UIViewPropertyAnimator methods.

UIView.animate

UIView.animate is the simplest way to animate in iOS. It allows animating frame, alpha, transform, backgroundColor and other UIView properties.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — a framework for physical animation: gravity, collisions, springs, attachment forces. It allows creating realistic object behavior without manual physics calculation. Used for custom transitions, animated menus and game elements.

CAAnimation and Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — a low-level API for CALayer animation. Supports 3D transformations, path animation (keyframe), masking and composition. SwiftUI uses Core Animation under the hood through animation and withAnimation modifiers.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

For the majority of iOS projects SwiftUI with its built-in animation is used. For example, withAnimation wraps state changes in an animated context.

Vector Animation: Lottie and Rive

Complex animations (characters, transitions, loaders) are difficult to implement with code. Lottie and Rive solve this problem by allowing designers to create animation in visual editors and developers to embed it into the app as a ready-made component.

Lottie

Lottie — a library from Airbnb (now LottieFiles) that renders animations from Adobe After Effects exported in JSON format. Supported on Android, iOS, Flutter, React Native and Web. Lottie animations are vector, scale without quality loss and can be customized programmatically (speed, progress, colors).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (formerly 2Dimensions) — a more advanced tool for vector animation. Unlike Lottie, Rive supports interactive animation: states, triggers, transitions. Animation is created in Rive Editor and controlled in the app through State Machine. Rive is suitable for game interfaces, animated icons and complex transitions with feedback.

At IT Sectr we use Lottie for decorative animations (loaders, successful operations, empty states) and Rive for interactive elements of onboarding screens. This reduces animation development time by 60% compared to manual implementation with UIKit or Canvas.

Shared Element Transition and Hero Animation

Shared Element Transition — animation where an element (image, text, card) smoothly moves and transforms when transitioning between screens. This creates the illusion of continuity: the user does not "go" to a new screen, but "falls into" the element.

Android Shared Element Transition

In Android the transition is implemented through ActivityOptionsCompat and transitionName attributes. FragmentTransaction supports addSharedElement for transitions within an Activity. Compose uses SharedTransitionLayout with SharedContentState.

iOS Hero Transition

iOS does not have a built-in Hero Transition, but the Hero library (by Luke Zhao) implements this pattern on UIKit. Simply assign an id to elements on both screens — Hero will automatically create a smooth transition. In SwiftUI, transition animation is built in through NavigationStack and matchedGeometryEffect.

Flutter Hero

Flutter has a built-in Hero widget with a tag parameter. When two pages contain Hero with the same tag, Flutter automatically animates the transition between them. This is one of the simplest ways to implement complex animation in a mobile application.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator and Easing

To make animation look natural, speed curves are used — Interpolator in Android and Easing in iOS. They determine how animation speed changes from start to end.

Android Interpolators

Android supports several built-in Interpolators: LinearInterpolator (uniform), AccelerateDecelerateInterpolator (slow-fast-slow), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (with overshoot) and BounceInterpolator (with bounce). A custom Interpolator can be created through XML or the TimeInterpolator class.

Spring Animation

Spring Animation models spring physics with damping and stiffness parameters. Damping 0 — infinite oscillations, 1 — no oscillations. Stiffness determines return speed. Spring Animation is available in iOS (UIViewPropertyAnimator with UISpringTimingParameters), Android (SpringAnimation from physics2) and SwiftUI (spring()).

The Spring Animation in Android documentation contains detailed configuration examples.

Timeline Animation

Timeline — an approach where animation is split into frames over time. Used for complex sequences where AnimationSet or Group animation are not flexible enough. Android supports AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval in AnimationController.