黑马程序员技术交流社区

标题: Android笔记 之 旋转木马的音乐效果 [打印本页]

---

作者: 陈君    时间: 2014-9-16 18:41
标题: Android笔记 之 旋转木马的音乐效果
一、前言——
大家一定在百度音乐上在线听过歌，有没有注意到那个旋转唱片——
就上面那个，当音乐在播放的时候，那个光碟轮子在转，就想旋转木马一般。感觉好好玩啊。
碰巧想起前阵子做音乐播放器，哎，那这个也可以做在手机的音乐播放器上，这样就代替了进度条了。
一想到，就兴奋，于是，首先画圆形，然后放置背景图片，然后使用动画旋转。当音乐播放时，同时
开始播放圆形图片的动画，当音乐暂停时，暂停旋转；当音乐停止播放时，就停止动画，图片回到原点。

二、效果—— 三、源码——
（1）MainActivity

1. <span style="font-size:18px;">public class MainActivity extends Activity {
   
2. MediaPlayer m1;
   
3. ImageView infoOperatingIV;
   
4. 
   
5. @Override
   
6. protected void onCreate(Bundle savedInstanceState) {
   
7. super.onCreate(savedInstanceState);
   
8. setContentView(R.layout.activity_main);
   
9. infoOperatingIV = (ImageView) findViewById(R.id.infoOperating);
   
10. 
    
11. Button play = (Button) findViewById(R.id.play);
    
12. Button stop = (Button) findViewById(R.id.stop);
    
13. 
    
14. play.setOnClickListener(new OnClickListener() {
    
15. @Override
    
16. public void onClick(View v) {
    
17. playMusic();
    
18. }
    
19. });
    
20. 
    
21. stop.setOnClickListener(new OnClickListener() {
    
22. @Override
    
23. public void onClick(View v) {
    
24. stopMusic();
    
25. }
    
26. });
    
27. 
    
28. }
    
29. 
    
30. private void playMusic() {
    
31. m1 = MediaPlayer.create(this, R.raw.quiet);
    
32. m1.start();
    
33. 
    
34. Animation operatingAnim = AnimationUtils.loadAnimation(this, R.anim.tip);
    
35. LinearInterpolator lin = new LinearInterpolator();
    
36. operatingAnim.setInterpolator(lin);
    
37. if (operatingAnim != null) {
    
38. infoOperatingIV.startAnimation(operatingAnim);
    
39. }
    
40. 
    
41. m1.setOnCompletionListener(new OnCompletionListener() {
    
42. @Override
    
43. public void onCompletion(MediaPlayer mp) {
    
44. mp.stop();
    
45. infoOperatingIV.clearAnimation();
    
46. }
    
47. });
    
48. }
    
49. 
    
50. private void stopMusic() {
    
51. m1.stop();
    
52. infoOperatingIV.clearAnimation();
    
53. }
    
54. 
    
55. }</span><span style="font-size: 16pt;">
    
56. </span>

复制代码

（2）画圆的控件，这部分代码参考了网友的。

1. <span style="font-size:18px;">public class RoundImageView extends ImageView {
   
2. private int mBorderThickness = 0;
   
3. private Context mContext;
   
4. private int defaultColor = 0xFFFFFFFF;
   
5. // 如果只有其中一个有值，则只画一个圆形边框
   
6. private int mBorderOutsideColor = 0;
   
7. private int mBorderInsideColor = 0;
   
8. // 控件默认长、宽
   
9. private int defaultWidth = 0;
   
10. private int defaultHeight = 0;
    
11. 
    
12. public RoundImageView(Context context) {
    
13. super(context);
    
14. mContext = context;
    
15. }
    
16. 
    
17. public RoundImageView(Context context, AttributeSet attrs) {
    
18. super(context, attrs);
    
19. mContext = context;
    
20. setCustomAttributes(attrs);
    
21. }
    
22. 
    
23. public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
    
24. super(context, attrs, defStyle);
    
25. mContext = context;
    
26. setCustomAttributes(attrs);
    
27. }
    
28. 
    
29. private void setCustomAttributes(AttributeSet attrs) {
    
30. TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.roundedimageview);
    
31. mBorderThickness = a.getDimensionPixelSize(R.styleable.roundedimageview_border_thickness, 0);
    
32. mBorderOutsideColor = a.getColor(R.styleable.roundedimageview_border_outside_color, defaultColor);
    
33. mBorderInsideColor = a.getColor(R.styleable.roundedimageview_border_inside_color, defaultColor);
    
34. }
    
35. 
    
36. @Override
    
