CODEWITHSUNDEEP
androidandroid-animationandroid-imageview
OShiffer
OShiffer

Reputation: 1398

Wave animation for imageview android

I am trying to create a button with wave animation. I do not want to change the size of the image, but to do effect of waves from the picture and outside.

I tried this: 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<objectAnimator
    android:propertyName="scaleX"
    android:duration="2000"
    android:valueFrom="1.0"
    android:valueTo="1.3"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:valueType="floatType" />

<objectAnimator
    android:propertyName="scaleY"
    android:duration="2000"
    android:valueFrom="1.0"
    android:valueTo="1.3"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:valueType="floatType" />

But this changes the size of the image instead of sending a wave from it.

I want something like this:

wave animation example image

Upvotes: 1

Views: 8712

Answers (1)

Emil Adz
Emil Adz

Reputation: 41119

To create this effect you will need to use AnimationSet, And add to it two animations, one animation would be resizing animation, basically changing the size of the view, the other animation would be a fading animation basically changing the alpha level of this view.

obviously they would be applied to another view and not the icon view.

Code sample:

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setDuration(1000);
 
AnimationSet animation = new AnimationSet(true);
animation.addAnimation(sizingAnimation);
animation.addAnimation(fadeOut);
this.setAnimation(animation);

EDITED (15/09/2020):

Resizing Animation:

 private Animation getResizeAnimation(Context aContext, boolean enlarge) {
    Animation resizeAnimation;
    if (enlarge) {
        resizeAnimation = AnimationUtils.loadAnimation(aContext, R.anim.scale_up_card);
    } else {
        resizeAnimation = AnimationUtils.loadAnimation(aContext, R.anim.scale_down_card);
    }
    resizeAnimation.setFillAfter(true);
    return resizeAnimation;
}

Where scale_up_card is:

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromXScale="1.0"
       android:fromYScale="1.0"
       android:toXScale="1.03"
       android:toYScale="1.03"
       android:pivotX="50%"
       android:pivotY="10%"
       android:duration="100">
</scale>
</set>

And scale_down_card:

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromXScale="1.03"
       android:fromYScale="1.03"
       android:toXScale="1.0"
       android:toYScale="1.0"
       android:pivotX="50%"
       android:pivotY="10%"
       android:duration="100">
</scale>
</set>

Obviously, for you case maybe the needed animations are different.

Upvotes: 6

Related Questions