Android自定义View实现水波纹动画

159 浏览量更新于2024-09-01 收藏 120KB PDF 举报

"Android 自定义view实现水波纹动画效果" 在Android开发中，自定义View是一种常见的技术，它允许开发者创建独特的用户界面元素和动画效果。本实例关注的是如何使用自定义View来实现水波纹的动画效果。水波纹动画可以增添应用程序的视觉吸引力，尤其是在游戏或动态壁纸等场景中。首先，我们要理解实现水波纹动画的两种主要方式： 1. **标准正余弦水波纹**：这种方法依赖于数学中的正余弦函数来模拟水波的起伏。通过调整函数参数（如周期、振幅和初始相位），可以创造出不同形态的水波纹。在Android中，我们可以在onDraw()方法中计算每个波纹点的坐标，然后不断更新这些点的位置来实现动画效果。 - **onMeasure()**: 这是第一个被调用的方法，用于测量View的大小。在这里，我们可以设定初始参数，如计算周期因子，以确保水波纹在整个View的宽度上均匀分布。 - **onSizeChanged()**: 在View尺寸改变后调用，可以获取到View的实际宽度和高度，这对于计算水波纹的坐标至关重要。 - **onDraw()**: 这是关键的绘制方法，我们将根据正余弦函数计算的坐标在Canvas上绘制水波纹。 2. **非标准圆形液柱水波纹**：与正余弦函数不同，这种效果可能涉及到更复杂的图像处理技术，如PorterDuffXfermode。PorterDuffXfermode是一种图像混合模式，它可以用来合并两个图形，实现各种视觉效果，包括水波纹的扩散和混合。实现这种效果通常需要更多图像处理的知识，包括理解和应用不同的绘图模式。为了实现这两种水波纹效果，你需要熟悉Android的图形绘制API，包括Canvas、Paint和Path类的使用。同时，理解正余弦函数以及如何将其应用于二维坐标系统也是非常重要的。在编写代码时，需要在onDraw()方法中使用一个循环，不断地更新波纹的位置并重绘View，以实现动画的连续效果。在实际开发中，你可以根据需求选择继承自View、TextView或ImageView等类，然后重写上述关键方法。在这个例子中，选择直接继承自View是最简单的选择，因为它提供了基本的绘图功能，适合实现自定义动画。最后，记得在AndroidManifest.xml中为你的自定义View设置合适的权限，并在布局文件中引用这个自定义View，以便在运行时可以看到动画效果。通过不断实践和优化，你可以创造出更加逼真的水波纹动画，满足产品设计人员的需求，提升用户体验。

Android 自定义自定义view实现水波纹动画效果实现水波纹动画效果

主要介绍了 Android 自定义view实现水波纹动画效果的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧

在实际的开发中，很多时候还会遇到相对比较复杂的需求，比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果，兴致高昂的来找你，看了之后目的很明确，当然就是希望你能给她；

在这样的关键时候，身子板就一定得硬了，可千万别说不行，爷们儿怎么能说不行呢；

好了，为了让大家都能给妹纸们想要的，后面会逐渐分享一些比较比较不错的效果，目的只有一个，通过自定义view实现我们所能实现的动效；

今天主要分享水波纹效果：今天主要分享水波纹效果：

1.标准正余弦水波纹；

2.非标准圆形液柱水波纹；

虽说都是水波纹，但两者在实现上差异是比较大的，一个通过正余弦函数模拟水波纹效果，另外一个会运用到图像的混合模式（PorterDuffXfermode）；

先看效果：

自定义View根据实际情况可以选择继承自View、TextView、ImageView或其他，我们先只需要了解如何利用Android给我们提供好的利刃去满足UI妹纸；

这次的实现我们都选择继承view，在实现的过程中我们需要关注如下几个方法：

1.onMeasure():最先回调，用于控件的测量;

2.onSizeChanged():在onMeasure后面回调，可以拿到view的宽高等数据，在横竖屏切换时也会回调;

3.onDraw()：真正的绘制部分，绘制的代码都写到这里面;

