美文网首页
指南针效果实现

指南针效果实现

作者: 翻这个墙 | 来源:发表于2017-11-23 10:19 被阅读18次

1.测试环境

  1. XCode版本无要求(建议:XCode7.0不需要开发者账号也可以进行真机调试)
  2. 必须要求真机设备(只有真机设备才有"磁力计"传感器)

2. 实现思路

  1. 利用"磁力计"传感器,获取设备朝向
  2. 根据设备朝向反向旋转"指南针"图片

3. 代码实现

  • 1.获取设备朝向
// 1.导入CoreLocation框架以及对应的主头文件
        #import <CoreLocation/CoreLocation.h>

// 2.创建CLLocationManager对象并设置代理
        self.locationM = [[CLLocationManager alloc] init];
        self.locationM.delegate = self;

// 3.获取设备朝向前, 先判断"磁力计"是否可用
        if(![CLLocationManager headingAvailable]) return;

// 4. 调用方法, 开始获取设备朝向
        [self.locationM startUpdatingHeading];

// 5. 在对应的代理方法中获取设备朝向信息
    - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading
        {
            // 旋转图片代码
        }
  • 2.旋转图片
// 1.判断当前的角度是否有效(如果此值小于0,代表角度无效)
        if(newHeading.headingAccuracy < 0)   return;

// 2.获取当前设备朝向(磁北方向)
        CGFloat angle = newHeading.magneticHeading;

// 3.转换成为弧度
        CGFloat radian = angle / 180.0 * M_PI;

// 4.带动画反向旋转指南针
        [UIView animateWithDuration:0.5 animations:^{
            self.compassView.transform = CGAffineTransformMakeRotation(-radian);
        }];

4. 磁北与真北

  • 真北方向:地理北极所在方向
  • 磁北方向:
  • 磁北角度: heading.magneticHeading --> 相对于"磁北方向"产生的角度
  • 真北角度: heading.trueHeading --> 相对于"真北方向"产生的角度

5. 注意事项

  1. 获取设备朝向前, 先判断"磁力计"是否可用
[CLLocationManager headingAvailable];
  1. 获取朝向前, 判断当前朝向信息是否有效
if(newHeading.headingAccuracy < 0) return;
  1. 注意设备朝向与"航向"的区别

    • 设备朝向是指手机的朝向;
    • "航向"可以理解为设备的移动方向
  2. 使用"磁力计"传感器获取设备朝向, 不需要请求用户授权
    因为设备朝向不涉及用户隐私

相关文章

  • 指南针效果实现

    1.测试环境 XCode版本无要求(建议:XCode7.0不需要开发者账号也可以进行真机调试) 必须要求真机设备(...

  • 自定义View实践:指南针的实现

    本文将介绍如何通过自定义View实现了一个指南针的效果,效果图如下: 源码GitHub地址 首先是根据磁力计和加速...

  • Android 指南针

    指南针 关于指南针的实现,网上已经有很多的文章了,原理都一样,要使用Android系统的传感器实现,我们先简单看一...

  • Android指南针实现

    功能实现:通过指南针传感器获得转动角度,设置指南针图片的转动动画即可 获取系统 SensorManager 来进行...

  • CoreAnimation的粒子效果

    粒子效果 效果1 代码实现 效果2 代码实现 效果3 效果4 代码实现

  • Swift 指南针实现

  • 卓越智驾实现效果展示

    Android原生实现效果 IOS原生实现效果 React Native实现效果 1.Android上运行效果 2...

  • iOS 指南针

    需求:让指南针图片不断指向磁北方向 一、实现思路: 1.获取手机设备朝向(距离磁北方向的角度) 2.让指南针图片反...

  • 原生JS实现Tab切换效果和模态框效果

    原生JS实现Tab切换效果 效果展示 原生JS实现模态框效果 效果展示

  • 2019-03-26 jqery

    实现开关等效果一: 实现开关等效果二: 实现开关等效果三: text()方法: html()方法; clone()...

网友评论

      本文标题:指南针效果实现

      本文链接:https://www.haomeiwen.com/subject/qroavxtx.html