Prepare 2.0.0-beta1 release (airbnb#190)

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 2.0.0-beta1
+#### Features and improvements
+* Ground up rewrite of the rendering engine.
+* Support for fill types (non-zero or even-odd).
+* Support for linear gradient fills.
+* Some merge path support. Enable it with `enableMergePathsForKitKatAndAbove` and read the 
+documentation before using it.
+* Support for multiple fills and strokes on shapes.
+* Expose several package prive methods on `LottieAnimationView` and `LottieDrawable`
+* Added a ton of samples from lottiefiles.com to the sample app.
+
+#### Bugs Fixed
+* Invalidate whatever drawable is set as the image drawable even if it's not LottieDrawable.
+
 # 1.5.3
 #### Features and improvements
 * Added an image asset delegate so you can provide your own bitmaps from and sd card, for example.

LottieSample/build.gradle

@@ -8,8 +8,8 @@ android {
         applicationId "com.airbnb.lottie"
         minSdkVersion 16
         targetSdkVersion 25
-        versionCode 6
-        versionName "1.5.3"
+        versionCode 7
+        versionName "2.0.0-beta1"
         testInstrumentationRunner "com.airbnb.lottie.TestRunner"
     }
     buildTypes {

LottieSample/src/androidTest/java/com/airbnb/lottie/LottieTest.java

@@ -55,6 +55,7 @@ public class LottieTest {
     TestRobot.testLinearAnimation(activity, "lottiefiles.com - ATM.json");
     TestRobot.testLinearAnimation(activity, "Tests/CheckSwitch.json");
     TestRobot.testLinearAnimation(activity, "Tests/Fill.json");
+    TestRobot.testLinearAnimation(activity, "Tests/GradientFill.json");
     TestRobot.testLinearAnimation(activity, "Tests/KeyframeTypes.json");
     TestRobot.testLinearAnimation(activity, "Tests/Laugh4.json");
     TestRobot.testLinearAnimation(activity, "Tests/LoopPlayOnce.json");

LottieSample/src/main/assets/Tests/GradientFill.json

@@ -0,0 +1 @@
+{"v":"4.6.0","fr":60,"ip":0,"op":900,"w":100,"h":100,"ddd":0,"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"Shape Layer 5","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[15.868,-34.868],[15.868,17.368],[-36.368,17.368],[-36.368,-34.868]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.368,-9.868],[41.368,42.368],[-10.868,42.368],[-10.868,-9.868]],"c":true}},"nm":"Path 2","mn":"ADBE Vector Shape - Group"},{"ty":"tr","p":{"a":0,"k":[-1.5,-2],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"mn":"ADBE Vector Group"},{"ty":"gf","o":{"a":0,"k":100},"r":2,"g":{"p":3,"k":{"a":0,"k":[0,0.232,0,1,0.5,0.616,0,0.5,1,1,0,0]}},"s":{"a":0,"k":[-2,-54]},"e":{"a":0,"k":[98,8]},"t":2,"h":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":722,"s":[0],"e":[100]},{"t":899}]},"a":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":722,"s":[0],"e":[222]},{"t":899}]},"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"}],"ip":722,"op":906,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[15.868,-34.868],[15.868,17.368],[-36.368,17.368],[-36.368,-34.868]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.368,-9.868],[41.368,42.368],[-10.868,42.368],[-10.868,-9.868]],"c":true}},"nm":"Path 2","mn":"ADBE Vector Shape - Group"},{"ty":"tr","p":{"a":0,"k":[-1.5,-2],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"mn":"ADBE Vector Group"},{"ty":"gf","o":{"a":0,"k":100},"r":2,"g":{"p":3,"k":{"a":0,"k":[0,0.232,0,1,0.5,0.616,0,0.5,1,1,0,0]}},"s":{"a":0,"k":[-2,-54]},"e":{"a":0,"k":[98,8]},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"}],"ip":600,"op":722,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[15.868,-34.868],[15.868,17.368],[-36.368,17.368],[-36.368,-34.868]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.368,-9.868],[41.368,42.368],[-10.868,42.368],[-10.868,-9.868]],"c":true}},"nm":"Path 2","mn":"ADBE Vector Shape - Group"},{"ty":"tr","p":{"a":0,"k":[-1.5,-2],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"mn":"ADBE Vector Group"},{"ty":"gf","o":{"a":0,"k":100},"r":1,"g":{"p":3,"k":{"a":0,"k":[0,0.232,0,1,0.5,0.616,0,0.5,1,1,0,0]}},"s":{"a":0,"k":[-2,-54]},"e":{"a":0,"k":[98,8]},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"}],"ip":477,"op":600,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[52.236,52.236]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"tr","p":{"a":0,"k":[-1.5,-2],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":1,"mn":"ADBE Vector Group"},{"ty":"gf","o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":242,"s":[100],"e":[0]},{"t":477}]},"r":1,"g":{"p":7,"k":{"a":0,"k":[0,0.965,0,1,0.155,0.511,0,1,0.311,0.056,0,1,0.52,0.528,0.328,0.5,0.73,1,0.656,0,0.865,0.577,0.828,0,1,0.153,1,0]}},"s":{"a":0,"k":[-9,-34]},"e":{"a":0,"k":[38,3]},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"}],"ip":242,"op":477,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[52.236,52.236]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"tr","p":{"a":0,"k":[-1.5,-2],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":1,"mn":"ADBE Vector Group"},{"ty":"gf","o":{"a":0,"k":100},"r":1,"g":{"p":3,"k":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[0,1,1,1,0.5,0.5,0.5,0.5,1,0,0,0],"e":[0,0.232,0,1,0.5,0.616,0,0.5,1,1,0,0]},{"t":242}]}},"s":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[0,0],"e":[-2,-54],"to":[-0.33333334326744,-9],"ti":[0.33333334326744,9]},{"t":242}]},"e":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[-17,8],"e":[98,8],"to":[19.1666660308838,0],"ti":[-19.1666660308838,0]},{"t":242}]},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"}],"ip":0,"op":242,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":1,"nm":"White Solid 3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[50,50,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"sw":100,"sh":100,"sc":"#ffffff","ip":0,"op":1102,"st":0,"bm":0,"sr":1}]}

