查看: 310|回复: 0

[手机开发] Android仿微信雷达扫描效果的实现方法

发表于 2017-11-10 08:39:58
太阳http代理AD

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

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

效果图


示例代码

Activity 代码

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

Activity 布局文件

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

绘制扫描光束

  1. <shape
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval">
  4. <size
  5. android:width="500dp"
  6. android:height="500dp" />
  7. <gradient
  8. android:endColor="#AAAAAAAA"
  9. android:startColor="#00000000"
  10. android:type="sweep"
  11. />
  12. </shape>
复制代码

绘制雷达波纹

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

总结

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



太阳http代理AD
回复

使用道具 举报