Android水波纹的另类实现

最新推荐文章于 2021-05-25 23:20:28 发布

andboby

最新推荐文章于 2021-05-25 23:20:28 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏：安卓 ANDROID animation动画详解文章标签： android 动画水波纹

本文链接：https://blog.youkuaiyun.com/wangqiubo2010/article/details/77747235

ANDROID 同时被 3 个专栏收录

33 篇文章

订阅专栏

安卓

25 篇文章

订阅专栏

animation动画详解

2 篇文章

订阅专栏

本文介绍了一种通过动画实现水波纹效果的方法，点击时触发图片动画，利用ScaleAnimation和AlphaAnimation结合完成缩放与透明度变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文将以动画形式来实现水波纹效果，核心思想就是点击的时候通过执行一张图片的动画来达到水波纹效果。

首选把水波纹效果的代码贴出来，本文使用了三个类，如下。

类WaterRippleActivity.java

import android.app.Activity;
import android.os.Bundle;

import com.example.kingsoft.CustomAdapter.R;
import com.example.kingsoft.CustomWidget.WaterRippleFrameLayout;

public class WaterRippleActivity extends Activity {
    WaterRippleFrameLayout waterRippleFrameLayout = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.water_ripple_layout);
        waterRippleFrameLayout = (WaterRippleFrameLayout)findViewById(R.id.water_repple_framelayout);
        waterRippleFrameLayout.init();
    }
}

类WaterRippleFrameLayout.java

import android.content.Context;
import android.support.annotation.AttrRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.StyleRes;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.kingsoft.CustomAdapter.R;



public class WaterRippleFrameLayout extends FrameLayout{
    private ImageView mImageView = null;
    private boolean mIsInit = false;
    public WaterRippleFrameLayout(@NonNull Context context) {
        super(context);
    }

    public WaterRippleFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public WaterRippleFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public WaterRippleFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr, @StyleRes int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }


    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_UP){
            onClick(mImageView,ev);
        }
        return true;//super.dispatchTouchEvent(ev);
    }

    public void  init(){
        if (mIsInit)
            return;
        getViewTreeObserver().addOnPreDrawListener(() -> {
            if (!mIsInit){
                mImageView = (ImageView)findViewById(R.id.ppt_remote_img_clicker);
                mImageView.setVisibility(GONE);
                mIsInit =  true;
            }
            return true;
        });
    }

    public void onClick(View v, MotionEvent ev) {
        if (null != mImageView) {
            float curX = ev.getX();
            float curY = ev.getY();
            mImageView.setVisibility(VISIBLE);
            ViewLayoutUnitl.setViewMargin(mImageView, (int)(curX - mImageView.getWidth()/2), (int)(curY - mImageView.getHeight()/2));
            doWaterRippleAnim(mImageView);
        }
    }

    public void doWaterRippleAnim(View view){
        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation scaleAnimation = new ScaleAnimation(1,2,1,2);
        AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(alphaAnimation);
        animationSet.setDuration(1000);
        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                view.setVisibility(GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        view.startAnimation(animationSet);
    }

    public static class  ViewLayoutUnitl{
        public static void setViewMargin(View view, int x, int y){
            ViewGroup.LayoutParams params = view.getLayoutParams();
            if (params instanceof FrameLayout.LayoutParams){
                ((MarginLayoutParams)params).leftMargin = x;
                ((MarginLayoutParams)params).rightMargin = -x;
                ((MarginLayoutParams)params).topMargin = y;
                ((MarginLayoutParams)params).bottomMargin = -y;
                view.setLayoutParams(params);

            }else if (params instanceof LinearLayout.LayoutParams){
                ((LinearLayout.LayoutParams)params).leftMargin = x;
                ((LinearLayout.LayoutParams)params).rightMargin = -x;
                ((LinearLayout.LayoutParams)params).topMargin = y;
                ((LinearLayout.LayoutParams)params).bottomMargin = -y;
                view.setLayoutParams(params);
            }else {
                FrameLayout.LayoutParams newParams = new FrameLayout.LayoutParams(params);
                newParams.leftMargin = x;
                newParams.rightMargin = -x;
                newParams.topMargin = y;
                newParams.bottomMargin = -y;
                view.setLayoutParams(newParams);
            }
        }
    }
}

资源文件water_ripple_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <com.example.kingsoft.CustomWidget.WaterRippleFrameLayout
        android:id="@+id/water_repple_framelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/ppt_remote_img_clicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ppt_remote_touch_circle_black"/>
    </com.example.kingsoft.CustomWidget.WaterRippleFrameLayout>
</LinearLayout>

图片：

这里写图片描述

核心方法doWaterRippleAnim讲解：通过Scale和Alpha动画来实现水波纹效果，即是一边进行缩放动画，一边进行透明度动画。增加动画的监听，当动画执行完毕即可隐藏本ImageView。

public void doWaterRippleAnim(View view){
        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation scaleAnimation = new ScaleAnimation(1,2,1,2);
        AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(alphaAnimation);
        animationSet.setDuration(1000);
        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                view.setVisibility(GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        view.startAnimation(animationSet);
    }

内部类ViewLayoutUnitl，里面是计算点击事件执行动画的坐标，通过margin的偏移值来实现。

注意以下代码：addOnPreDrawListener(）是在绘制之前执行的，控件都会经历mesure -> layout ->draw,最后呈现在桌面，而只有经过mesure和layout之后才能精准获取到控件尺寸，因此经常会通过addOnPreDrawListener(）来获取控件尺寸；本例中通过这个函数来获取子对象ImageView。注意下面代码采用拉姆表达式。

        getViewTreeObserver().addOnPreDrawListener(() -> {
            if (!mIsInit){
                mImageView = (ImageView)findViewById(R.id.ppt_remote_img_clicker);
                mImageView.setVisibility(GONE);
                mIsInit =  true;
            }
            return true;
        });