Animation

Ashera supports cross platform animation using animation set and also supports motion layout which adds animation to constraint layout.

Animation Set

Animation set represents a group of Animations that should be played together. The transformation of each individual animation are composed together into a single transform.

The animation set is defined in xml file under res/animator. Interpolators are defined in xml file under anim res/folder.

To support animation on a view, Ashera has extended view to add the following attributes:

  • animatorXml
  • startAnimator
  • endAnimator
  • onAnimationStart
  • onAnimationEnd

This example shows different animations that are supported.

Auto-animate layout updates

Ashera offers preloaded animation that runs when you change the layout. Set an attribute in the layout to tell the system to animate these layout changes, and it carries out system-default animations for you.

In layout XML file, set the android:animateLayoutChanges attribute to true for the layout that you want to enable animations for: 

<LinearLayout android:id="@+id/container"
	android:animateLayoutChanges="true"
	...
/>

Motion Layout

MotionLayout bridges the gap between layout transitions and complex motion handling, offering a mix of features between the property animation framework, TransitionManager, and CoordinatorLayout.

In addition to describing transitions between layouts, MotionLayout lets you animate any layout properties. Moreover, it inherently supports seekable transitions. This means you can instantly show any point within the transition based on some condition, such as touch input. MotionLayout also supports keyframes, enabling fully customized transitions to suit your needs.

MotionLayout is fully declarative, meaning you can describe any transitions in XML, no matter how complex.

Basic Motion

This example contains a single view that you can touch and drag to move horizontally.

Custom attribute - backgroundColor

This example is similar to the Basic motion example. In addition to the basic motion, the background color of the view changes as the view moves.

Keyframe position

This example uses <KeyFrameSet> to alter the Y position of the view during motion.

Keyframe interpolation

This example builds on the Keyframe position example, adding rotation and scaling to the view transition.

Keyframe cycle

This example adds <KeyCycle> elements to add wavelike motion to the view

KeyTrigger

This example demonstrates how to hide/show a view when the transition crosses a progress threshold..

Previous
Navigation
Next
Native Formatting