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
Related
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'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.
I checked out the transition animation that comes with API code and i found animation zoom_enter and zoom_exit in which activity 1 sinks IN to show activity 2. I need the other way round. I need activity 2 to zoom out from inside and come on top. (I hope you are getting me). This type of animation is the same on iphone screen transition.
The code below is what i have for the effect that i don't need.
Here is the code for zoom_enter.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<scale android:fromXScale="2.0" android:toXScale="1.0"
android:fromYScale="2.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
And here is the code for zoom_exit.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator"
android:zAdjustment="top">
<scale android:fromXScale="1.0" android:toXScale=".5"
android:fromYScale="1.0" android:toYScale=".5"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_mediumAnimTime" />
<alpha android:fromAlpha="1.0" android:toAlpha="0"
android:duration="#android:integer/config_mediumAnimTime"/>
</set>
Then right after startActivity i call the method below:
overridePendingTransition(R.anim.zoom_enter, R.anim.zoom_exit);
Can anyone suggest how i can make changes to the above files to have the screen transition i explained?
Try this in zoom_enter.xml and remove animations from zoom_exit.xml. You will see better effects.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<scale android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="0.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
Hope this helps.
overridePendingTransition(zoom_enter_new, zoom_exit_actual);
First param is for the incoming Activity (so the new)
Second param is for the outgoing Activity (the actual)
So if you want to make the same effect of the video where seems that
the actual activity is hide instantly than second param need to be set to 0 (means no animation)
overridePendingTransition(zoom_enter_new, 0);
And for making the new activity zoomin like the video this is the anim xml resource explained (zoom_enter_new.xml in res/anim/ dir)
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<!--scale view fromX fromY are the starting point (.5 is 50% of scale, )-->
<!--scale view toX and toY are the final state (1 is 100%)-->
<!--pivot is the center of animation, so in your case the zoomin on the video is from the exact center (50% pivot x, 50% pivot Y)-->
<scale android:fromXScale=".5" android:toXScale="1"
android:fromYScale=".5" android:toYScale="1"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="#android:integer/config_longAnimTime" />
<!-- alpha animation is made at the same time of scale animation, and for me make a better and smooth result, alpha 0 is full trasparent, 1 is the normal state. The final alpha state of the activity after this animation is 1, so pay attention toAlpha must be 1 if you don't want glitch-->
<alpha android:fromAlpha="0.5" android:toAlpha="1"
android:duration="#android:integer/config_longAnimTime"/>
</set>
overridePendingTransition(R.anim.zoom_enter_new, 0);
Tobia
I have a gridview, and I am trying to achieve a fly in effect on the images within it. This would be very similar to the effect seen when you load up gallery 3D and your image folders "drop in".
I have googled around the subject, and think I need to use a ViewAnimator and generate the animation through that: http://developer.android.com/reference/android/widget/ViewAnimator.html#setInAnimation(android.view.animation.Animation)
However, I am not sure and any help on how to achieve this whatsoever would be very welcome!
Regards
Mark
Do you want the fly-in animation per grid, or for the entire view?
For the entire view, use this:
Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.flyin);
findViewById(R.id.YourViewId).setAnimation(anim);
anim.start();
Then specify your animation in a file flyin.xml like this:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true">
<scale android:interpolator="#android:anim/decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="0.0"
android:pivotX="50%" android:pivotY="50%"
android:fillAfter="false" android:duration="250"/>
</set>
Put that file in your res/anim-directory.