kyrie

Project Url: alexjlockwood/kyrie
Introduction: An alternative to Animated Vector Drawables
More: Author   ReportBugs   OfficialWebsite   
Tags:

Build status Download

Kyrie is a superset of Android's VectorDrawable and AnimatedVectorDrawable classes: it can do everything they can do and more.

Screen capture of tool

Motivation

VectorDrawables are great because they provide density independence—they can be scaled arbitrarily on any device without loss of quality. AnimatedVectorDrawables make them even more awesome, allowing us to animate specific properties of a VectorDrawable in a variety of ways.

However, these two classes also have some limitations:

  • They can't be paused, resumed, or seeked.
  • They can't be dynamically created at runtime (they must be inflated from a drawable resource).
  • They only support a small subset of features that SVGs provide on the web.

Kyrie was created in order to address these problems.

Getting started

To create an animation using Kyrie, we first need to build a KyrieDrawable. There are two ways to do this:

Option #1: from an existing VD/AVD resource

With Kyrie, we can convert an existing VD/AVD resource into a KyrieDrawable with a single line:

KyrieDrawable drawable = KyrieDrawable.create(context, R.drawable.my_vd_or_avd);

Once we do this, we can perform several actions that are currently not possible using AnimatedVectorDrawables, such as:

  1. Seek the animation using setCurrentPlayTime(long).
  2. Pause and resume the animation using pause() and resume().
  3. Listen for animation events using addListener(KyrieDrawable.Listener).

Option #2: programatically using a KyrieDrawable.Builder

We can also build KyrieDrawables at runtime using the builder pattern. KyrieDrawables are similar to SVGs and VectorDrawables in that they are tree-like structures built of Nodes. As we build the tree, we can optionally assign Animations to the properties of each Node to create a more elaborate animation.

Here is a snippet of code from the sample app that shows how we can programatically create a circular progress indicator:

KyrieDrawable drawable =
    KyrieDrawable.builder()
        .viewport(48f, 48f)
        .tint(Color.RED)
        .child(
            GroupNode.builder()
                .translateX(24f)
                .translateY(24f)
                .rotation(
                    Animation.ofFloat(0f, 720f)
                        .duration(4444)
                        .repeatCount(Animation.INFINITE))
                .child(
                    PathNode.builder()
                        .strokeColor(Color.WHITE)
                        .strokeWidth(4f)
                        .trimPathStart(
                            Animation.ofFloat(0f, 0.75f)
                                .duration(1333)
                                .repeatCount(Animation.INFINITE)
                                .interpolator(
                                    PathInterpolatorCompat.create(
                                        PathData.toPath("M0 0h.5C.7 0 .6 1 1 1"))))
                        .trimPathEnd(
                            Animation.ofFloat(0.03f, 0.78f)
                                .duration(1333)
                                .repeatCount(Animation.INFINITE)
                                .interpolator(
                                    PathInterpolatorCompat.create(
                                        PathData.toPath(
                                            "M0 0c.2 0 .1 1 .5.96C.966.96.993 1 1 1"))))
                        .trimPathOffset(
                            Animation.ofFloat(0f, 0.25f)
                                .duration(1333)
                                .repeatCount(Animation.INFINITE))
                        .strokeLineCap(StrokeLineCap.SQUARE)
                        .pathData("M0-18a18 18 0 1 1 0 36 18 18 0 1 1 0-36")))
        .build();

Further reading

  • Check out this blog post for more on the motivation behind the library.
  • Check out the sample app for example usages in Java.
  • Check out the documentation for a complete listing of all supported Animations and Nodes that can be used when constructing KyrieDrawables programatically.

Dependency

Add this to your root build.gradle file (not your module's build.gradle file):

allprojects {
    repositories {
        // ...
        jcenter()
    }
}

Then add the library to your module's build.gradle file:

dependencies {
    // ...
    implementation 'com.github.alexjlockwood:kyrie:0.1.3'
}

Compatibility

  • Minimum Android SDK: Kyrie requires a minimum API level of 14.
  • Compile Android SDK: Kyrie requires you to compile against API 27 or later.
Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea