I am trying to do some simple image zooming and panning with Android and I have two simple questions.
First, when I call the animation using scale, it zooms using the upper left-hand corner of the image as the origin but I would like it to zoom from the center of the image.
The second question is once the animation is done, it resets the image to the original state and I would like it to stay at the final state.
Here is the xml I have for the scale:
<scale android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.0"
android:detachWallpaper="true"
android:duration="3000"></scale>
and in my code:
a = AnimationUtils.loadAnimation(this, R.anim.set);
a.reset();
ImageView iv = (ImageView) findViewById(R.id.imageView1);
iv.clearAnimation();
iv.startAnimation(a);
For scaling a image from center you have to set the pivotX and pivotY
try this code for scaling from center and retaining the state after scaling,
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="5"
android:fromYScale="1"
android:toYScale="5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true">
</scale>
Thanks...
Related
I wanted to make a basic animation on a TextView that would shrink when the user tapped it and then scaled back to the original size in order to provide visual feedback. Reading the docs, it seems that there are various ways to animate properties on Android, but I settled for using a view animation, defined in the following XML:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true" android:interpolator="#android:anim/accelerate_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="100"/>
<scale
android:startOffset="100"
android:fromXScale="1.0"
android:toXScale="2.0"
android:fromYScale="1.0"
android:toYScale="2.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="50"/>
This works well enough, but it strikes me as odd that I have to calculate by how much I'm going to need to scale the second tag instead of being able to just use values relative to the original. Is there any way to use values relative to the original element (ie, using fromXscale="0.5" and toXscale="1.0") in the second tag?
If I get your question right try this
tv.animate().scaleXBy(2.0f).scaleYBy(2.0f).setDuration(100).setInterpolator(new LinearInterpolator()).start();
You can add reverse repeat policy or just add scale back animation.
I am working in one slides based application and have created a shape using custom RelativeLayout and that is is very deep node in my application(position is about 90th level in viewHierarchy).And the shape is as content of the slides.
And while trying to animate translate , rotate or scale property of the shape using ObjectAnimator or ViewPropertyAnimator.The animation is not smooth. its flickering.
Here is the sample code snip
PropertyValuesHolder pvhTX,pvhTY;
PropertyValuesHolder.ofFloat(View.TRANSLATION_X,translateXFrom,translateXTo);
pvhTY = PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, translateYFrom, translateYTo);
anim1 = ObjectAnimator.ofPropertyValuesHolder(shape, pvhTX, pvhTY);
anim1.setDuration((long) (animData.getDetail().getDuration() * 1000));
// Adding listener to override onAnimationStart,onAnimationEnd according to my requirement.
anim1.addListener(new AnimationListener(shape, animData, slideEventHandler));
anim1.start();
In the above code
Shape is a customeView(custome relativlayout) it may be any geometrical shape like line circle cube triangle etc.
Please help me!!!
Probably you are using some images in view you are animating, or it moves some images that are animating. If you used drawable folder for them then try to move them to folder drawable-nodpi. Coz when u use drawable dir it every time makes dpi transformation so it can cause low performance when animating.
here is sample:
public static void applyAnimation(Context context, View view, int animationResource, int animationOffsetMilisec){
Animation anim = android.view.animation.AnimationUtils.loadAnimation(context, animationResource);
anim.setStartOffset(animationOffsetMilisec);
anim.setFillAfter(true);
if(view != null) {
view.setAnimation(anim);
view.startAnimation(anim);
}
}
then sample_animation.xml add to res.anim.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:startOffset="0"
android:toDegrees="360"
android:interpolator="#android:anim/linear_interpolator"/>
<scale
android:duration="100"
android:fromXScale="0.0"
android:toXScale="1.1"
android:toYScale="1.1"
android:fromYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="#android:anim/accelerate_interpolator"/>
<!--<alpha-->
<!--android:fromAlpha="0.0"-->
<!--android:toAlpha="1.0"-->
<!--android:duration="1000" />-->
<scale
android:duration="100"
android:fromXScale="1.1"
android:toXScale="0.91"
android:toYScale="0.91"
android:fromYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="100"
android:interpolator="#android:anim/accelerate_interpolator"/>
</set>
usage:
applyAnimation(context, yourview, R.anim.sample_animation, 0);
I am trying to code an animation that mimics a pulse animation that resembles this:
Concentrate on the inner blue circle (ignore the outer dark blue circle)
http://www.joedubs.com/wp-content/uploads/2016/01/breathe-now.gif
Here's what I managed to code so far:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:duration="2000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.8"
android:toYScale="0.8" />
<scale
android:duration="2000"
android:fromXScale="0.8"
android:fromYScale="0.8"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="2000"
android:toXScale="1.8"
android:toYScale="1.8" />
<scale
android:duration="2000"
android:fromXScale="1.8"
android:fromYScale="1.8"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="2000"
android:toXScale="1"
android:toYScale="1" />
</set>
While this works for a certain extent, the animation skips and stutters when it repeats again. Can someone tweak it a bit to mimic a smooth pulse animation? (grow and reduce)
You can add a ObjectAnimator like this, creating a pulsating effect in the reverse mode:
ObjectAnimator scaleDown = ObjectAnimator.ofPropertyValuesHolder(ImageView,
PropertyValuesHolder.ofFloat("scaleX", 0.5f),
PropertyValuesHolder.ofFloat("scaleY", 0.5f));
scaleDown.setDuration(300);
scaleDown.setRepeatCount(ObjectAnimator.INFINITE);
scaleDown.setRepeatMode(ObjectAnimator.REVERSE);
scaleDown.start();
Another way to achive that is have a CustomClass and override your OnDraw method, creating a effect of growing or decrease increasing a variable and recalling invalidate(). I did these in another post to make my button background grow, if you want to follow this way it can be useful for you.
Pulsating Button Android
I'm trying to create a Infinite pulsing effect in a ImageView.
But how is it possible to keep the offset?
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:duration="700"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5"/>
<scale
android:duration="700"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:toXScale="2"
android:toYScale="2"/>
</set>
This will make your (Image)View pulsate up to 1.2 its size and back, repeatedly.
ImageView iv = (ImageView) findViewById(R.id.my_imageview);
ObjectAnimator scaleDown = ObjectAnimator.ofPropertyValuesHolder(
iv,
PropertyValuesHolder.ofFloat("scaleX", 1.2f),
PropertyValuesHolder.ofFloat("scaleY", 1.2f));
scaleDown.setDuration(310);
scaleDown.setRepeatCount(ObjectAnimator.INFINITE);
scaleDown.setRepeatMode(ObjectAnimator.REVERSE);
scaleDown.start();
You can set startOffset values for each animations in your set.
If you want to create infinite animation, the best way would be to create custom View and in onDraw create your animation. For example: How to animate a path on canvas - android
Actually you can do animation with SurfaceView too.
In my Android app, I hava a scale animation.
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator" android:fillEnabled="true" android:fillAfter="true" >
<scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:duration="32000" />
</set>
it works fine. it scales the view from left to right. but I need to scale from right to left. so when I modify the fromXScale="-1.0", the animation does not happen and the view is scaled instantly without animation.
My animation xml for the reverse direction is given below:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator" android:fillEnabled="true" android:fillAfter="true" >
<scale android:fromXScale="-1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:duration="32000" />
</set>
How can I animate the View from reverse direction? what is wrong with my code?
You should also add a android:fillBefore="true" in your animation.
The in the forward animation your view usually will have a scale of 1 which mean you don't need to set it at start. But in the reverse animation you start at default (ie 1) and animate to... 1
using Pivot solved the problem. Its a better practice to control direction of an animation through pivotX and pivotY.