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

小贝

本文主要给大家介绍的是关于Android实现微信雷达扫描效果的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：

废话不多说 先上图（用AS录制的 转换工具不是很好 所以看得效果不是很好）

效果图

示例代码

Activity 代码

2. public class ShapeDrawableActivity extends AppCompatActivity {
3. private ImageView ivLightbeam;
5. private ObjectAnimator radarScanAnim; // 扫描动画
7. private int width;
8. private int height;
10. @Override
11. protected void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
14. setContentView(R.layout.activity_shape_drawable);
15. ivLightbeam = (ImageView) findViewById(R.id.ivLightbeam);
16. }
19. @Override
20. protected void onResume() {
21. super.onResume();
22. startScan();
23. }
25. @Override
26. public void onWindowFocusChanged(boolean hasFocus) {
27. super.onWindowFocusChanged(hasFocus);
28. if (height == 0 || width == 0) { //获取屏幕长、宽
29. width = ScreenUtils.getScreenWidth(this);
30. height = ScreenUtils.getScreenHeight(this); //根据屏幕长、宽计算扫描圆的直径
31. int diameter = (int) Math.sqrt(Math.pow(height, 2) + Math.pow(width, 2)); //修改光束的大小，使光束可以扫描到整个屏幕
32. FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(diameter, diameter);
33. ivLightbeam.setLayoutParams(layoutParams); //将扫描光束的中心移至屏幕内容中心
34. int offsetX = (width - diameter) / 2;
35. int offsetY = (height - diameter) / 2 + ScreenUtils.getStatusHeight(this) / 2;
36. ivLightbeam.setX(offsetX);
37. ivLightbeam.setY(offsetY);
38. }
39. }
41. @Override
42. protected void onPause() {
43. super.onPause();
44. stopScan();
45. } // 开始扫描
47. private void startScan() {
48. radarScanAnim = ObjectAnimator.ofFloat(ivLightbeam, "rotation", 0f, 360f);
49. radarScanAnim.setDuration(2000); //2秒扫描一圈
50. radarScanAnim.setInterpolator(new LinearInterpolator());
51. radarScanAnim.setRepeatCount(ObjectAnimator.INFINITE);//循环扫描
53. ivLightbeam.setVisibility(View.VISIBLE);
54. radarScanAnim.start();
55. } // 停止扫描
57. private void stopScan() {
58. ivLightbeam.setVisibility(View.GONE);
59. radarScanAnim.end();
60. }
61. }

复制代码

Activity 布局文件

2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:background="#FA000000"
7. android:clipToPadding="false"
8. android:fitsSystemWindows="true">
10. <ImageView
11. android:id="@+id/ivWave"
12. android:layout_width="match_parent"
13. android:layout_height="match_parent"
14. android:layout_margin="5dp"
15. android:src="@drawable/wave" />
17. <ImageView
18. android:id="@+id/ivLightbeam"
19. android:layout_width="match_parent"
20. android:layout_height="match_parent"
21. android:src="@drawable/light_beam" />
23. </FrameLayout>

复制代码

绘制扫描光束

2. <shape
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:shape="oval">
6. <size
7. android:width="500dp"
8. android:height="500dp" />
10. <gradient
11. android:endColor="#AAAAAAAA"
12. android:startColor="#00000000"
13. android:type="sweep"
14. />
15. </shape>

复制代码

绘制雷达波纹

2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3. <item>
4. <!--最外层圆圈-->
5. <shape android:shape="oval">
6. <solid android:color="#10FFFFFF" />
7. <size
8. android:width="600dp"
9. android:height="600dp" />
10. <stroke
11. android:color="#10B8B8B8"
12. android:dashWidth="1dp" />
13. </shape>
14. </item>
16. <item
17. android:bottom="100dp"
18. android:left="100dp"
19. android:right="100dp"
20. android:top="100dp">
21. <!--最中间层圆圈-->
22. <shape android:shape="oval">
23. <solid android:color="#1CFFFFFF" />
24. <stroke
25. android:color="#1CB8B8B8"
26. android:dashWidth="1dp" />
27. </shape>
28. </item>
30. <item
31. android:bottom="200dp"
32. android:left="200dp"
33. android:right="200dp"
34. android:top="200dp">
36. <!--最中心圆圈-->
37. <shape android:shape="oval">
38. <solid android:color="#2CFFFFFF" />
39. <stroke
40. android:color="#2CB8B8B8"
41. android:dashWidth="1dp" />
42. </shape>
43. </item>
44. </layer-list>

复制代码

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对程序员之家的支持。