37. protected void onDraw(Canvas canvas) {
    
38. Drawable drawable = getDrawable();
    
39. if (drawable == null) {
    
40. return;
    
41. }
    
42. 
    
43. if (getWidth() == 0 || getHeight() == 0) {
    
44. return;
    
45. }
    
46. this.measure(0, 0);
    
47. if (drawable.getClass() == NinePatchDrawable.class)
    
48. return;
    
49. Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    
50. Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
    
51. if (defaultWidth == 0) {
    
52. defaultWidth = getWidth();
    
53. 
    
54. }
    
55. if (defaultHeight == 0) {
    
56. defaultHeight = getHeight();
    
57. }
    
58. // 保证重新读取图片后不会因为图片大小而改变控件宽、高的大小（针对宽、高为wrap_content布局的imageview，但会导致margin无效）
    
59. // if (defaultWidth != 0 && defaultHeight != 0) {
    
60. // LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
    
61. // defaultWidth, defaultHeight);
    
62. // setLayoutParams(params);
    
63. // }
    
64. int radius = 0;
    
65. if (mBorderInsideColor != defaultColor && mBorderOutsideColor != defaultColor) {// 定义画两个边框，分别为外圆边框和内圆边框
    
66. radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - 2 * mBorderThickness;
    
67. // 画内圆
    
68. drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderInsideColor);
    
69. // 画外圆
    
70. drawCircleBorder(canvas, radius + mBorderThickness + mBorderThickness / 2, mBorderOutsideColor);
    
71. } else if (mBorderInsideColor != defaultColor && mBorderOutsideColor == defaultColor) {// 定义画一个边框
    
72. radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness;
    
73. drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderInsideColor);
    
74. } else if (mBorderInsideColor == defaultColor && mBorderOutsideColor != defaultColor) {// 定义画一个边框
    
75. radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness;
    
76. drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderOutsideColor);
    
77. } else {// 没有边框
    
78. radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2;
    
79. }
    
80. Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
    
81. canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight / 2 - radius, null);
    
82. }
    
83. 
    
84. /**
    
85. * 获取裁剪后的圆形图片
    
86. *
    
87. * @param radius
    
88. * 半径
    
89. */
    
90. public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
    
91. Bitmap scaledSrcBmp;
    
92. int diameter = radius * 2;
    
93. 
    
94. // 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片
    
95. int bmpWidth = bmp.getWidth();
    
96. int bmpHeight = bmp.getHeight();
    
97. int squareWidth = 0, squareHeight = 0;
    
98. int x = 0, y = 0;
    
99. Bitmap squareBitmap;
    
100. if (bmpHeight > bmpWidth) {// 高大于宽
     
101. squareWidth = squareHeight = bmpWidth;
     
102. x = 0;
     
103. y = (bmpHeight - bmpWidth) / 2;
     
104. // 截取正方形图片
     
105. squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight);
     
106. } else if (bmpHeight < bmpWidth) {// 宽大于高
     
107. squareWidth = squareHeight = bmpHeight;
     
108. x = (bmpWidth - bmpHeight) / 2;
     
109. y = 0;
     
110. squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight);
     
111. } else {
     
112. squareBitmap = bmp;
     
113. }
     
114. 
     
115. if (squareBitmap.getWidth() != diameter || squareBitmap.getHeight() != diameter) {
     
116. scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter, diameter, true);
     
117. 
     
118. } else {
     
119. scaledSrcBmp = squareBitmap;
     
120. }
     
121. Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(), scaledSrcBmp.getHeight(), Config.ARGB_8888);
     
122. Canvas canvas = new Canvas(output);
     
123. 
     
124. Paint paint = new Paint();
     
125. Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(), scaledSrcBmp.getHeight());
     
126. 
     
127. paint.setAntiAlias(true);
     
128. paint.setFilterBitmap(true);
     
129. paint.setDither(true);
     
130. canvas.drawARGB(0, 0, 0, 0);
     
131. canvas.drawCircle(scaledSrcBmp.getWidth() / 2, scaledSrcBmp.getHeight() / 2, scaledSrcBmp.getWidth() / 2, paint);
     
132. paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
     
133. canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
     
134. 
     
135. bmp = null;
     
136. squareBitmap = null;
     
137. scaledSrcBmp = null;
     
138. return output;
     
139. }
     
140. 
     
141. /**
     
142. * 边缘画圆
     
143. */
     
144. private void drawCircleBorder(Canvas canvas, int radius, int color) {
     
145. Paint paint = new Paint();
     
146. /* 去锯齿 */
     
147. paint.setAntiAlias(true);
     
148. paint.setFilterBitmap(true);
     
149. paint.setDither(true);
     
150. paint.setColor(color);
     
151. /* 设置paint的　style　为STROKE：空心 */
     
152. paint.setStyle(Paint.Style.STROKE);
     
153. /* 设置paint的外框宽度 */
     
154. paint.setStrokeWidth(mBorderThickness);
     
155. canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);
     
156. }
     
157. 
     
158. }</span><span style="font-size: 16pt;">
     
159. </span>
     

复制代码

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2