当下流行播放器,实现图片动态旋转
来源:互联网 发布:it人才培训 编辑:程序博客网 时间:2024/04/29 10:09
终于来到了CSDN,在之前快一年的工作时间,已经得到CSDN许多关于技术上的问答解决方案,许多有营养的blog,让我学习成长。从今天开始和大家分享一下我的学习成果和面临过得问题。进入正题,平时个人喜好听歌,每每听歌的时候看到大多市面音乐app都会带有一个简略图的
动画,个人感觉很酷。前几天深入学习android中的View控件,了解其源码。
其中很多地方用到了一个类android.graphics.Matrix 是绘图工具中的矩阵一个类。
关于这个类的详细描述我就不多说了。大家可以参照这篇博文:
http://www.cnblogs.com/qiengo/archive/2012/06/30/2570874.html#code
个人感觉写的挺好,很升入很详细。其中最深入的就是这个矩阵变换实现4种变换:1、translation(平移)2、rotate(旋转)3、scale(缩放)4、错切(skew)。相对于每种变化我们都可以根据Matrix中的变换方法来实现。这里我们只是用到了旋转:`matrix.setRotate(degree, roundBitmap.getWidth() / 2f, roundBitmap.getHeight() / 2f)//其中第一个参数就是旋转的角度,第二个、第三个分别是旋转中心的x、y坐标。一般我们实现的旋转都是通过坐标中心实现的; canvas.drawBitmap(roundBitmap, matrix, null);// 第二个就是我们变化的对象`
就能实现旋转的效果了。下面放一张效果图。
当然这里我没法给大家看动态的效果图。一般我们旋转看起来最舒服的 当然是圆形的图片。所以我们接下来还要做的就是把我们的图片切成圆形的。 这个该如何实现呢?其实当下开源的圆形库有很多。可以自行下载。 我这里也有一个自定义圆形切图类
public class ToBitmapUtil{ public static Bitmap toRoundBitmap(Bitmap bitmap) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); float roundPx; float left,top,right,bottom,dst_left,dst_top,dst_right,dst_bottom; if (width <= height) {//取长宽最小的,设置宽高相等,即先变成正方形 roundPx = width / 2; top = 0; bottom = width; left = 0; right = width; height = width; dst_left = 0; dst_top = 0; dst_right = width; dst_bottom = width; } else { roundPx = height / 2; float clip = (width - height) / 2; left = clip; right = width - clip; top = 0; bottom = height; width = height; dst_left = 0; dst_top = 0; dst_right = height; dst_bottom = height; } //先定义的宽高得到正方形的位图对象 Bitmap output = Bitmap.createBitmap(width, height, Config.ARGB_8888); Canvas canvas = new Canvas(output);//给位图设置画布对象 final int color = 0xff424242; final Paint paint = new Paint();//定义画笔 final Rect src = new Rect((int)left, (int)top, (int)right, (int)bottom); final Rect dst = new Rect((int)dst_left, (int)dst_top, (int)dst_right, (int)dst_bottom); final RectF rectF = new RectF(dst); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawRoundRect(rectF, roundPx, roundPx, paint); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(bitmap, src, dst, paint); return output;}}
下面是自定义的圆形带动画的控件
public class CircleImage extends ImageView { private int mBorderThickness = 0; private Context mContext; private int defaultColor = 0xFFFFFFFF; // 如果只有其中一个有值,则只画一个圆形边框 private int mBorderOutsideColor = 0; private int mBorderInsideColor = 0; // 控件默认长、宽 private int defaultWidth = 0; private int defaultHeight = 0; private Bitmap bitmap; private Matrix matrix; float degree=0; public CircleImage(Context context) { super(context); mContext = context; } public CircleImage(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.love); matrix = new Matrix(); setCustomAttributes(attrs); } public CircleImage(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mContext = context; setCustomAttributes(attrs); } private Handler handler=new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); if(msg.what==0){ CircleImage.this.invalidate(); } } }; private void setCustomAttributes(AttributeSet attrs) { TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.circleView); mBorderThickness = a.getDimensionPixelSize( R.styleable.circleView_roundedimageview_border_thickness, 0); mBorderOutsideColor = a .getColor(R.styleable.circleView_roundedimageview_border_outside_color, defaultColor); mBorderInsideColor = a.getColor( R.styleable.circleView_roundedimageview_border_inside_color, defaultColor); } @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (drawable == null) { return; } if (getWidth() == 0 || getHeight() == 0) { return; } this.measure(0, 0); if (drawable.getClass() == NinePatchDrawable.class) return; Bitmap b = ((BitmapDrawable) drawable).getBitmap(); Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true); if (defaultWidth == 0) { defaultWidth = getWidth(); } if (defaultHeight == 0) { defaultHeight = getHeight(); } // 保证重新读取图片后不会因为图片大小而改变控件宽、高的大小(针对宽、高为wrap_content布局的imageview,但会导致margin无效) // if (defaultWidth != 0 && defaultHeight != 0) { // LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( // defaultWidth, defaultHeight); // setLayoutParams(params); // } int radius = 0; if (mBorderInsideColor != defaultColor && mBorderOutsideColor != defaultColor) {// 定义画两个边框,分别为外圆边框和内圆边框 radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - 2 * mBorderThickness; // 画内圆 drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderInsideColor); // 画外圆 drawCircleBorder(canvas, radius + mBorderThickness + mBorderThickness / 2, mBorderOutsideColor); } else if (mBorderInsideColor != defaultColor && mBorderOutsideColor == defaultColor) {// 定义画一个边框 radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness; drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderInsideColor); } else if (mBorderInsideColor == defaultColor && mBorderOutsideColor != defaultColor) {// 定义画一个边框 radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness; drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderOutsideColor); } else {// 没有边框 radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2; } Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius); // canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight // / 2 - radius, null); if(degree>=360){ degree=0; } degree+=0.5; matrix.setRotate(degree, roundBitmap.getWidth() / 2f, roundBitmap.getHeight() / 2f); canvas.drawBitmap(roundBitmap, matrix, null); handler.sendEmptyMessageDelayed(0, 0); } /** * 获取裁剪后的圆形图片 * * @param radius * 半径 */ public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) { Bitmap scaledSrcBmp; int diameter = radius * 2; // 为了防止宽高不相等,造成圆形图片变形,因此截取长方形中处于中间位置最大的正方形图片 int bmpWidth = bmp.getWidth(); int bmpHeight = bmp.getHeight(); int squareWidth = 0, squareHeight = 0; int x = 0, y = 0; Bitmap squareBitmap; if (bmpHeight > bmpWidth) {// 高大于宽 squareWidth = squareHeight = bmpWidth; x = 0; y = (bmpHeight - bmpWidth) / 2; // 截取正方形图片 squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight); } else if (bmpHeight < bmpWidth) {// 宽大于高 squareWidth = squareHeight = bmpHeight; x = (bmpWidth - bmpHeight) / 2; y = 0; squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight); } else { squareBitmap = bmp; } if (squareBitmap.getWidth() != diameter || squareBitmap.getHeight() != diameter) { scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter, diameter, true); } else { scaledSrcBmp = squareBitmap; } Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(), scaledSrcBmp.getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); Paint paint = new Paint(); Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(), scaledSrcBmp.getHeight()); paint.setAntiAlias(true); paint.setFilterBitmap(true); paint.setDither(true); canvas.drawARGB(0, 0, 0, 0); canvas.drawCircle(scaledSrcBmp.getWidth() / 2, scaledSrcBmp.getHeight() / 2, scaledSrcBmp.getWidth() / 2, paint); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(scaledSrcBmp, rect, rect, paint); // bitmap回收(recycle导致在布局文件XML看不到效果) // bmp.recycle(); // squareBitmap.recycle(); // scaledSrcBmp.recycle(); bmp = null; squareBitmap = null; scaledSrcBmp = null; return output; } /** * 边缘画圆 */ private void drawCircleBorder(Canvas canvas, int radius, int color) { Paint paint = new Paint(); /* 去锯齿 */ paint.setAntiAlias(true); paint.setFilterBitmap(true); paint.setDither(true); paint.setColor(color); /* 设置paint的 style 为STROKE:空心 */ paint.setStyle(Paint.Style.STROKE); /* 设置paint的外框宽度 */ paint.setStrokeWidth(mBorderThickness); canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint); } public Bitmap getImageBitmap() { return bitmap; } }
`
其中做了图片外画圆的效果,这样更加真实,更加好看不生硬。
http://download.csdn.net/detail/qq_35522272/9586056 这个是项目源码。有需要的可以自行下载。
1 0
- 当下流行播放器,实现图片动态旋转
- Glide 实现圆形图片 并动态旋转
- 图片旋转播放效果
- 颗粒化处理图片,科技感十足(当下最流行的图片处理方式之一)
- 360度旋转(播放图片)
- 当下流行的日语说法
- 当下流行的金融词汇
- 伪类:hover+css3实现图片动态旋转变化
- iOS开发之音乐播放器专辑图片旋转动画
- 用DirectShow旋转图片、播放Gif图片
- 图片动态播放
- 安卓当下最流行的吸顶效果的实现
- 安卓当下最流行的吸顶效果的实现
- 动态实现正方形旋转
- css实现动态旋转
- javascript实现图片旋转
- javascript实现图片旋转
- js实现图片旋转
- Centos6.5安装Django1.8.2
- hdu 5194 DZY Loves Balls(暴力,数学期望)
- Linux源代码阅读辅助工具
- Cocos2d-x教程之环境搭建
- 20160724-leetcode-string
- 当下流行播放器,实现图片动态旋转
- 一种改进的逻辑斯蒂回归
- 来仿一仿retrofit
- 关于变量、函数等的命名
- Web---JS-返回上一页并刷新代码整理
- [LeetCode]198. House Robber (JavaScript)
- UVALive 5964 LCM Extreme 数论、LCM、筛选
- 周-工作总结(1)
- Thinkphp中<form action="###"></form>跳转