LottieSample/src/main/res/layout/fragment_animation.xml

@@ -179,6 +179,6 @@
         android:textColor="@android:color/black"
         android:textSize="8sp"
         android:layout_marginBottom="8dp"
-        android:text="1.5.3"/>
+        android:text="2.0.0-beta1"/>
 
 </LinearLayout>

README.md

@@ -42,12 +42,20 @@ You can build the sample app yourself or download it from the [Play Store](https
 
 Gradle is the only supported build configuration, so just add the dependency to your project `build.gradle` file:
 
+### Stable
 ```groovy
 dependencies {  
   compile 'com.airbnb.android:lottie:1.5.3'
 }
 ```
 
+### Beta
+```groovy
+dependencies {  
+  compile 'com.airbnb.android:lottie:2.0.0-beta1'
+}
+```
+
 ## Shipping something with Lottie?
 
 Email us at lottie@airbnb.com and soon we will create a testimonals and use cases page with real world usages of Lottie from around the world.
@@ -227,6 +235,9 @@ animationView.setImageAssetDelegate(new ImageAssetDelegate() {
 
 * Multiple paths in one group
 
+* Merge paths (off by default and must be explicitly enabled with
+`enableMergePathsForKitKatAndAbove`)
+
 #### Stroke (shape layer)
 
 ---

gradle.properties

@@ -17,7 +17,7 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
-VERSION_NAME=1.5.3
+VERSION_NAME=2.0.0-beta1
 GROUP=com.airbnb.android
 
 POM_DESCRIPTION=Lottie is an animation library that renders Adobe After Effects animations natively in realtime.

lottie/src/main/java/com/airbnb/lottie/GradientFillContent.java

@@ -15,10 +15,9 @@
 
 class GradientFillContent implements DrawingContent, BaseKeyframeAnimation.AnimationListener {
   /**
-   * Gradient values will be slightly rounded and cached for performance. There will be N
-   * number of items cached.
+   * Cache the gradients such that it runs at 30fps.
    */
-  private static final int CACHE_STEPS = 100;
+  private static final int CACHE_STEPS_MS = 32;
   private final LongSparseArray<LinearGradient> gradientCache = new LongSparseArray<>();
   private final Path path = new Path();
   private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
@@ -29,10 +28,12 @@ class GradientFillContent implements DrawingContent, BaseKeyframeAnimation.Anima
   private final KeyframeAnimation<PointF> startPointAnimation;
   private final KeyframeAnimation<PointF> endPointAnimation;
   private final LottieDrawable lottieDrawable;
+  private final int cacheSteps;
 
   GradientFillContent(final LottieDrawable lottieDrawable, BaseLayer layer, GradientFill fill) {
     this.lottieDrawable = lottieDrawable;
     path.setFillType(fill.getFillType());
+    cacheSteps = (int) (lottieDrawable.getComposition().getDuration() / CACHE_STEPS_MS);
 
     colorAnimation = fill.getGradientColor().createAnimation();
     colorAnimation.addUpdateListener(this);
@@ -100,9 +101,9 @@ private LinearGradient getGradient() {
   }
 
   private int getGradientHash() {
-    int startPointProgress = Math.round(startPointAnimation.getProgress() * CACHE_STEPS);
-    int endPointProgress = Math.round(endPointAnimation.getProgress() * CACHE_STEPS);
-    int colorProgress = Math.round(colorAnimation.getProgress() * CACHE_STEPS);
+    int startPointProgress = Math.round(startPointAnimation.getProgress() * cacheSteps);
+    int endPointProgress = Math.round(endPointAnimation.getProgress() * cacheSteps);
+    int colorProgress = Math.round(colorAnimation.getProgress() * cacheSteps);
     int hash = 17;
     hash = hash * 31 * startPointProgress;
     hash = hash * 31 * endPointProgress;