一、概述

先看一下Shader类的介绍:

/**
* Shader is the based class for objects that return horizontal spans of colors during drawing.
* A subclass of Shader is installed in a Paint calling paint.setShader(shader).
* After that any object (other than a bitmap) that is drawn with that paint will get its color(s) from the shader.
*/

Shader起初是为Bitmap着色的,但其作用并不限于此,任何通过设置了Shader的Paint画出来的东西都会获得想要的颜色。换句话说,Paint是画笔,Shader就是颜料,Shader需要通过Paint才能起作用。设置Shader的过程就是调制颜料的过程,有了Shader的加持,Paint不再只是简单地画出“白纸黑字”,也能画出五彩缤纷的世界了。
那么,我们究竟有哪些种类的颜料和涂抹方式呢?

(1)Shader的子类

Shader有如下5个子类:

BitmapShader是图像渲染,LinearGradient是线性渲染,RadialGradient是放射渲染,SweepGradient是梯度渲染,ComposeShader是组合渲染。后面我们会简单介绍各个渲染的用法。

(2)Shader的渲染方式

每种渲染的构造方法都需要指定渲染方式Shader.TileMode,共有三种

    public enum TileMode {
/**
* 拉伸 replicate the edge color if the shader draws outside of its original bounds
*/
CLAMP (0),
/**
* 重复 repeat the shader's image horizontally and vertically
*/
REPEAT (1),
/**
* 镜像 repeat the shader's image horizontally and vertically, alternating mirror images so that adjacent images always seam
*/
MIRROR (2);
}

二、LinearGradient应用实战

下面以LinearGradient为例,介绍Shader的一般用法。先看构造函数:

LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],TileMode tile)

x0,y0:表示渐变的起点坐标
x1,y1:表示渐变的终点坐标
colors[]:传入多个颜色,产生更加丰富的渐变效果。
float[]:可以设置在不同的渲染阶段渲染不同的颜色
TileMode:和上面讲的完全一致,不赘述了。

一般用法如下:

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int[] mColors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW}; //从红色——绿色——蓝色——黄色线性过渡
float[] loaction=new float[] {0.25F, 0.5F, 0.75F, 1.0F }; //指定过渡分割点
LinearGradient linearGradient=new LinearGradient(0,0,1000,50,mColors,loaction,Shader.TileMode.REPEAT);
paint.setShader(linearGradient);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(10);
canvas.drawRect(new RectF(10,10,1000,50),paint);
}

效果如下:

通过上面的例子我们可以看到,Shader只是简单的静态渲染,本身不具有动画属性。然而实际开发中,我们习惯用动画的手法来不断改变渲染方式以达到动态渲染的效果。以下面效果图为例

核心代码:

    @Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0) {
mPaint = getPaint();
//制作一个白色半透明——白色全透明——白色半透明线性渲染
mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0, new int[]{0x33ffffff, 0xffffffff, 0x33ffffff}, new float[]{0, 0.5f, 1}, TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
mGradientMatrix = new Matrix();
}
}
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//通过Matrix来不断改变shader位移并重绘,达到动画效果
if (mAnimating && mGradientMatrix != null) {
mTranslate += mViewWidth / 10;
if (mTranslate > 2 * mViewWidth) {
mTranslate = -mViewWidth;
}
mGradientMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(60);
}
}

Github源码:https://github.com/JiaxtHome/AnimDemo



三、总结

通过上面LinearGradient的例子,我们知道了如何利用Shader来做动画效果,其他子类也是类似的:每一个Shader都有自己的一个Matrix,通过这个Matrix可以对Shader作平移、缩放等操作,采用动画的方式连续修改这个Matrix并重绘就可以实现一些特殊的动画。不同的Shader可以实现不同形式的效果,加上对Shader颜色透明度等变量的控制,可以实现的动画也是丰富多彩的。学习一个动效,不如学会一种方法,学会了方法,就可以开发更多自己的原创动效,而不仅仅是抄袭模仿别人的。下面列举一些其他Shader子类实现的动画效果:

(1)SweepGradient梯度渲染

效果图:

核心代码:

    @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//将背景设置成白色
canvas.drawColor(Color.WHITE); int mWidth = canvas.getWidth();
//制作一个从透明到蓝色的SweepGradient梯度渲染
if(mSweepGradient == null){
mSweepGradient = new SweepGradient(mWidth / 2, mWidth / 2, new int[]{Color.TRANSPARENT, Color.parseColor("#530000ff")}, null);
} //使用Matrix旋转
mSweepGradient.setLocalMatrix(matrix);
matrix.setRotate(degree, mWidth / 2, mWidth / 2);
degree+=2;
if (degree > 360) {
degree = 0;
}
postInvalidate();
}

(2)BitmapShader图像渲染

BitmapShader一般用于做圆角图像的静态渲染,如:

核心代码:

    @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
mPaint.setShader(bitmapShader);
int min = Math.min(bitmapWidth, bitmapHeight);
//画圆形图
canvas.drawCircle(bitmapWidth / 2, bitmapHeight / 2, min / 2, mPaint);
}

