Reputation: 3484
At 4:40 of Draw Me A Rainbow talk by Nick Butcher at Android Dev Summit 2018, he mentions animating a gradient. He talks about using repeat tileMode for a gradient and creating a rainbow like effect as below:
gradient_one.xml:
<gradient xmlns:android="http://schemas.android.com/apk/res/android" android:type="radial"
android:startY="0"
android:startX="0"
android:centerX="5"
android:centerY="5"
android:gradientRadius="1"
android:tileMode="repeat"
>
<item android:color="#E91E63" android:offset="0.1"/>
<item android:color="#E91E63" android:offset="0.3"/>
<item android:color="#3F51B5" android:offset="0.3"/>
<item android:color="#3F51B5" android:offset="0.6"/>
<item android:color="#03A9F4" android:offset="0.6"/>
<item android:color="#03A9F4" android:offset="0.9"/>
<item android:color="#8BC34A" android:offset="0.1"/>
</gradient>
I am having a hard time how he animates the vector drawable using gradients. I already tried creating AnimatedVectorDrawables using animators that move from one of the above colors to another, but it did not work.
Vector:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="300dp"
android:width="200dp"
android:viewportHeight="24"
android:viewportWidth="24" >
<group
android:name="rotationGroup"
android:pivotX="5"
android:pivotY="5"
>
<path
android:name="v"
android:strokeColor="@color/colorPrimary"
android:fillColor="@color/gradient_one"
android:pathData="M0,10 L0,0 10,0 10,10" />
</group>
</vector>
avd_gradient.xml:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/my_vector">
<target android:animation="@animator/color_animator" android:name="rotationGroup"/>
</animated-vector>
color_animator.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator android:propertyName="fillColor"
android:repeatCount="infinite"
android:duration="@android:integer/config_longAnimTime"
android:valueType="colorType"
android:valueFrom="#C62828"
android:valueTo="#6A1B9A"
/>
</set>
Kotlin code to start animating AVD background of a view:
val rootVG = findViewById<ViewGroup>(R.id.root)
val animatedGradient = rootVG.background as AnimatedVectorDrawable
animatedGradient.start()
Upvotes: 3
Views: 942