I have an imageview in which I have 3 images
green_circle - which I have to zoom in -> then zoom_out (on specified time)
white_tick - which I have to zoom in -> then zoom_out (on specified time)
green_sparkle - which zooms in and fades out
Imageview is being setup as following using layer drawables -
int[] firstImageArray = new int[]{R.drawable.ic_green_circle, R.drawable.ic_outer_sparkle, R.drawable.ic_white_tick_mark};
Drawable[] layers = new Drawable[firstImageArray.length];
for(int i = 0; i<firstImageArray.length; i++) {
layers[i] = getResources().getDrawable(firstImageArray[i]);
}
imageView.setImageDrawable(new LayerDrawable(layers));
animation files are something similar to this (for zoom-in and zoom-out at specified times):
R.anim.image_circle_zoom :
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2333"
>
<scale
android:duration="233"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
<scale
android:duration="69"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="1931"
android:toXScale="1.18"
android:toYScale="1.18" />
<scale
android:duration="165"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="2000"
android:toXScale="0.0"
android:toYScale="0.0" />
</set>
I have to achieve an animation similar to this link1 or link2
I have tried AnimationSet, AnimatorSet and ObjectAnimator but I wasn't able to achieve the desired results. Any help would be appreciated on how it can be achieved?
You add links to Lottie animation files. That files can be included into project directly. Just copy json file from site and put it into LottieAnimationView. Here is link to docs and github repository. The easiest way to do such animations is via lottie files.
Another way is to use SVG image, where each part of image should be separate path. Then all you need to do is animate that paths via AnimatedVectorDrawable. There are a lot of good tutorials on how it can be implemented like this and this
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 very close to getting a "coin flipping" animation to work, but due to the limitations (bugs?) in the current Animation system - I cannot find a way to show BOTH sides of a coin flipping in the air.
For example, I have the following Animation .XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:repeatCount="17"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="0.0"
android:pivotX="50%" android:pivotY="50%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="60"
/>
<scale
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="2.0"
android:fromYScale="1.0" android:toYScale="2.0"
android:pivotX="50%" android:pivotY="50%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="800"
/>
<translate
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="-150%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="800"
/>
</set>
This "fakes" a flipping animation by scaling the coin on the Y-axis and reversing it on a loop. In combination to this, there's a scale to make the overall animation bigger, while also translating it up and down. But it is only ever gonna show the one side of the coin.
I tried having two of these animations, each side of the coin, running at the same time, but I cannot find a way to stagger them due to the REPEATCOUNT not working when applied to an AnimationSet. Otherwise I could introduce some kind of delay after one anim (and before the other one) so they alternate, giving the illusion of a coin flipping.
Does anyone know any way I can tweak this to get the desired result?
I had thought of giving up and doing a frame-based anim (pre-render the flip as frames), but it appears you can't mix Frame & Tween anims, so I'd lose the flip "height" and "distance" effects.
(I have another issue when it comes to the coin landing - e.g. the final result is random, but I'm hoping I can switch in the actual result at the end?)
Thanks in advance!
I recently wanted to implement something like this for a project. I finally came up with a solution and the result was good enough. Hope it helps someone else who is trying to achieve the same animation.
I uploaded the result as a gist on GitHub.
For a preview of the animation click here.
For the full android studio project visit our CoinToss repository.
I was looking for something like this myself, even with the scaling of the image so it appears the imageview is getting closer to the screen.
I combined your animation with this solution to do exactly what you wanted and its fairly lightweight, missing out the need for multiple views.
https://github.com/Lojko/Booty/blob/master/src/game/booty/BootyGameActivity.java
Changed Location of the Original Link: http://www.jasoncavett.com/2011/05/changing-images-during-an-android-animation/#comments
See the FlipCoin class and how its used, I have an animation already existing (created in the same way as detailed by the link)
This code shows the same procedure
http://www.inter-fuser.com/2009/08/android-animations-3d-flip.html
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.