(3)RadialGradient放射渲染

RadialGradient适合做类似水波纹的辐射扩散效果:

核心代码:

    int radius = 5;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//禁用硬件加速
setLayerType(LAYER_TYPE_SOFTWARE, null);
canvas.drawColor(Color.parseColor("#FFC9C9C9"));
//制定从白色透明到深灰色辐射状渲染
RadialGradient radialGradient = new RadialGradient(mViewWidth / 2, mViewHeight / 2, radius, 0x00FFFFFF, 0xFFABABAB, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
canvas.drawCircle(mViewWidth / 2, mViewHeight / 2, radius, mPaint);
radius += 3;
if (radius > mViewWidth / 3 * 2) {
radius = 5;
}
postInvalidate();
}

(4)ComposeShader组合渲染

ComposeShader是组合渲染,顾名思义,它是任意两个其他渲染的叠加,叠加方式可以采用Xfermode或者PorterDuff.Mode。我们看一下它的构造方法:

ComposeShader(Shader shaderA, Shader shaderB, Xfermode mode)
ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode)

对于ComposeShader而言,不管是采用哪种混合模式都应慎用,达到的效果不太好控制,这里不再举例。

Shader渲染动画的更多相关文章

  1. Three.js粒子特效,shader渲染初探(一篇非常详细的介绍)

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  2. unity shader序列帧动画代码,顺便吐槽一下unity shader系统

    一.看到UNITY论坛里有些人求unity shader序列帧动画,写shader我擅长啊,就顺势写了个CG的shader.代码很简单,就是变换UV采样序列帧贴图,美术配置行数列数以及变换速度. Sh ...

  3. Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画

    原文:Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画 或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新,追问下去HLSL到底是何方神圣能实现如此炫酷之效果?层 ...

  4. CSharpGL(14)用geometry shader渲染模型的法线(normal)

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(14)用geometry shader渲染模型的法线(normal) +BIT祝威+悄悄在此留下版了个权的信息说: 2016-08-13 ...

  5. 使用替换shader渲染

    相关函数: Camera.RenderWithShader(shader: Shader, replacementTag: string) 使用指定shader渲染,只影响一帧 Camera.SetR ...

  6. Unity Shader序列帧动画学习笔记

    Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...

  7. Unity进阶之:Shader渲染

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  8. Unity Shader 序列帧动画

    shader中的序列帧动画属于纹理动画中的一种,主要原理是将给定的纹理进行等分,再根据时间的变化循环播放等分中的一部分. Unity Shader 内置时间变量 名称 类型 描述 _Time floa ...

  9. unity, 替换shader渲染(Rendering with Replaced Shaders)

    实现特效,尤其是一些后处理特效,经常需要将各物体的shader替换为另一套shader进行渲染到纹理,再后再进行合成或以某种叠加方式叠加到最后的画面上去. 再复杂一点儿的,可能不同的物体所用的替换sh ...

随机推荐

  1. 【习题 4-7 UVA - 509】RAID!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果一行里面某位有>1个x 那么是invalid的. 没有x的话. 可以分析以下(设输入的标准Even为0,然后Odd为1) ...

  2. poj 1523 求割点把一个图分成几个联通部分

    #include<stdio.h> #include<string.h> #define N 1100 struct node { int u,v,next; }bian[N* ...

  3. hdu 3072 强连通+缩点+最小树形图思想

    #include<stdio.h> #include<string.h> #define N 51000 #define inf 1000000000 struct node ...

  4. Spring MVC-静态页面示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_static_pages.htm 说明:示例基于Spring MVC 4.1.6. ...

  5. 项目结构、包、编译为exe!

    一个java源文件里至多有一个public类,该类的名称必须与源文件名称称同样.也能够没有public类.文件名称与随意一个类名一致就可以. 包 类似于cpp的namespace,是对类的再封装,防止 ...

  6. jquery非文本框复制

    function selectText(x) { if (document.selection) { var range = document.body.createTextRange();//ie ...

  7. Android利用Intent与其它应用交互

    前言: 上一篇博客给大家聊了Intent的定义.分类.属性和功能,相信大家对于Intent在Android中的作用已经清楚,这一篇博客将会给大家聊Intent的使用方法. Android系统的一个重要 ...

  8. java.util.ComparableTimSort中的sort()方法简单分析

    TimSort算法是一种起源于归并排序和插入排序的混合排序算法,设计初衷是为了在真实世界中的各种数据中能够有较好的性能. 该算法最初是由Tim Peters于2002年在Python语言中提出的. T ...

  9. c14---排序,查找

    // // main.c // 冒泡排序 // // Created by xiaomage on 15/6/10. // Copyright (c) 2015年 xiaomage. All righ ...

  10. 【POJ 4007】 Flood-it!

    [题目链接] http://poj.org/problem?id=4007 [算法] IDA* [代码] #include <algorithm> #include <bitset& ...