I'm trying to make a flipping animation in Android.
I am using this code:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Set alpha to 0 before animation -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0"/>
<!-- Rotate -->
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:duration="#integer/card_flip_time_full"/>
<!-- Half-way through the rotation set the alpha to 1 -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="#integer/card_flip_time_half"
android:duration="1"/>
</set>
However, I want it to flip from top to bottom. Something like this:
How do I do this?
You can do it programmatically. Here is the C# from Xamarin. Can't test the Java right now but it will be very similar.
ImageView block = FindViewById<ImageView>(Resource.Id.imgBlock);
ObjectAnimator blockSpin = ObjectAnimator.OfFloat(block, "rotationX", 0, 360);
imageCard.PivotX = 0.5f; //so it spins on center
float scale = metrics.Density;
imageCard.SetCameraDistance(8000*scale);
/*Set camera distance as required to avoid distortion.
Multiplying by scale keeps distance the same across devices. */
blockSpin.SetDuration(500);
blockSpin.Start();
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.
Using alpha as the propertyName of the objectAnimator does nothing at all. The objectAnimator is connected to a path inside the vector.
fading_animator.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="700"
android:propertyName="alpha"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:repeatCount="infinite"
android:repeatMode="restart"/>
</set>
animated_vector.xml:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/vector_drawable">
<target
android:name="pathTarget"
android:animation="#animator/fading_animator"/>
</animated-vector>
When trying to animate the alpha of a path, you have to use either fillAlpha or strokeAlpha. Similarly, scaleX and scaleY will not work on a path but it will work on a group inside the vector.
How to set pivotX to right edge in xml. In res/anim it is possible by setting the value to "100%", but how it make in "res/animator" ?
res/animator/slide.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="scaleX"
android:valueFrom="0.f"
android:valueTo="1.f"
android:duration="#integer/durationAnimate"
android:interpolator="#android:interpolator/accelerate_decelerate" />
<objectAnimator
android:duration="500"
android:propertyName="pivotY"
android:valueFrom="1.0"
android:valueTo="1.0"
android:valueType="floatType"/>
</set>
I need it in animator because, I make picture browser when there is random animation.
Animation implementation by:
getSupportFragmentManager()
.beginTransaction()
.setCustomAnimations(R.anim.slide_right_in, R.anim.slide_right_out)
.replace(R.id.mainActivityNew_fragmentAnimate, FotoFragment.newInstance(itemsController.nextItem()))
.commit();
In res/anim/... can not rotate fragment in axis (x or y), therefore, I would prefer to accomplish in res/animator/.... Unfortunately, I can in that make one type of animation and in that the second type of animation /
How to mention the pivot point for the scale animation in the below xml file. How to specify the pivot being the left edge, right edge and the centre (the default)
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:propertyName="scaleX"
android:valueType="floatType"
android:duration="500"
android:valueTo="0"/>
UPDATE:
the I tried the following and it isn't working
android:pivotX="1.0"
As per this link it seems this is currently not possible. As suggested in the page we will have to set the transformPivotX property of layout we are animating.
hi i have 2 views that i want to have zig zag up and off the screen. ive tried using object animators like this
float 1
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator"
android:ordering="sequentially" >
<objectAnimator
android:duration="6000"
android:propertyName="y"
android:repeatCount="0"
android:valueFrom="1500"
android:valueTo="-1000"
android:valueType="floatType" />
</set>
and float 2
<objectAnimator
android:duration="3000"
android:propertyName="x"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueFrom="-250"
android:valueType="floatType"
android:valueTo="50" />
<set
android:duration="3000"
android:propertyName="x"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueFrom="-250"
android:valueTo="50"
android:valueType="floatType" />
</set>
but the results are varied, ie works on tablets but not smaller screens,
I've changed the code to do this programmatically and all it does is slightly change the way I goes up the screen all I want is both balloons to go up the screen at the moment it works beautifully on my tablet but on smaller screens it only shows one balloon. Been struggling on this a while now all views are laid out in XML and are hidden until needed I found there was a way of using fractions in my from and to values but apparently its deprecated any suggestions for a total n00b like me?
Have you tried creating your own custom interpolator, it basically defines how your animation is going to behave with respect to time, for example accelerate interpolator when used with lets say translate animation, it will accelerate your view, so you might have to create a custom interpolator, that will define your zig zag path, along with translate animation. you can read from here :
Tutorial on Interpolators