本文档将介绍在android上如何实现一个倒影效果的Gallery。
为了达到上图所示的效果,
首先,是需要有一个自定义的gallery,实现了对Gallery的继承,通过重写getChildStaticTransformation方法来控制,每个子view有不同的缩放比例,形成阶梯状的展示。这个gallery是在坤庭的代码基础上实现的,我这里就不再重复介绍。
接下来,gallery中的每个view,都是一个自定义的MirrorView,由它来实现了画原图及画倒影。新的算法解决了性能问题,下面就重点说一下这部分内容:
镜像特效最近还蛮流行的,尤其在HTC 的Sense 介面上,常常都可以见到。大家可以看到,加了个镜像特效后,那感觉就很立体,感觉上好像是这些图片摆立在一个玻璃桌面上。
在Android 上要帮图片加上镜像特效,会不会很麻烦?一点也不麻烦,只要几行代码,就可以搞定。
因此,在开始看答案之前,我会建议你要先有Photoshop 的使用经验。想想,如果用Photoshop 要帮图片加上镜像特效,要如何做?我想一般不外乎是先复制个图片,并将其垂直翻转,接着再对这翻转的图片,加个由灰到黑的渐层mask 即可。
好了,让我们来看一下答案。底下就是帮图片加上镜像特效的程式范例。
- public class MirrorView extends View {
-
- Paint m_paint;
-
-
int m_nShadowH;
-
- Drawable m_dw;
-
- Bitmap m_bitmap;
-
- Matrix mMatrix;
-
-
int shadowHeight;
-
-
public MirrorView(Context context, Bitmap bitmap) {
-
-
super (context);
-
- m_bitmap = bitmap;
-
- _Init();
-
- }
-
-
private void _Init() {
-
-
-
-
m_dw = new BitmapDrawable(m_bitmap);
-
-
m_dw.setBounds(0,0,m_dw.getIntrinsicWidth(),m_dw.getIntrinsicHeight());
-
-
m_nShadowH = m_dw.getIntrinsicHeight()/1;
-
-
m_paint = new Paint(Paint.ANTI_ALIAS_FLAG );
-
-
LinearGradient lg = new LinearGradient(0, 0, 0, m_nShadowH, 0xB0FFFFFF, 0×00000000, Shader.TileMode.CLAMP );
-
- m_paint.setShader(lg);
-
-
m_paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY ));
-
-
mMatrix = new Matrix();
-
- }
-
-
@Override
-
-
public void onDraw(Canvas canvas) {
-
-
super .onDraw(canvas);
-
-
int nX = 0;
-
-
int nY = 0;
-
- _DrawNormalImg(canvas, nX, nY);
-
- _DrawMirror(canvas, nX, nY);
-
- }
-
-
private void _DrawNormalImg(Canvas canvas, int nX, int nY) {
-
- canvas.save(Canvas.MATRIX_SAVE_FLAG );
-
- canvas.translate(nX, nY);
-
- m_dw.draw(canvas);
-
- canvas.restore();
-
- }
-
-
private void _DrawMirror(Canvas canvas, int nX, int nY) {
-
-
int nW = m_dw.getIntrinsicWidth();
-
-
int nH = m_dw.getIntrinsicHeight();
-
-
shadowHeight=nH/2;
-
-
float [] src={0, nH, nW, nH, nW,nH – m_nShadowH, 0, nH – m_nShadowH};
-
-
float [] dst={ 0, nH, nW, nH,nW, shadowHeight, 0, shadowHeight };
-
- canvas.save();
-
-
mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);
-
- canvas.concat(mMatrix);
-
-
-
- canvas.save(Canvas.MATRIX_SAVE_FLAG );
-
-
canvas.scale(1.0f, -1.0f);
-
-
canvas.translate(nX, -(nY + nH * 2));
-
-
canvas.clipRect(0, nH, nW, nH – m_nShadowH);
-
- m_dw.draw(canvas);
-
- canvas.restore();
-
-
-
- canvas.save();
-
- canvas.translate(nX, nY + nH);
-
-
canvas.drawRect(0, 0, nW, m_nShadowH, m_paint);
-
- canvas.restore();
-
- canvas.restore();
-
- }
-
- }
public class MirrorView extends View {
Paint m_paint;
int m_nShadowH;
Drawable m_dw;
Bitmap m_bitmap;
Matrix mMatrix;
int shadowHeight;
public MirrorView(Context context, Bitmap bitmap) {
super (context);
m_bitmap = bitmap;
_Init();
}
private void _Init() {
//m_dw = new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.icon));
m_dw = new BitmapDrawable(m_bitmap);
m_dw.setBounds(0,0,m_dw.getIntrinsicWidth(),m_dw.getIntrinsicHeight());
m_nShadowH = m_dw.getIntrinsicHeight()/1;
m_paint = new Paint(Paint.ANTI_ALIAS_FLAG );
LinearGradient lg = new LinearGradient(0, 0, 0, m_nShadowH, 0xB0FFFFFF, 0×00000000, Shader.TileMode.CLAMP );
m_paint.setShader(lg);
m_paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY ));
mMatrix = new Matrix();
}
@Override
public void onDraw(Canvas canvas) {
super .onDraw(canvas);
int nX = 0;
int nY = 0;
_DrawNormalImg(canvas, nX, nY);
_DrawMirror(canvas, nX, nY);
}
private void _DrawNormalImg(Canvas canvas, int nX, int nY) {
canvas.save(Canvas.MATRIX_SAVE_FLAG );
canvas.translate(nX, nY);
m_dw.draw(canvas);
canvas.restore();
}
private void _DrawMirror(Canvas canvas, int nX, int nY) {
int nW = m_dw.getIntrinsicWidth();
int nH = m_dw.getIntrinsicHeight();
shadowHeight=nH/2;
float [] src={0, nH, nW, nH, nW,nH – m_nShadowH, 0, nH – m_nShadowH};
float [] dst={ 0, nH, nW, nH,nW, shadowHeight, 0, shadowHeight };
canvas.save();
mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);
canvas.concat(mMatrix);
//draw mirror image
canvas.save(Canvas.MATRIX_SAVE_FLAG );
canvas.scale(1.0f, -1.0f);
canvas.translate(nX, -(nY + nH * 2));
canvas.clipRect(0, nH, nW, nH – m_nShadowH);
m_dw.draw(canvas);
canvas.restore();
//draw mask
canvas.save();
canvas.translate(nX, nY + nH);
canvas.drawRect(0, 0, nW, m_nShadowH, m_paint);
canvas.restore();
canvas.restore();
}
}
_DrawMirror() 方法是关键。用Photoshop 要如何做出镜像特效?第一步是先画出垂直翻转的图片。
Android 绘图座标体系预设的原点在左上角,X 轴往右是越来越大的正值,而Y 轴往下,则是越来越大的正值。要画出垂直翻转的图片,其实也就是要垂直翻转整个绘图座标体系。在 Android 中,要如何做?答案就是 canvas.scale(1.0f, -1.0f)。很简单吧,没想到给scale() 函式一个负值,就可以翻转相对应的轴。
在Photoshop 中,做镜像特效的第二步是要对这翻转的图片,加个由灰到黑的渐层mask。
在Android 中,要画渐层色,那就一定得用LinearGradient 这个类别。至于要对背景图加上个mask,就请参考一下Paint 的setXfermode() 函式。 _Init() 这个函式,就是负责生成一个由灰到黑渐层mask 的m_paint 物件。
这个控件我测试过,200张图片加入adapter,在大数据量情况下性能也没有问题。
分享到:
相关推荐
Android图片镜像倒影特效
纯CSS3实现带镜像倒影的机器人跳舞动画特效源码.zip
android界面效果全汇总: Activity 页面切换的效果(闪屏,淡入淡出,由左向右滑入,实现zoomin和zoomout) android菜单动画(android 翻页) android ListView详解 ...镜像倒影特效Gallery …………
AI快速制作镜像倒影效果.pdfAI快速制作镜像倒影效果.pdf
倒影制作工具(Inverted)是一款只需用户设定好图像与倒影的间距,倒影镜像百分比,倒影透明度后该软件即可自动生成图像倒影,还可设置倒影波浪特效。只需简单几步操作就可以为自己的图片添加倒影效果,完全傻瓜式操作...
图片镜像特效源码,该源码可以让你如何制作图片镜像特效,倒影,倾斜,旋转等,源码也很简单的,功能还不错,喜欢的朋友可以多多研究一下吧。
超酷的CSS3图片镜像效果网页特效是一款可以将任意图片进行镜像,并以幻灯片的方式在同一个页面中切换不同的图片。
超酷的CSS3图片镜像效果网页特效是一款可以将任意图片进行镜像,并以幻灯片的方式在同一个页面中切换不同的图片。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed][removed] ...
jQuery+CSS3镜像文字动画垂直导航菜单特效,鼠标滑过菜单文字时,文字呈现镜像的动画效果。
mysql5.7镜像;mysql5.7镜像;mysql5.7镜像;mysql5.7镜像
架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设工具含镜像架设...
nginx镜像资源nginx镜像资源nginx镜像资源nginx镜像资源nginx镜像资源nginx镜像资源
虚拟机win10iso镜像文件下载.zip,虚拟机win10iso镜像文件下载.zip,虚拟机win10iso镜像文件下载.zip,虚拟机win10iso镜像文件下载.zip,虚拟机win10iso镜像文件下载.zip,虚拟机win10iso镜像文件下载.zip,虚拟机...
工具镜像工具镜像工具镜像工具镜像工具镜像工具镜像工具镜像
mysql5.7安装教程+mysql5.7镜像安装+mysql学习+mysql5.7镜像包 mysql5.7安装教程+mysql5.7镜像安装+mysql学习+mysql5.7镜像包 mysql5.7安装教程+mysql5.7镜像安装+mysql学习+mysql5.7镜像包 mysql5.7安装教程+mysql...
这是一款使用js和css3制作的炫酷图片镜像特效。该图片镜像特效可以将任意图片进行镜像,并以幻灯片的方式在同一个页面中切换不同的图片。 该图片镜像特效中使用了css3的混合模式,以及3D transforms等技术。
国内镜像源,国内npm源镜像(npm加速下载)淘宝 NPM 镜像:https://registry.npm.taobao.org 阿里云 NPM 镜像:https://npm.aliyun.com 腾讯云 NPM 镜像:https://mirrors.cloud.tencent.com/npm/ 华为云 NPM 镜像:...
群晖镜像二合一镜像及DSM
由于国内访问直接访问Docker hub网速比较慢,拉取镜像的时间就会比较长。一般我们会使用镜像加速或者直接从国内的一些平台镜像仓库上拉取。 我比较常用的是网易的镜像中心和daocloud镜像市场。 网易镜像中心:...