既然如此，我们先复写这三个方法，然后来实现如上两个效果；

一：标准正余弦水波纹一：标准正余弦水波纹

这种水波纹可以用具体函数模拟出具体的轨迹，所以思路基本如下：

1.确定水波函数方程

2.根据函数方程得出每一个波纹上点的坐标；

3.将水波进行平移，即将水波上的点不断的移动；

4.不断的重新绘制，生成动态水波纹；

有了上面的思路，我们一步一步进行实现：

正余弦函数方程为：

y = Asin(wx+b)+h ，这个公式里：w影响周期，A影响振幅，h影响y位置，b为初相；

根据上面的方程选取自己觉得中意的波纹效果，确定对应参数的取值；

然后根据确定好的方程得出所有的方程上y的数值，并将所有y值保存在数组里：

// 将周期定为view总宽度

mCycleFactorW = (float) (2 * Math.PI / mTotalWidth);

// 根据view总宽度得出所有对应的y值

for (int i = 0; i < mTotalWidth; i++) {

mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);

}

根据得出的所有y值，则可以在onDraw中通过如下代码绘制两条静态波纹：

for (int i = 0; i < mTotalWidth; i++) {

// 减400只是为了控制波纹绘制的y的在屏幕的位置，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果

// 绘制第一条水波纹

canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - 400, i,

mTotalHeight,

mWavePaint);

// 绘制第二条水波纹

canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - 400, i,

mTotalHeight,

mWavePaint);

}

这种方式类似于数学里面的细分法，一条波纹，如果横向以一个像素点为单位进行细分，则形成view总宽度条直线，并且每条直线的起点和终点我们都能知道，在此基础上我们只需要循环绘制出所有细

分出来的直线（直线都是纵向的），则形成了一条静态的水波纹；

接下来我们让水波纹动起来，之前用了一个数组保存了所有的y值点，有两条水波纹，再利用两个同样大小的数组来保存两条波纹的y值数据，并不断的去改变这两个数组中的数据：

private void resetPositonY() {

// mXOneOffset代表当前第一条水波纹要移动的距离

int yOneInterval = mYPositions.length - mXOneOffset;

// 使用System.arraycopy方式重新填充第一条波纹的数据

System.arraycopy(mYPositions, mXOneOffset, mResetOneYPositions, 0, yOneInterval);

System.arraycopy(mYPositions, 0, mResetOneYPositions, yOneInterval, mXOneOffset);

int yTwoInterval = mYPositions.length - mXTwoOffset;

System.arraycopy(mYPositions, mXTwoOffset, mResetTwoYPositions, 0,

yTwoInterval);

System.arraycopy(mYPositions, 0, mResetTwoYPositions, yTwoInterval, mXTwoOffset);

}

如此下来只要不断的改变这两个数组的数据，然后不断刷新，即可生成动态水波纹了；

刷新可以调用invalidate()或postInvalidate()，区别在于后者可以在子线程中更新UI

整体代码如下：

public class DynamicWave extends View {

// 波纹颜色

private static final int WAVE_PAINT_COLOR = 0x880000aa;

// y = Asin(wx+b)+h

private static final float STRETCH_FACTOR_A = 20;

private static final int OFFSET_Y = 0;

// 第一条水波移动速度

private static final int TRANSLATE_X_SPEED_ONE = 7;

// 第二条水波移动速度

private static final int TRANSLATE_X_SPEED_TWO = 5;

private float mCycleFactorW;

private int mTotalWidth, mTotalHeight;

private float[] mYPositions;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38577261

粉丝: 4
资源: 906

Android自定义View实现水波纹动画

Android自定义 view 水波纹效果

【Android】自定义圆形进度条效果（有进度标识点）

android 自定义view之波纹动画显示

Android自定义View 实现水波纹动画引导源码

Android自定义View实现水波纹引导动画

Android-Android自定义View实现水波纹效果

Android自定义view实现水波纹进度球效果

Android自定义View创建水波纹动画效果

Android自定义View：水波纹动画实现详解

Android自定义View：水波纹动画引导实现

最新资源