I've used ShapeShifter to create an animation vector drawable which perform some trim path and some path data change.
Here's the result:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:name="omino"
android:pathData="M 9 10 C 7 10 7 10 7 8 C 7 6 7 6 9 6 C 11 6 11 6 11 8 C 11 10 11 10 9 10 L 9 16"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="bilancia"
android:pathData="M 3 16 L 20 16 M 12 16 L 12 14 L 22 14"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="abox"
android:pathData="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="braccia"
android:pathData="M 14 14 L 9 11 L 13 12.5"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
</vector>
</aapt:attr>
<target android:name="omino">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="bilancia">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathStart"
android:duration="1000"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="abox">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="2000"
android:duration="1000"
android:valueFrom="M 13 12 L 13 10 L 19 10 L 19 12 L 13 12"
android:valueTo="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="500"
android:duration="1000"
android:valueFrom="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
android:valueTo="M 13 12 L 13 10 L 19 10 L 19 12 L 13 12"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="braccia">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:duration="1000"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="500"
android:duration="1000"
android:valueFrom="M 14 14 L 9 11 L 13 12.5"
android:valueTo="M 14 12 L 9 11 L 13 10.5"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="2000"
android:duration="1000"
android:valueFrom="M 14 12 L 9 11 L 13 10.5"
android:valueTo="M 14 14 L 9 11 L 13 12.5"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
Android studio keeps enlighting animated-vector and target as errors. But in compilation all works fine.
I imported this file as a drawable inside my project. Then in the layout I added an ImageView without any src.
With this code I set the animated vector drawable to the imageview and i start the animation:
AnimazioneVettore = (ImageView)view.findViewById(R.id.ImgVectorAnim);
animatedVector = AnimatedVectorDrawableCompat.create(getContext(), R.drawable.no_abox_animated);
AnimazioneVettore.setImageDrawable(animatedVector);
animatedVector.start();
no_abox_animated is the vector file.
When I start the app no error is fired, the vector is loaded inside the imageview and the animation starts.
The first animation "Trim path end/start". It works fine except for "bilancia". Here the animation perform an orrible "jump" insted of animate the last 2 Lines.
At 500 ms the path animation should start. but nothing happens.
At 200 the last path animiation should start but it does not work either.
I'm using 'com.android.support:appcompat-v7:25.3.1'
First the easy part. Path morphing for AnimatedVectorDrawables was only added to the support library in version 25.4.0 (release notes). So for your pathData animations where nothing is happening you just need to updated the support library version you are using.
As for your "bilancia" problem, this is an issue to do with the way AnimatedVectorDrawables handle trimPath when there is more than one moveTo command (M). You can find an issue filed here. Basically your path is drawing two lines and when combining this with trimPath it doesn't work very well. I'd suggest splitting the two lines in "bilancia" into two separate paths and animating those instead.
Related
How to create this layout while fetching data ?
You could have used the Facebook shimmer library for this which is very straightforward.
Facebook Shimmer Library
But for more fine-tuned control you might have to write an animated vector like this.
Source for code Snippet
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="vector"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<clip-path
android:name="heart"
android:pathData="M 7 3 C 5.465 3 3.922 3.5 2.75 4.7 C 0.407 7.1 0.471 10.8 2.75 13.2 L 12 23 L 21.25 13.2 C 23.529 10.8 23.593 7.1 21.25 4.7 C 18.907 2.4 15.093 2.4 12.75 4.7 L 12 5.5 L 11.25 4.7 C 10.078 3.5 8.536 3 7 3 Z"/>
<path
android:name="path"
android:pathData="M 7 3 C 5.465 3 3.922 3.5 2.75 4.7 C 0.407 7.1 0.471 10.8 2.75 13.2 L 12 23 L 21.25 13.2 C 23.529 10.8 23.593 7.1 21.25 4.7 C 18.907 2.4 15.093 2.4 12.75 4.7 L 12 5.5 L 11.25 4.7 C 10.078 3.5 8.536 3 7 3 Z"
android:fillColor="#ff0000"/>
<group android:name="group">
<path
android:name="shimmer"
android:pathData="M 4 0 L 24 19 L 22 22 L 0 3 Z">
<aapt:attr name="android:fillColor">
<gradient
android:endColor="#FFC500"
android:endX="24"
android:endY="24"
android:startColor="#ED613A"
android:startX="0"
android:startY="0"
android:type="linear" />
</aapt:attr>
</path>
</group>
</vector>
</aapt:attr>
<target android:name="group">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="translateX"
android:duration="700"
android:valueFrom="10"
android:valueTo="-10"
android:valueType="floatType"
android:interpolator="#android:anim/linear_interpolator"/>
<objectAnimator
android:propertyName="translateY"
android:duration="700"
android:valueFrom="-10"
android:valueTo="10"
android:valueType="floatType"
android:interpolator="#android:anim/linear_interpolator"/>
</set>
</aapt:attr>
</target>
</animated-vector>
How can i convert this SVG file into a Animated vector drawable for android to show on the activity image.
SVG file
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#E31F64">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
I used some online tools to convert it but they simply creates a vector not the animated vector
Here is the vector
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="38dp"
android:height="38dp"
android:viewportWidth="38"
android:viewportHeight="38">
<group
android:translateX="1"
android:translateY="1">
<path
android:fillType="evenOdd"
android:strokeAlpha=".5"
android:strokeWidth="2"
android:pathData="M 18 0 C 27.941125497 0 36 8.05887450305 36 18 C 36 27.941125497 27.941125497 36 18 36 C 8.05887450305 36 0 27.941125497 0 18 C 0 8.05887450305 8.05887450305 0 18 0 Z" />
<path
android:fillType="evenOdd"
android:strokeWidth="2"
android:pathData="M36 18c0-9.94-8.06-18-18-18" />
</group>
</vector>
How can i create animated out of this to show spinning oval.
Thanks
Use ShapeShifter tool to create Animated Vector Drawable. It is a very basic tool yet fulfills the need.
I have the ff. vector drawable that I want to repeat based on the progress
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="6dp"
android:viewportHeight="6"
android:viewportWidth="10"
android:width="10dp">
<clip-path android:pathData="M 0 6 L 2.3 0 L 5 0 L 2.7 6 Z" />
<path
android:fillColor="#E60000"
android:pathData="M -5 -5 H 10 V 11 H -5 V -5 Z" />
<clip-path android:pathData="M 4.9 6 L 7.2 0 L 9.9 0 L 7.6 6 Z" />
<path
android:fillColor="#E60000"
android:pathData="M -0.1 -5 H 14.9 V 11 H -0.1 V -5 Z" />
</vector>
However setProgressDrawable stretches the entire drawable.
progressBar.setProgressDrawable(ContextCompat.getDrawable(context, getVectorDrawableRes()));
How do I repeat the above vector drawable instead of stretching it?
I have some AnimatedVectorDrawables that I've been working with no fail for a month or so. Today I created 2 more of these avds and one of them causes this "Resource$NotFoundException".
I am accessing it the exact same way as my other avds, it is in the same location as the other avds, and I created it the same way as the other avds. The only thing that is special about this one is a "startOffset" on one of the objectAnimators. I tried removing that line but the error persists. I have tried renaming the file, copy pasting the xml into another animation that I know is working, but these all cause a crash, which leads me to think it's something within the resource xml, but I can't spot anything.
Here is the stack trace:
android.content.res.Resources$NotFoundException: Drawable com.swerly.mypackage:drawable/test_avd with resource ID #0x7f0700ce
Caused by: android.content.res.Resources$NotFoundException: File res/drawable/test_avd.xml from drawable resource ID #0x7f0700ce
at android.content.res.ResourcesImpl.loadDrawableForCookie(ResourcesImpl.java:768)
at android.content.res.ResourcesImpl.loadDrawable(ResourcesImpl.java:600)
at android.content.res.Resources.getDrawableForDensity(Resources.java:876)
at android.content.res.Resources.getDrawable(Resources.java:818)
at android.content.Context.getDrawable(Context.java:605)
at com.swerly.wifiheatmap.FabHelper.setAndPlay(FabHelper.java:74)
at com.swerly.wifiheatmap.FabHelper.setupFab(FabHelper.java:65)
at com.swerly.wifiheatmap.ActivityMain.backNavigation(ActivityMain.java:82)
at com.swerly.wifiheatmap.ActivityMain.onBackPressed(ActivityMain.java:51)
at android.app.Activity.onKeyUp(Activity.java:2965)
at android.view.KeyEvent.dispatch(KeyEvent.java:2712)
at android.app.Activity.dispatchKeyEvent(Activity.java:3257)
at android.support.v7.app.AppCompatActivity.dispatchKeyEvent(AppCompatActivity.java:537)
at android.support.v7.view.WindowCallbackWrapper.dispatchKeyEvent(WindowCallbackWrapper.java:58)
at android.support.v7.app.AppCompatDelegateImplBase$AppCompatWindowCallbackBase.dispatchKeyEvent(AppCompatDelegateImplBase.java:336)
at android.support.v7.view.WindowCallbackWrapper.dispatchKeyEvent(WindowCallbackWrapper.java:58)
at com.android.internal.policy.DecorView.dispatchKeyEvent(DecorView.java:351)
at android.view.ViewRootImpl$ViewPostImeInputStage.processKeyEvent(ViewRootImpl.java:4714)
at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4586)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4128)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4181)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4147)
at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4274)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4155)
at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4331)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4128)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4181)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4147)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4155)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4128)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4181)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4147)
at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4307)
at android.view.ViewRootImpl$ImeInputStage.onFinishedInputEvent(ViewRootImpl.java:4468)
at android.view.inputmethod.InputMethodManager$PendingEvent.run(InputMethodManager.java:2435)
at android.view.inputmethod.InputMethodManager.invokeFinishedInputEventCallback(InputMethodManager.java:1998)
at android.view.inputmethod.InputMethodManager.finishedInputEvent(InputMethodManager.java:1989)
at android.view.inputmethod.InputMethodManager$ImeInputEventSender.onInputEventFinished(InputMethodManager.java:2412)
at android.view.InputEventSender.dispatchInputEventFinished(InputEventSender.java:141)
at android.os.MessageQueue.nativePollOnce(Native Method)
at android.os.MessageQueue.next(MessageQueue.java:325)
at android.os.Looper.loop(Looper.java:142)
at android.app.ActivityThread.main(ActivityThread.java:6541)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
Caused by: android.content.res.Resources$NotFoundException: Drawable com.swerly.wifiheatmap:drawable/$test_avd__0 with resource ID #0x7f070026
Caused by: android.content.res.Resources$NotFoundException: File res/drawable/$test_avd__0.x
Here is the code of the avd:
[EDIT: The issue is that the "pathData" fields weren't exported for some reason]
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="group"
android:pivotX="12"
android:pivotY="12">
<path
android:name="path"
android:pathData=""
android:fillColor="#000000"/>
<path
android:name="path_1"
android:pathData=""
android:fillColor="#000000"/>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="pathData"
android:duration="500"
android:valueFrom="M 17 3 L 5 3 C 3.89 3 3 3.9 3 5 L 3 12 C 3 14.333 3 16.667 3 19 C 3 20.1 3.89 21 5 21 C 9.667 21 14.333 21 19 21 C 20.1 21 21 20.1 21 19 L 21 7 C 19.667 5.667 18.333 4.333 17 3 L 17 3 M 9 16 C 9 14.34 10.34 13 12 13 C 13.66 13 15 14.34 15 16 C 15 17.66 13.66 19 12 19 L 12 19 C 10.34 19 9 17.66 9 16 M 5 9 L 5 5 L 15 5 L 15 9 L 15 9 L 5 9"
android:valueTo="M 7 6 L 5.6 7.4 C 7.133 8.933 8.667 10.467 10.2 12 L 5.6 16.6 C 6.067 17.067 6.533 17.533 7 18 C 7.667 17.333 8.333 16.667 9 16 C 9.667 15.333 10.333 14.667 11 14 C 11.667 13.333 12.333 12.667 13 12 L 11 10 C 10.333 9.333 9.667 8.667 9 8 L 7 6 M 8 16 C 8 16 8 16 8 16 C 8 16 8 16 8 16 C 8 16 8 16 8 16 L 8 16 C 8 16 8 16 8 16 M 8 8 L 8 8 L 8 8 L 8 8 L 8 8 L 8 8"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path_1">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="pathData"
android:startOffset="175"
android:duration="325"
android:valueFrom="M 17 12 L 17 12 L 17 12 L 17 12 L 17 12 L 17 12 L 17 12"
android:valueTo="M 16.2 12 L 11.6 16.6 L 13 18 L 19 12 L 13 6 L 11.6 7.4 L 16.2 12"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="group">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotation"
android:duration="100"
android:valueFrom="0"
android:valueTo="360"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
I figured it out. Apparently the software I was using left the "pathData" fields empty on this export for some reason -_-
What I want
I want to be able to draw a Vector Drawable from no path -> target. So for example, draw from nothing to a check mark SVG.
What I've tried
Here is my Vector drawable:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="128dp"
android:width="128dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:name="done"
android:pathData="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
android:fillColor="#fff"
android:strokeWidth="1"
android:strokeLineCap="round"
android:strokeColor="#fff"/>
That is just a check mark SVG.
Here is my animation (Which I know is wrong.. :( ). The path data for animating from one vector drawable to another must have the same number of path directions:
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="0"
android:valueTo="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
android:valueType="pathType"
xmlns:android="http://schemas.android.com/apk/res/android" />
And the animated vector (tying together the vector + animation)
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/ic_done">
<target
android:animation="#animator/ic_disappear"
android:name="opacity"/>
This is wrong as I noted above. How then, do I create an object animator for a SVG to animate from no path to the path I want. This animation is similar to someone drawing the drawable.
As you say, the two paths descriptions have to have the same number of commands and coordinates. Your path is a filled shape, and you can only animate once linearly. So you can't do a two-step down-and-then-up check motion. At least not with a single path morph.
A first simple approach would just be to start from the path start point. That happens to be at the crook of the check mark. So it doesn't look to bad.
<svg width="200" height="200" viewBox="0 0 24 24">
<path d="M0 0">
<animate attributeName="d" attributeType="XML"
from="M9 16.2 L 9 16.2 l 0 0 L 9 16.2 9 16.2 l 0 0 L 9 16.2z"
to="M9 16.2 L 4.8 12 l -1.4 1.4 L 9 19 21 7 l -1.4-1.4 L 9 16.2z"
dur="1s" fill="freeze" />
</path>
</svg>
Or you could start it at the centre point of the corner:
<svg width="200" height="200" viewBox="0 0 24 24">
<path d="M0 0">
<animate attributeName="d" attributeType="XML"
from="M9 17.6 L 9 17.6 l 0 0 L 9 17.6 9 17.6 l 0 0 L 9 17.6z"
to="M9 16.2 L 4.8 12 l -1.4 1.4 L 9 19 21 7 l -1.4-1.4 L 9 16.2z"
dur="1s" fill="freeze" />
</path>
</svg>
Or maybe start with the corner diamond and grow the two "arms" from there.
<svg width="200" height="200" viewBox="0 0 24 24">
<path d="M0 0">
<animate attributeName="d" attributeType="XML"
from="M9 16.2 L 9 16.2 l -1.4 1.4 L 9 19 l 1.4 -1.4 l -1.4-1.4 L 9 16.2z"
to= "M9 16.2 L 4.8 12 l -1.4 1.4 L 9 19 L 21 7 l -1.4-1.4 L 9 16.2z"
dur="1s" fill="freeze" />
</path>
</svg>
You may animate trimPathEnd property from 0 to 1 in duration of your choice instead of animating pathData. So change the propertyName to trimPathEnd and changing the AnimatedVectorDrawable file also suitably. The result is as if the tick is being written now.
Further, if you want a demo read the tutorial "An Introduction to Icon Animation Techniques". There are some interactive demo items in the body of the article.
You may also read about AnimatedVectorDrawable class in android developer site. Though trimPathEnd propertyName is not in the list, it works.