Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单

Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单

这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推演,但是也能保证一周三更的样子,现在也还是以小功能,或者说是一些小入门级别的博客为主,我也不算是什么很厉害的人,很多细节的支持处理的仍然还是不到位,所以也是一直在弥补,话不多说,来看看今天的效果

实现起来很简单吧,那我们就来看一下他是怎么实现的咯!

OnclickRuning

package com.lgl.onclickruning;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * 点击水波纹涟漪动画效果
 *
 * @author LGL
 *
 */
public class Runing extends View {

    // 画笔
    private Paint mPaint;
    // 内圆宽度
    private int strokeWidth;
    // 圆心x
    private int cx;
    // 圆心y
    private int cy;
    // 半径
    private int radius;
    // Handler消息
    private static final int FLUSH = 0;

    public Runing(Context context, AttributeSet attrs) {
        super(context, attrs);

        init();

    }

    private void init() {

        // 初始化画笔
        mPaint = new Paint();
        // 抗锯齿
        mPaint.setAntiAlias(true);
        // 设置颜色
        mPaint.setColor(Color.BLUE);
        // 设置空心
        mPaint.setStyle(Style.STROKE);
        // 设置内圆的宽度
        mPaint.setStrokeWidth(strokeWidth);
        // 设置透明度 0-255
        mPaint.setAlpha(255);

        // 初始值
        strokeWidth = 0;
        radius = 0;
    }

    /**
     * 绘制
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制圆环
        canvas.drawCircle(cx, cy, radius, mPaint);
    }

    /**
     * 触摸事件
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        // 判断手势按下和抬起
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            /**
             * 按下去开始画圆,也就是起涟漪,所以我们首先得获取到按下的坐标,事实上,我们要做这样操作的开发,都必须先提前拿到该有的坐标
             */
            cx = (int) event.getX();
            cy = (int) event.getY();
            Log.i("坐标", "圆心x:" + cx + "圆心y:" + cy);

            break;
        }
        // 初始化
        init();
        // 发送
        handler.sendEmptyMessage(FLUSH);
        return true;
    }

    /**
     * 刷新状态
     */
    private void flush() {
        // 半径每次+10
        radius += 10;
        // 线条的宽度每次都是半径的四分之一
        strokeWidth = radius / 4;
        // 重新设置给画笔
        mPaint.setStrokeWidth(strokeWidth);
        // 颜色渐变,每次减少20的色值
        int nextAlpha = mPaint.getAlpha() - 20;
        // 避免等于负数
        if (nextAlpha < 20) {
            // 直接设置为透明
            nextAlpha = 0;
        }
        // 继续重新设置给画笔
        mPaint.setAlpha(nextAlpha);
    }

    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case FLUSH:
                // 更改参数状态
                flush();
                // 刷新 执行我们的绘制方法
                invalidate();
                // 继续验证透明度,只要不为0就一直发送,直到透明
                if (mPaint.getAlpha() != 0) {
                    handler.sendEmptyMessageDelayed(FLUSH, 100);
                }
                break;
            }
        }
    };
}

layout_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.lgl.onclickruning.Runing
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

代码其实很简单,我们简单的逻辑就可以实现了,但是别小看了这个思维,你可以用这个逻辑去实现更多有趣的特效,这里就期待你的挖掘了,嘻嘻

Demo下载地址:http://download.csdn.net/detail/qq_26787115/9433534

时间: 2024-12-23 20:39:27

Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单的相关文章

Android自定义控件:Android L控件点击水波纹的实现(源码 + Demo)

实现思路来自singwhatiwanna http://blog.csdn.net/singwhatiwanna/article/details/42614953 Demo: 一.控件的流程: 大致上如下,实际是有些偏差的大家可以自己画画 RevealLayout()--->init()--->onMeasure()--->onLayout()--->onDraw()--->dispatchTouchEvent()--->getTargetView()--->is

点击水波纹效果

当布局没有设置 background属性的时候给其布局中加入一下代码就是系统默认的水波纹效果 比如在recyclerview的item布局中,或者其他任意布局中. android:background="?android:attr/selectableItemBackground" android:clickable="true" android:focusable="true" 当UI有要求布局.按钮等的背景颜色时,使用ripple属性来设置背

Android特效专辑(八)——实现心型起泡飞舞的特效,让你的APP瞬间暖心

Android特效专辑(八)--实现心型起泡飞舞的特效,让你的APP瞬间暖心 马上也要放年假了,家里估计会没网,更完这篇的话,可能要到年后了,不过在此期间会把更新内容都保存在本地,这样有网就可以发表了,也是极好的,今天说的这个特效,原本是Only上的一个小彩蛋的,我们来看看图片 只要我点击了Only这个字,下面就开始上升起起泡了,这个实现起来其实就是一个欲盖弥彰的动画而已,准备好三张颜色不一样的心型图片咯,这样的话,我们就开始动手来写一写吧! 首先新建一个工程--HeartFaom 准备工作就是

[转]Android自定义控件系列五:自定义绚丽水波纹效果

出处:http://www.2cto.com/kf/201411/353169.html 今天我们来利用Android自定义控件实现一个比较有趣的效果:滑动水波纹.先来看看最终效果图: 图一 效果还是很炫的:饭要一口口吃,路要一步步走,这里我们将整个过程分成几步来实现 一.实现单击出现水波纹单圈效果: 图二 照例来说,还是一个自定义控件,这里我们直接让这个控件撑满整个屏幕(对自定义控件不熟悉的可以参看我之前的一篇文章:Android自定义控件系列二:自定义开关按钮(一)).观察这个效果,发现应该

Android Ripple 按钮水波纹效果(二)优化

上一篇中我们讲了自定义ripple 水波纹效果,先来回顾一下效果吧! 看了以后感觉没甚么问题,我一开始也觉得很满意了,那好,我们拿Android 5.0自带的效果来对比一下 发现了不同之处没?点击中间的时候是看不出什么区别,但是点击两边的时候,就很明显了,我们自定义的效果,波纹向两边同速度的扩散,所以就会出现,如果点击点不在中心的时候,距离短的一边波纹先到达,而距离长的一边后到达,不能同时到达边缘!而系统自带的则不存在这种情况,所以这是一个优化点;另一个优化点是:我们自定义的效果,在波纹全部覆盖

Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果

从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo(二阶贝塞尔)函数,给大家补充一下. 本篇最终将以两个例子给大家演示贝塞尔曲线的强大用途: 1.手势轨迹 利用贝塞尔曲线,我们能实现平滑的手势轨迹效果 2.水波纹效果 电池充电时,有些手机会显示水波纹效果,就是这样做出来的. 废话不多说,开整吧 一.概述 在<android Graphics(二):路径

自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果

前言:每当感叹自己的失败时,那我就问你,如果让你重新来一次,你会不会成功?如果会,那说明并没有拼尽全力. 最近博主实在是太忙了,博客更新实在是太慢了,真是有愧大家. 这篇将是Shader的最后一篇,下部分,我们将讲述Canvas变换的知识.在讲完Canvas变换以后,就正式进入第三部曲啦,是不是有点小激动呢-- 今天给大家讲的效果是使用RadialGradient来实现水波纹按钮效果,水波纹效果是Android L平台上自带的效果,这里我们就看看它是如何实现的,本篇的最终效果图如下 一.Radi

Android自定义控件系列五:自定义绚丽水波纹效果

尊重原创!转载请注明出处:http://blog.csdn.net/cyp331203/article/details/41114551 今天我们来利用Android自定义控件实现一个比较有趣的效果:滑动水波纹.先来看看最终效果图: 图一 效果还是很炫的:饭要一口口吃,路要一步步走,这里我们将整个过程分成几步来实现 一.实现单击出现水波纹单圈效果: 图二 照例来说,还是一个自定义控件,这里我们直接让这个控件撑满整个屏幕(对自定义控件不熟悉的可以参看我之前的一篇文章:Android自定义控件系列二

Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命

Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/liuguilin.html 日后我所写的特效专辑也会以一添加在这个专栏上,今天写的这个特效,是关于聊天的,你肯定遇到过,就是你跟人家聊天的时候,比如发送应(么么哒),然后屏幕上全部就是表情了,今天我们就是做这个,撒花的特效,国际惯例,上图 截图 实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?其实