Another simple question that I can't seem to wrap my head around. I want an animation using ObjectAnimator to scale upwards from the center. However, I'm not sure how to set the PivotX/Y properties as any value I apply doesn't seem to affect the view. When I was using a scaleanimation, it worked fine but I must use an ObjectAnimator here.
I've tried
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view,"scaleX",0.0f,1.0f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(view,"scaleY",0.0f,1.0f);
//I've tried a wide range of values from 0,0 to 0,0.5, to 0.5, 0.5 but none of them do anything
ObjectAnimator pivotX = ObjectAnimator.ofFloat(view,"pivotX",0,1f);
ObjectAnimator pivotY = ObjectAnimator.ofFloat(view,"pivotY",0,1f);
//I've also tried view.setPivotX(0.5f) but that didn't do anything either
animatorSet.playTogether(scaleX,scaleY,pivotX,pivotY);
animatorSet.start();
I'm just not really sure how to make it scale from the center. I've tried not even using pivot but that didn't do anything either.
Any help is appreciated,
Thanks
** EDIT **
The following sort of works, except it isn't completely centered it instead grows towards the top left but still sort of centered. Its hard to describe. I tried using 0.5f and it didn't work either
ObjectAnimator pivotX = ObjectAnimator.ofFloat(view,"pivotX",1f);
ObjectAnimator pivotY = ObjectAnimator.ofFloat(view,"pivotY",1f);
I was having a similar problem scaling a vector animation defined in XML. It now scales from its center after placing the pivotX & pivotY settings in the Drawable instead of the ObjectAnimator, like so:
<?xml version="1.0" encoding="utf-8"?>
<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="100dp"
android:height="100dp"
android:viewportWidth="100"
android:viewportHeight="100">
<group
android:name="scaleGroup"
android:pivotX="50"
android:pivotY="50"
android:scaleX="1.0"
android:scaleY="1.0" >
<path
android:name="v"
android:strokeColor="#00e9bd"
android:strokeWidth="6"
android:pathData="M 50 13 C 70.4345357437 13 87 29.5654642563 87 50 C 87 70.4345357437 70.4345357437 87 50 87 C 29.5654642563 87 13 70.4345357437 13 50 C 13 29.5654642563 29.5654642563 13 50 13 Z" />
</group>
</vector>
</aapt:attr>
<target android:name="scaleGroup"> *
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="1000"
android:propertyName="scaleX"
android:valueFrom="0.5"
android:valueTo="1.0" />
<objectAnimator
android:duration="1000"
android:propertyName="scaleY"
android:valueFrom="0.5"
android:valueTo="1.0" />
</set>
</aapt:attr>
</target>
</animated-vector>
If you want to scale upwards one clear option is:
view.setPivotY(100);
and downwards:
view.setPivotY(0);
then animate.
pivotX and pivotY should be 1/2 the viewportWidth and viewportHeight respectively if you want to scale from the center.
These properties should be set on the group tag of your vector drawable. This group tag should be outside of the path tag that you want to scale, similar to the answer above.
Related
In Android 5.0 (API Level 21) and above, you can define vector
drawables, which scale without losing definition.
I use Vector Assets in Android Studio (API 28). Example: ic_mybutton.xml.
Vector drawables are displayed on Views in original quality: image, image, image.
ImageButton button = new ImageButton(context);
button.setImageResource(R.drawable.ic_mybutton);
Using this animation on Buttons and ImageButtons (or other Views):
Animation animation = new ScaleAnimation(
1.0f, 0.9f,
1.0f, 0.9f,
Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 1f);
animation.setFillAfter(true);
animation.setDuration(1000);
button.startAnimation(animation);
produces terrible image distortion: image, image, image.
What am I doing wrong?
The problem can be solved using the animator.
All other known libraries, such as Boom, RxAnimation and the like, degrade image quality when scaling.
anim_scale.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="scaleX"
android:repeatCount="1"
android:valueFrom="1.0"
android:valueTo="0.9"
android:valueType="floatType" />
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="scaleY"
android:repeatCount="1"
android:valueFrom="1.0"
android:valueTo="0.9"
android:valueType="floatType" />
</set>
animated_vector.xml:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/ic_mybutton">
<target
android:animation="#animator/anim_scale"
android:name="anim_scale" />
</animated-vector>
Put your paths in <group> tag and set the pivot.
ic_mybutton.xml:
<group
android:name="anim_scale"
android:pivotX="177.5"
android:pivotY="37.5">
...
</group>
Thus (with slight changes), you can make an animation of a button click without losing vector image quality:
ImageButton button = findViewById(R.id.button_apply);
button.setImageResource(R.drawable.animated_vector);
button.setOnClickListener(v -> ((Animatable) button.getDrawable()).start());
P.S.
Following method does not work (losing quality):
ObjectAnimator animator = ObjectAnimator.ofFloat(button, "scale", 0.9f);
animator.setDuration(200);
animator.start();
And StateListAnimator class also degrades image quality.
I'm trying to animate my exported SVG file from illustrator in my Android app by animating the line or path of character to show to the users how to properly write a character(ex: Japanese & Chinese character). But when I run the application, it only animates the edge/stroke of a character and brings back to its original state. Does anyone has already experienced this case before?
Here is my SVG drawable
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="300dp"
android:height="300dp"
android:viewportWidth="300.0"
android:viewportHeight="300.0">
<path
android:name="invertu"
android:fillColor="#FF000000"
android:pathData="M21.23,263.43c0.68,-14.76 6.03,-28.9
9.58,-43.12c3.82,-15.3 6.51,-30.8 10.68,-46.04c4.22,-15.46 9.06,-30.74
14.02,-45.97c3.7,-11.38 7.53,-22.54 14.07,-32.66c14.19,-21.95 43.47,-29.83
67.74,-33.8c13.6,-2.22 27.52,-2.66 41.27,-2.32c10.71,0.27 21.44,2.13
31.29,6.5c28.73,12.76 43.98,42.42 53.04,70.95c5.67,17.85 9,36.29
12.31,54.69c4.36,24.27 7.8,48.7 8.3,73.39c0.19,9.66 15.19,9.68
15,0c-0.65,-32.46 -6.33,-64.51 -12.34,-96.33c-4.07,-21.5 -9.94,-42.7
-19.22,-62.57c-8.76,-18.76 -21.57,-35.7 -38.92,-47.24c-20.15,-13.41
-44.1,-15.18 -67.61,-14.26c-24.9,0.97 -49.66,5.88 -72.26,16.55c-20.76,9.8
-33.38,26.41 -41.69,47.37c-4.61,11.65 -8.1,23.81 -11.83,35.77c-4.22,13.53
-8.13,27.16 -11.53,40.92c-3.27,13.2 -5.45,26.61 -9.05,39.73c-3.47,12.65
-7.23,25.26 -7.84,38.45C5.79,273.11 20.79,273.06 21.23,263.43L21.23,263.43z"
android:strokeLineCap="round"
android:strokeLineJoin="round"
android:strokeWidth="3"
android:trimPathEnd="0"/> </vector>
and this is my animated vector
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="#drawable/ic_ba">
<target android:name="invertu">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="1000"
android:interpolator="#android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
The VSG that I've exported from Adobe Illustrator becomes transparent in the center, only the outline animates from one point to another end.
TIA
trimPathStart and trimPathEnd are intended to only set the start and end of the stroke (outline) of the path. If you want the filled part of the path to be animated you'll have to do it another way.
If the line shapes in your characters have a constant width, then just draw them as a thick line - rather than an outline like it is now. If you do that, the lines will be able to be animated using the trimPath method.
I can't figure out why my Animated Vector is not working. I can see the first path but the second path that I want to animate as an addition to the first path is not showing. This is how my code looks like:
<?xml version="1.0" encoding="utf-8"?>
<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:height="24dp"
android:width="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0" >
<path
android:name="v"
android:strokeColor="#000000"
android:strokeWidth="3"
android:pathData="M6,11 l3.5, 4 l0, 0" />
</vector>
</aapt:attr>
<target android:name="v" >
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="1000"
android:propertyName="pathData"
android:valueFrom="M6,11 l3.5, 4 l0, 0"
android:valueTo="M6,11 l3.5, 4 l8, -7"
android:valueType="pathType"/>
</set>
</aapt:attr>
</target>
</animated-vector>
So, M6,11 l3.5, 4 l0, 0 is showing on the screen but not M6,11 l3.5, 4 l8, -7
I tried copy the example from the bottom of the google docs here and that did work. My file animated correctly if I use their code which tells me I do start the animation correctly. Is this a typo or something wrong with my path data?
I tested my drawable in a new project and to my surprise it was working fine.
I was using com.android.support:design:25.1.0 in my first project and it turns out degrading to com.android.support:design:24.2.0 made it work.
After testing a bit more I found that changing from app:srcCompat="#drawable/animated_vector" to android:src="#drawable/animated_vector" on my ImageView made it work for com.android.support:design:25.1.0 as well.
Im not sure whats going on but now it works at least. If someone has more details on this please let me know. I thought we where supposed use srcCompat for vector drawables.
I'm using <animated-vector> to rotate an arrow:
<target
android:name="rotationGroup"
android:animation="#animator/animator" />
and the animator:
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="rotation"
android:valueFrom="180"
android:valueTo="0"/>
And the vector that I'm transforming.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<group
android:name="rotationGroup"
android:pivotX="12"
android:pivotY="12"
android:rotation="0.0">
<group
android:translateX="7.0"
android:translateY="9.0">
<path
android:fillColor="#color/sc_item_filter_list_chevron"
android:pathData="M 1,-4 L 1,4 L -1,4 L -1,-4 Z" />
</group>
</group>
</vector>
What is my problem:
When I click the button - I use the resource with an arrow pointing up. Then I animate it 180.0 degrees down.
When I click again - I switch to arrow pointing down and re-animate it back up to 0.0.
The bug I've encountered: When I tap the button between the animations (so for example when the arrow is at 90.0 degrees) the animations jumps to the beginning.
I tried using the <animated-selector> but I guess it didn't fix my problem. (or maybe it was me implementing it wrong)
I may switch to Property Animation, but it sounds like a lot of work. So before I do that - is there a better solution for this, using stuff I've showed you?
I'm trying to make an Android vector animation, which contains a rotation on a vectorial group. Basically, if the degree transition would be constant, I would use those resources:
My VectorDrawable:
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
android:name="myRotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="0">
<path
android:name="myName"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z"/>
</group>
</vector>
My AnimatedVectorDrawable:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/my_vector_drawable" >
<target
android:name="myRotationGroup"
android:animation="#animator/my_rotation" />
</animated-vector>
And my ObjectAnimator:
<objectAnimator
android:duration="500"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
However, as you can see above, the final degree of rotation is set in the ObjectAnimator resource, as 360° for instance.
For my animation, how can I change programmatically this final value? The rotation degree need to be computed with some other data, so I don't know the target value before the animation starts.
Thank you for your help!
I think the solution is to create an object of ObjectAnimator in the class like this
ObjectAnimator myRotation = ObjectAnimator.ofFloat(target,"rotation",360f);
myRotation.setDuration(500);
myRotation.start(); // this will start the animation
// here target is the object of the view on which you want to apply this animation
// and you can change this 360f to any number at which degree you want to rotate
for more information check this out