Android自定義View實現(xiàn)簡單水波紋效果

更新時間：2022年08月17日 10:45:58 作者：z真真

這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)簡單水波紋效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android自定義View實現(xiàn)水波紋效果的具體代碼，供大家參考，具體內(nèi)容如下

效果如下：

原理

控制代碼

//這里用的kotlin
//主線程刷新控件
?val mHandler = object : Handler() {
? ? ? ? override fun handleMessage(msg: Message?) {
? ? ? ? ? ? waterRippleView.refreshView()
? ? ? ? }
? ??
//開啟動畫，開線程，延時刷新period值，畫布進行x方向平移
private fun progressAdd() {
? ? ? ? isAnimate = true
? ? ? ? Thread(Runnable {
? ? ? ? ? ? while (isAnimate) {
? ? ? ? ? ? ? ? Thread.sleep(100)
? ? ? ? ? ? ? ? mHandler.sendEmptyMessage(0)
? ? ? ? ? ? }
? ? ? ? }).start()
? ? }

//停止動畫
? ? private fun progressReduce() {
? ? ? ? isAnimate = false
? ? }

控件源碼：

//java編寫
public class WaterRippleView extends View {
? ??
? ? private float mWidth;
? ? private float mHeight;

? ? //總周期為2s
? ? private int CIRCLE_PERIOD = 2000;
? ? //振幅，波紋高度
? ? private float ampltitude = 100;
? ? //填充顏色
? ? private int paintColor = 0xff57c011;
? ? //當(dāng)前時間值，累加并循環(huán)
? ? private int period = 0;
? ? private Paint paint;
? ? private Path path;


? ? public WaterRippleView(Context context) {
? ? ? ? this(context, null);
? ? }

? ? public WaterRippleView(Context context, @Nullable AttributeSet attrs) {
? ? ? ? this(context, attrs, 0);
? ? }

? ? public WaterRippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);

? ? ? ? paint = new Paint();
? ? ? ? paint.setColor(paintColor);
? ? ? ? paint.setStyle(Paint.Style.FILL);
? ? ? ? paint.setAntiAlias(true);
? ? ? ? path = new Path();
? ? }

? ? @Override
? ? protected void onSizeChanged(int w, int h, int oldw, int oldh) {
? ? ? ? super.onSizeChanged(w, h, oldw, oldh);
? ? ? ? mWidth = w;
? ? ? ? mHeight = h;
? ? }

? ? public void refreshView() {
? ? ? ? period += 100;
? ? ? ? if (period > CIRCLE_PERIOD) period %= CIRCLE_PERIOD;
? ? ? ? invalidate();
? ? }

? ? @Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? super.onDraw(canvas);
? ? ? ? //周期性的移動畫布
? ? ? ? float offsetX = mWidth / CIRCLE_PERIOD * period;
? ? ? ? canvas.translate(-offsetX, 0);
? ? ? ? path.reset();
? ? ? ? //第一個正弦曲線
? ? ? ? path.moveTo(0, mHeight / 2);
? ? ? ? path.cubicTo(mWidth / 4, mHeight / 2 - ampltitude,
? ? ? ? ? ? ? ? mWidth * 3 / 4, mHeight / 2 + ampltitude, mWidth, mHeight / 2);

? ? ? ? //第二個正弦曲線
? ? ? ? path.cubicTo(mWidth * 5 / 4, mHeight / 2 - ampltitude,
? ? ? ? ? ? ? ? mWidth * 7 / 4, mHeight / 2 + ampltitude, 2 * mWidth, mHeight / 2);
? ? ? ? //形成閉合路徑
? ? ? ? path.lineTo(2 * mWidth, mHeight);
? ? ? ? path.lineTo(0, mHeight);
? ? ? ? path.lineTo(0, mHeight / 2);
? ? ? ? canvas.drawPath(path, paint);
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: