Android Shader应用开发之雷达扫描效果

本文实例为大家分享了Android雷达扫描效果的具体代码,供大家参考,具体内容如下

效果图

知识点提要

  • Shader
  • 矩阵matrix
  • 属性动画

ShaderView3

package com.example.apple.shaderdemo;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by apple on 2017/5/23.
 * 女神面部扫描
 */

public class ShaderView3 extends View {

  /**
   * 绘制扫描圈的笔
   */
  private Paint mSweepPaint;
  /**
   * 绘制女神bitmap的笔
   */
  private Paint mBitmapPaint;
  /**
   * 这个自定义View的宽度,就是你在xml布局里面设置的宽度(目前不支持)
   */
  private int mWidth;
  /**
   * 女神图片
   */
  private Bitmap mBitmap;
  /**
   * 雷达扫描旋转角度
   */
  private int degrees = 0;
  /**
   * 用于控制扫描圈的矩阵
   */
  Matrix mSweepMatrix = new Matrix();
  /**
   * 用于控制女神Bitmap的矩阵
   */
  Matrix mBitmapMatrix = new Matrix();
  /**
   * 着色器---生成扫描圈
   */
  private SweepGradient mSweepGradient;
  /**
   * 图片着色器
   */
  private BitmapShader mBitmapShader;
  private float mScale;

  public ShaderView3(Context context) {
    super(context);
    init();
  }

  public ShaderView3(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  /**
   * 属性动画,必须有setXxx方法,才可以针对这个属性实现动画
   *
   * @param degrees
   */
  public void setDegrees(int degrees) {
    this.degrees = degrees;
    postInvalidate();//在主线程里执行OnDraw
  }

  private void init() {
//    1.准备好画笔
    mSweepPaint = new Paint();
    mBitmapPaint = new Paint();
//    2.图片着色器
    mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ccc);
    mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//    3.将图片着色器设置给画笔
    mBitmapPaint.setShader(mBitmapShader);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//    获取这个自定义view的宽高,注意在onMeasure里获取,在构造函数里得到的是0
    mWidth = getMeasuredWidth();
//    根据你所设置的view的尺寸和bitmap的尺寸计算一个缩放比例,否则的话,得到的图片是一个局部,而不是一整张图片
    mScale = (float) mWidth / (float) mBitmap.getWidth();
//    4.梯度扫描着色器
    mSweepGradient = new SweepGradient(mWidth / 2, mWidth / 2, new int[]{Color.argb(200, 200, 0, 0), Color.argb(10, 30, 0, 0)}, null);
//    5.将梯度扫描着色器设置给另外一支画笔
    mSweepPaint.setShader(mSweepGradient);

  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
//    迫不得已的时候,才在onDraw方法写代码,能提前准备的要在之前去准备,
//    不要写在onDraw里面,因为onDraw会不停地刷新绘制,写的代码越多,越影响效率

//    将图片缩放至你指定的自定义View的宽高
    mBitmapMatrix.setScale(mScale, mScale);
    mBitmapShader.setLocalMatrix(mBitmapMatrix);

//   设置扫描圈旋转角度
    mSweepMatrix.setRotate(degrees, mWidth / 2, mWidth / 2);
    mSweepGradient.setLocalMatrix(mSweepMatrix);

//    5. 使用设置好图片着色器的画笔,画圆,先画出下层的女神图片,在画出上层的扫描图片
    canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mBitmapPaint);
    canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mSweepPaint);

  }
}

外部调用

package com.example.apple.shaderdemo;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.LinearInterpolator;

public class MainActivity extends AppCompatActivity {

  private ShaderView3 mShaderView;
  int degrees = 0;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mShaderView = (ShaderView3) findViewById(R.id.sv);

    mShaderView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        ObjectAnimator degrees = ObjectAnimator.ofInt(mShaderView, "degrees", 0, 360);
        degrees.setInterpolator(new LinearInterpolator());
        degrees.setDuration(10000);
        degrees.setRepeatCount(ValueAnimator.INFINITE);
        degrees.start();
        /* new Thread(new Runnable() {
          @Override
          public void run() {
            while (degrees <= 360) {
              degrees += 1;
              mShaderView.setDegrees(degrees);

              try {
                Thread.sleep(30);
              } catch (InterruptedException e) {
                e.printStackTrace();
              }
            }

          }
        }).start();

        degrees = 0;
        mShaderView.setDegrees(degrees);*/

      }
    });
  }
}

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.apple.shaderdemo.MainActivity">

  <com.example.apple.shaderdemo.ShaderView3
    android:id="@+id/sv"
    android:layout_width="300dp"
    android:layout_height="300dp"
    />

</LinearLayout>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿支付宝上芝麻信用分雷达图

    一.首先看下支付宝上芝麻信用分的效果图: 二.思路 1.确定雷达图中心点坐标 2.绘制多边形及连接线 3.根据维度值绘制覆盖区域 4.绘制分数 5.绘制每个维度的标题文字和图标 三.实现 获取布局的中心坐标 在onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根据View的长宽,计算出雷达图的半径(这里取布局宽高最小值的四分之一,可以自定义),获取整个布局的中心坐标. public class CreditScoreView extends

  • Android动画之雷达扫描效果

    我们首先看一下效果图,有个整体的印象 好了,为了便于理解,这里就按照动画所见内容依次展开来说 准备 这里决定采用canvas(画布)和paint(画笔)实现了这个简单动画控件. 由图片可以看到有两条交叉的十字线.几个圆圈和一些白点,那么首先定义一下所需的画笔,画布及一些数据 setBackgroundColor(Color.TRANSPARENT); //宽度=5,抗锯齿,描边效果的白色画笔 mPaintLine = new Paint(); mPaintLine.setStrokeWidth(

  • Android编程简单实现雷达扫描效果

    本文实例讲述了Android编程简单实现雷达扫描效果.分享给大家供大家参考,具体如下: 在eoe看到有一篇关于雷达扫描的文章,然后看了下,很简单,但是觉得还有很多可以优化的地方,下面贴出来 package com.example.wave; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; im

  • Android仿微信雷达扫描效果的实现方法

    本文主要给大家介绍的是关于Android实现微信雷达扫描效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 废话不多说 先上图(用AS录制的 转换工具不是很好 所以看得效果不是很好) 效果图 示例代码 Activity 代码 public class ShapeDrawableActivity extends AppCompatActivity { private ImageView ivLightbeam; private ObjectAnimator radarScanAnim;

  • Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

    去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福--那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) --我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读

  • Android仿微信雷达辐射搜索好友(逻辑清晰实现简单)

    不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今天讲的是一个大家都见过的动画,雷达搜索好友嘛,原理也十分的简单,你看完我的分析,也会觉得很简单了,国际惯例,无图无真相,我们先看看效果图,对了,真 测试机送人了,所讲这段时间应该一直用模拟器显示吧! 仿微信雷达扫描,仿安卓微信.云播雷达扫描动画效果点击中间的黑色圆圈开始扫描动画,再次点击复位,需要这种效果的朋友可以自己下载看一下. 效果图如下所示: 这个界面相信大家都认识

  • Android仿微信、QQ附近好友雷达扫描效果

    1.概述 最近一直到在带实习生,因为人比较多,所以很长一段时间没有更新博客了,今天更新一篇雷达扫描附近好友效果,以后尽量每周更新一篇,先看一下效果: 2.实现 1.效果分析 效果分为两个部分,一个是上半部分的自定义RadarView,还有就是下半部分的ViewPager,至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍,这里主要实现扫描效果部分. 2.扫描效果实现 2.1自定义RadarView在onDraw()方法中画六个圆圈,至于圆圈的半径是多少我们需要

  • Android雷达扫描动态界面制作

    先看看效果图: 源码: package com.zihao.radar; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import com.zihao.radar.view.RadarView; public class MainActivity extends Activity { private Rad

  • 基于Android自定义控件实现雷达效果

    如何制作出类似雷达扫描的效果,具体方法如下 一.效果图 二.实现思路 1.自定义控件RadarView用来画雷达的效果图,可以自定义属性包括 backgroundColor:背景颜色 circleNum:圆的数量 startColor:开始颜色 endColor:结束颜色 lineColor:线的颜色 2.通过Handler循环发送消息到MessageQueue中,将mRotate加3,使Matrix旋转mRotate,重绘雷达扫描的圆. 3.通过梯度渐变扫描渲染器SweepGradient,在

  • Android Shader应用开发之雷达扫描效果

    本文实例为大家分享了Android雷达扫描效果的具体代码,供大家参考,具体内容如下 效果图 知识点提要 Shader 矩阵matrix 属性动画 ShaderView3 package com.example.apple.shaderdemo; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.

  • iOS实现雷达扫描效果

    本文实例为大家分享了iOS实现雷达扫描的具体代码,供大家参考,具体内容如下 #import <UIKit/UIKit.h> @interface LTIndicatiorView : UIView @property(nonatomic,strong)UIColor *color; @property(nonatomic,assign)float repeatCount; @property(nonatomic,strong)UIColor *borderColor; @property(no

  • Android Shader应用开发之霓虹闪烁文字效果

    本文实例为大家分享了Android霓虹闪烁文字效果的具体代码,供大家参考,具体内容如下 package com.example.apple.shaderdemo; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Matrix; i

  • Android Shader着色器/渲染器的用法解析

    一.介绍 Shader是绘图过程中的着色器,它有五个子类: BitmapShader: 位图渲染 LinearGradient: 线性渲染 SweepGradient: 梯度渲染 RadialGradient: 光束渲染 ComposeShader: 组合渲染 渲染模式:Shader.TileMode Shader.TileMode.CLAMP: 边缘拉伸模式,它会拉伸边缘的一个像素来填充其他区域. Shader.TileMode.MIRROR: 镜像模式,通过镜像变化来填充其他区域.需要注意的

  • Android实现雷达View效果的示例代码

    样式效果 还是先来看效果: 这是一个仿雷达扫描的效果,是之前在做地图sdk接入时就想实现的效果,但之前由于赶着毕业设计,就没有亲手去实现,不过现在自己撸一个发现还是挺简单的. 这里主要分享一下我的做法. 目录 主体轮廓的实现(雷达的结构) 动画的实现(雷达扫描的效果) 目标点的加入(图片/点) 主体轮廓实现 不难分析得出,这个View主要由外部的一个圆,中间的锚点圆以及扇形旋转区域组成.而且每个部分理应由不同的Paint去绘制,以方便去定制各部分的样式. 外部圆以及锚点圆的绘制较为简单,主要的点

随机推荐