#HarmonyOS 鸿蒙Next体验官#妙用Sensor Server Kit开发感知光影效果

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

#HarmonyOS 鸿蒙Next体验官#妙用Sensor Server Kit开发感知光影效果
<markdown _ngcontent-fft-c237="" class="markdownPreContainer">

1 简介

传感器在APP较为常用,例如开屏摇一摇广告是结合陀螺仪实现的。本篇文章将讲解Sensor Service Kit(传感器服务),通过本篇文章你将学到:

  • 如何获取光线、加速度、陀螺仪数据。
  • 如何实现丰富的震动效果
  • 如何将UI基础组件与光线、陀螺仪传感器数据联动,实现感知光影效果

2 环境搭建

我们首先需要完成HarmonyOS开发环境搭建,可参考(开发一个BLE低功耗蓝牙调试助手(一)连接蓝牙服务设备-华为开发者论坛)中的第二章进行操作。

3 代码结构解读

本篇文档只对核心代码进行讲解,全部代码可看仓库地址HelloKun - Gitee.com

. entry/src
|-- common // 常用工具库
|   |-- CommonConstants.ets
|   |-- Logger.ets
|   `-- PermissionUtil.ets
|-- entryability
|   `-- EntryAbility.ets // 入口,设置全屏
|-- pages
|   |-- ControlBox.ets   // 蓝牙体感手柄页面
|   |-- IconModel.ets    // 图标类
|   |-- Index.ets        // 首页
|   `-- LingDongIcon.ets // 感知光影页面
`-- services // 蓝牙服务
    |-- BLEGattClientManager.ets 
    `-- BLEScanManager.ets
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

4 构建应用主界面

首页面使用Navigation组件实现布局,先将需要展示页面单独存放在首页列表中,页面的title与icon在IconModel.ets进行定义。

// IconModel.ets 定义需要的跳转页面title与icon
const SensorSources: IconItem[] = [
  { title: '灵动光影', image: $r('app.media.calendar') },
  { title: '灵动手柄', image: $r('app.media.xbox') },
  // ...
]
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

首页的布局使用Navigation组件实现,具体可参考该系列教程。只需要在PageMap中新增需要跳转的页面即可。

// Index.ets
// ...
 // 1. 导航页面列表
  PageMap(name: string) {
    if (name === "LingDongIcon") {
      LingDongIcon();
    }
    else if (name === "ControlBox") {
      ControlBox();
    }
    // ...
  }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

实现的效果如下:

5 使用Sensor服务

使用传感器主要步骤如下:

  • 1)导入模块
import { sensor } from '@kit.SensorServiceKit';
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>
  • 2)获取相应权限,本篇文章涉及的、需要向用户声请的权限有:
export const permissions: Array<Permissions> =
  ['ohos.permission.ACCESS_BLUETOOTH',
    "ohos.permission.ACCELEROMETER",
    "ohos.permission.GYROSCOPE",
    "ohos.permission.VIBRATE"];
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

需要在module.json中声明的权限有:

    "requestPermissions": [
      {
        "name": " ohos.permission.ACCESS_BLUETOOTH",
        "reason": "$string:app_name",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.ACCELEROMETER",
          // ...
      },
      {
        "name": "ohos.permission.GYROSCOPE",
           // ...
      },
      {
        "name": "ohos.permission.ORIENTATION",
           // ...
      },
      {
        "name": "ohos.permission.VIBRATE",
           // ...
      },
      {
        "name": "ohos.permission.AMBIENT_LIGHT",
           // ...
      }
    ]
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>
  • 3)了解传感器及其ID

每个传感器都有对应的ID,其定义在@ohos.sensor.d.ts中

    enum SensorId {
        ACCELEROMETER = 1,
        GYROSCOPE = 2,
        AMBIENT_LIGHT = 5,
        MAGNETIC_FIELD = 6,
        BAROMETER = 8,
        HALL = 10,
        PROXIMITY = 12,
        HUMIDITY = 13,
        ORIENTATION = 256,
        GRAVITY = 257,
        LINEAR_ACCELEROMETER = 258,
        ROTATION_VECTOR = 259,
         // ...
    }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

设备并非具备全部传感器能力,在使用传感器前,可以先扫描确定当前设备拥有的传感器列表,实现如下:

sensor.getSensorList((error: BusinessError, data: Array<sensor.Sensor>) => {
    if (error) {
        console.info('getSensorList failed');
    } else {
        console.info('getSensorList success');
        for (let i = 0; i < data.length; i++) {
            console.info(JSON.stringify(data[i]));
        }
    }
});
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

  • 4)注册监听与结束监听。可以通过on()和once()两种接口监听传感器的调用结果。

通过on()接口,实现对传感器的持续监听,传感器上报周期interval设置为100000000纳秒。

sensor.on(sensor.SensorId.ACCELEROMETER, (data: sensor.AccelerometerResponse) => {     console.info("Succeeded in obtaining data. x: " + data.x + " y: " + data.y + " z: " + data.z);}, { interval: 100000000 });
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

通过once()接口,实现对传感器的一次监听。

sensor.once(sensor.SensorId.ACCELEROMETER, (data: sensor.AccelerometerResponse) => {    console.info("Succeeded in obtaining data. x: " + data.x + " y: " + data.y + " z: " + data.z);});
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

通过off()接口,实现取消持续监听传感器数据。适当使用传感器,能更好的控制设备功耗。

sensor.off(sensor.SensorId.ACCELEROMETER);
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

5.1 获取加速度数据

加速度传感器数据有两类,分别是校准数据(ACCELEROMETER)和原始数据(ACCELEROMETER_UNCALIBRATED)。示例中使用校准数据,数据说明如下:

传感器类型 描述 说明 主要用途
ACCELEROMETER 加速度传感器 测量三个物理轴(x、y 和 z)上,施加在设备上的加速度(包括重力加速度),单位 : m/s² 检测运动状态。

设置了一个定时器,每隔一段时间就持续监听x轴的加速度(其他传感器同样处理)数据,并给赋值给变量angle_X,后续进行使用。

 @State accelerometer_X:number = 0;
setInterval(()=>{
 try {
       sensor.on(sensor.SensorId.ACCELEROMETER, (data: sensor.AccelerometerResponse) => {
          this.accelerometer_X = data.x; // data.y data.z包含其他两个轴的加速度
        }, { interval: 100000000 });
  } <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (error) {
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> e: BusinessError = error as BusinessError;
    console.error(`Failed to invoke on. Code: ${e.code}, message: ${e.message}`);
  }
 console.info(TAG,<span class="hljs-string"><span class="hljs-string">'accelerometer_X:'</span></span>+<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.accelerometer_X.toString())
},<span class="hljs-number"><span class="hljs-number">500</span></span>)

<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

5.2 获取陀螺仪数据

1)角速度获取

陀螺仪传感器角速度数据分为是否校准两类,这里获取校准的GYROSCOPE数据,数据说明如下:

传感器类型 描述 说明 主要用途
GYROSCOPE 陀螺仪传感器 测量三个物理轴(x、y 和 z)上,设备的旋转角速度,单位 : rad/s。 测量旋转的角速度。

继续在定时器中补充获取y轴角速度的监听程序:

@State gyroscope_Y:number = 0;
setInterval(()=>{
 try {
       //...
       sensor.on(sensor.SensorId.GYROSCOPE, (data: sensor.GyroscopeResponse) => {
          this.gyroscope_Y = data.y * 10
        }, { interval: 100000000 });
  } <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (error) {
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> e: BusinessError = error as BusinessError;
    console.error(`Failed to invoke on. Code: ${e.code}, message: ${e.message}`);
  }
  <span class="hljs-comment"><span class="hljs-comment">// ...</span></span>
  console.info(TAG,<span class="hljs-string"><span class="hljs-string">'gyroscope_Y:'</span></span>+<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.gyroscope_Y.toString())
},<span class="hljs-number"><span class="hljs-number">500</span></span>)

<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

2)获取角度

陀螺仪传感器可以计算出设备在三个轴的旋转角度,在应用层我们可以直接获取到旋转角度。

传感器类型 描述 说明 主要用途
ORIENTATION 方向传感器 测量设备围绕所有三个物理轴(z、x、y)旋转的角度值,单位:rad。 用于测量屏幕旋转的3个角度值。

监听到的三个物理轴(z、x、y)旋转的角度值分别为alpha、beta、gamma,获取角度的程序如下:

@State orientation_X:number = 0;
@State orientation_Y:number = 0;
@State orientation_Z:number = 0;
setInterval(()=>{
 try {
       //...
        sensor.on(sensor.SensorId.ORIENTATION, (data: sensor.OrientationResponse) => {
          this.orientation_X = data.beta
          this.orientation_Y = data.gamma
          this.orientation_Z = data.alpha
        }, { interval: 100000000 });
  } <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (error) {
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> e: BusinessError = error as BusinessError;
    console.error(`Failed to invoke on. Code: ${e.code}, message: ${e.message}`);
  }
  <span class="hljs-comment"><span class="hljs-comment">// ...</span></span>
  console.info(TAG,<span class="hljs-string"><span class="hljs-string">'beta:'</span></span>+<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.orientation_X.toString())
  console.info(TAG,<span class="hljs-string"><span class="hljs-string">'gamma:'</span></span>+<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.orientation_Y.toString())
  console.info(TAG,<span class="hljs-string"><span class="hljs-string">'alpha:'</span></span>+<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.orientation_Z.toString())
},<span class="hljs-number"><span class="hljs-number">500</span></span>)

<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

5.4 获取光线传感器

光线传感器通常用来调节亮度,不过我们可以监听其数值,用于应用程序组件属性控制。

传感器类型 描述 说明 主要用途
AMBIENT_LIGHT 环境光传感器 测量设备周围光线强度,单位:lux。 自动调节屏幕亮度,检测屏幕上方是否有遮挡。

光线传感器返回的数据类型为LightResponse, 包含强读、色温、红外强度(可以用来做出行建议),完整定义如下:

    interface LightResponse extends Response {
        /**
         * Indicates light intensity, in lux.
         * @type { number }
         * @syscap SystemCapability.Sensors.Sensor
         * @since 8
         */
        intensity: number;
        /**
         * Indicates color temperature, in kelvin.
         * @type { ?number }
         * @syscap SystemCapability.Sensors.Sensor
         * @since 12
         */
        colorTemperature?: number;
        /**
         * Indicates infrared luminance, in cd/m2.
         * @type { ?number }
         * @syscap SystemCapability.Sensors.Sensor
         * @since 12
         */
        infraredLuminance?: number;
    }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

继续在定时器中补充获取环境光线强度的监听程序:

@State Light_Lux:number = 0;
setInterval(()=>{
 try {
         // ...
        sensor.on(sensor.SensorId.AMBIENT_LIGHT, (data: sensor.LightResponse) => {
          this.Light_Lux = data.intensity/100;
        }, { interval: 100000000 });
  } <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (error) {
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> e: BusinessError = error as BusinessError;
    console.error(`Failed to invoke on. Code: ${e.code}, message: ${e.message}`);
  }
  <span class="hljs-comment"><span class="hljs-comment">// ...</span></span>
  console.info(TAG,<span class="hljs-string"><span class="hljs-string">'Light_Lux:'</span></span>+<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.Light_Lux.toString())
},<span class="hljs-number"><span class="hljs-number">500</span></span>)

<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

5.5 震动控制

HarmonyOS NEXT提供了丰富的震动控制接口,不仅预设了丰富的预置震动效果,开发者还可以自定义震动。具体可参考:振动开发指导-振动-Sensor Service Kit(传感器服务)。我们使用预置的震动效果,开发步骤如下:

  • 1)引入模块
import { vibrator } from '@kit.SensorServiceKit';
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>
  • 2)安装预置震动效果开启震动,可先查询振动效果是否被支持,再调用振动接口,下面是开启一次震动的实现:
OpenPreSetVibrator()
  {
    try {
      // 查询是否支持'haptic.effect.soft'
      vibrator.isSupportEffect('haptic.effect.soft', (err: BusinessError, state: boolean) => {
        if (err) {
          console.error(`Failed to query effect. Code: ${err.code}, message: ${err.message}`);
          return;
        }
        console.info('Succeed in querying effect');
        if (state) {
          try {
            // 触发马达振动
            vibrator.startVibration({
              type: 'preset',
              effectId: 'haptic.effect.soft',
              count: 1,
              intensity: 50,
            }, {
              usage: 'unknown'
            }, (error: BusinessError) => {
              if (error) {
                console.error(`Failed to start vibration. Code: ${error.code}, message: ${error.message}`);
              } else {
                console.info('Succeed in starting vibration');
              }
            });
          } catch (error) {
            let e: BusinessError = error as BusinessError;
            console.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`);
          }
        }
      })
    } catch (error) {
      let e: BusinessError = error as BusinessError;
      console.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`);
    }
  }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

6 感知光影

上一章节获取到了加速度、角速度、角度、光强度数据,接下来结合常用组件,实现光影感知的效果。

1)首先使用.shadow属性将图标和文字添加阴影效果:

  • 光的强度控制阴影的可变半径;
  • X轴加速度控制X轴可变偏移范围;
  • y轴转动角度控制Y轴可变偏移范围;
// LingDongIcon.ets
// 光影标题   
Text(this.message)
    .textShadow({radius:10-this.Light_Lux/2,type:ShadowType.COLOR,color:'#000000',
              offsetX:this.widthIcon/2+this.accelerometer_X,offsetY:40+this.gyroscope_Y})
// 光影图标
Image(service.image) .margin({top:'15%'})
                  .backgroundBlurStyle(BlurStyle.Thick)
                  .height(this.widthIcon)
                  .width(this.widthIcon)
                  .borderRadius(this.widthIcon / 2)
                  .borderWidth(0)
                  .borderColor('#A8D18D')
                  .shadow({
                    radius: 40 - this.Light_Lux / 2,
                    type: ShadowType.COLOR,
                    color: '#000000',
                    offsetX: this.accelerometer_X,
                    offsetY: 20 + this.gyroscope_Y / 2
                  })
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

2)使用Grid模拟桌面布局,更直观的查看感知光影的效果。实现如下:

// LingDongIcon.ets
[@Component](/user/Component)
struct ShowIcon{
// ...
  build(){
    Column() {
      Column() {
        Grid() {
          ForEach(IconSources, (service: IconItem, index: number) => {
            GridItem() {
              Column({ space: 15 }) {
                Image(service.image) .margin({top:'15%'}) // 光影图标
                 // ...
                Text(service.title)
              }
            }
          })
        }.height('100%')
        .width('100%')
        .rowsTemplate(('1fr 1fr 1fr 1fr') as string)
        .columnsTemplate(('1fr 1fr 1fr 1fr') as string)
        .supportAnimation(true)
      }.height('100%')
    }.justifyContent(FlexAlign.Center)
  }
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

实现效果演示:

  • 1)当手机静置时,图标和文字的阴影较大且位置固定

  • 2)当手机被拿起时,图标和文字的阴影会随着握持的姿势变动

  • 3)光线强度不同的环境中图标阴影会变淡或者变深

总结

本篇综合介绍了如何使用光线、加速度、陀螺仪和震动等传感器,并实现感知光影的交互体验。我们可以发挥想象,如结合蓝牙、角度、震动、加速度可以将手机变为无线体感手柄!

</markdown>

关于#HarmonyOS 鸿蒙Next体验官#妙用Sensor Server Kit开发感知光影效果的问题,您也可以访问:https://www.itying.com/category-93-b0.html 联系官网客服。
1 回复

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

回到顶部