首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏IMWeb前端团队

    HTML5设备定向小实践

    devicemotion事件,提供了设备的加速信息,表示为定义在设备上的坐标系中的笛卡尔坐标以及设备在坐标系中的自转速率。 首先我们来关注一下deviceorientation和devicemotion这两个事件的兼容性: ? devicemotion事件 // 注册一个devicemotion时间的接收器: window.addEventListener("devicemotion", function(event) { 摇一摇判断即判定设备是否有超过加速度变化临界值的晃动: if (window.DeviceMotionEvent) { window.addEventListener('devicemotion ', shakeEventHandler, false); } else { alert('本设备不支持devicemotion事件'); } var THRESHOLD = 1000; var

    97020发布于 2019-12-04
  • 来自专栏清墨_iOS分享

    iOS 手机运动CoreMotion

    ; double gravityY = motionManager.deviceMotion.gravity.y; double gravityZ = motionManager.deviceMotion.gravity.z ; double rotationY = motionManager.deviceMotion.rotationRate.y; double rotationZ =motionManager.deviceMotion 4.欧拉角、四元数->attitude //欧拉角 double roll = motionManager.deviceMotion.attitude.roll; double pitch = motionManager.deviceMotion.attitude.pitch ; double yaw = motionManager.deviceMotion.attitude.yaw; //空间位置的四元数(与欧拉角类似,但解决了万向结死锁问题) double w = motionManager.deviceMotion.attitude.quaternion.w ; double wx = motionManager.deviceMotion.attitude.quaternion.x; double wy = motionManager.deviceMotion.attitude.quaternion.y

    1.8K30发布于 2018-07-03
  • 来自专栏前端开发中的事

    H5实现手机摇一摇

    首先:最重要的是 该设备需要支持H5的新特性DeviceMotion和DeviceMotionEvent 。 devicemotion h5提供的dom事件,提高设备的加速度的信息,其中包含 x,y,z 三个坐标方向的加速度 DeviceMotionEvent 返回设备的有关加速度和旋转的信息 //运动事件监听 if (window.DeviceMotionEvent) { // 没有支持的可以报错 window.addEventListener('devicemotion',deviceMotionHandler

    2.6K80发布于 2021-03-12
  • 来自专栏HTML5学堂

    HTML5 实现手机摇一摇

    今天主要介绍devicemotion事件(设备事件),它提供设备的加速信息,表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。 您的设备支持硬件调用"); } else { alert("您的设备不支持硬件调用"); } 2、绑定运动传感(devimotion)事件; window.addEventListener('devicemotion (){ // 监听运动传感事件,查看是否支持硬件运动 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion

    4.7K60发布于 2018-03-12
  • 来自专栏IMWeb前端团队

    HTML5设备定向小实践

    devicemotion事件,提供了设备的加速信息,表示为定义在设备上的坐标系中的笛卡尔坐标以及设备在坐标系中的自转速率。 首先我们来关注一下deviceorientation和devicemotion这两个事件的兼容性: ? devicemotion事件 // 注册一个devicemotion时间的接收器: window.addEventListener("devicemotion", function(event) { 摇一摇判断即判定设备是否有超过加速度变化临界值的晃动: if (window.DeviceMotionEvent) { window.addEventListener('devicemotion ', shakeEventHandler, false); } else { alert('本设备不支持devicemotion事件'); } var THRESHOLD = 1000; var

    1.5K60发布于 2017-12-29
  • 来自专栏OECOM

    js模仿微信摇一摇功能

    var speed = 25; var x = y = z = lastX = lastY = lastZ = 0; window.addEventListener('devicemotion last_z = z; } } if (window.DeviceMotionEvent) { window.addEventListener('devicemotion

    3.3K20发布于 2020-07-02
  • 来自专栏移动端开发

    屏幕方向该知道的那些事儿

    motionManager = [[CMMotionManager alloc] init]; } if ([_motionManager isGyroAvailable]) { // deviceMotion 加速器不可用"); [self setMotionManager:nil]; } } - (void)handleDeviceMotion:(CMDeviceMotion *)deviceMotion { double x = deviceMotion.gravity.x; double y = deviceMotion.gravity.y; if (fabs(y) >= fabs - (void)creatMotionManager{ // deviceMotion 加速器和陀螺仪的复合型数据 _motionManager.deviceMotionUpdateInterval

    2K100发布于 2018-01-09
  • 来自专栏centosDai

    「移动端」前端常见知识点总结

    HTML5 提供的 devicemotion 事件封装了设备的运动传感器,提供设备的加速度,还提供设备自转速率。对设备运动状态进行判断,就可以实现“摇一摇”效果。 devicemotion 监听手机加速度变化的事件: acceleration - 加速度 accelerationIncludingGravity - 重力加速度 rotationRate - 旋转速度 放一移动的干扰,设置一个临界值 /* 使用之前先检查浏览器是否支持 */ if(window.DeviceMotionEvent){ /* 添加事件 */ window.addEventListener('devicemotion

    1.3K10发布于 2021-10-01
  • 来自专栏centosDai

    「移动端」前端常见知识点总结

    HTML5 提供的 devicemotion 事件封装了设备的运动传感器,提供设备的加速度,还提供设备自转速率。对设备运动状态进行判断,就可以实现“摇一摇”效果。 devicemotion 监听手机加速度变化的事件: acceleration - 加速度 accelerationIncludingGravity - 重力加速度 rotationRate - 旋转速度 放一移动的干扰,设置一个临界值 /* 使用之前先检查浏览器是否支持 */ if(window.DeviceMotionEvent){ /* 添加事件 */ window.addEventListener('devicemotion

    1.3K30编辑于 2021-11-30
  • 来自专栏雨过天晴

    原 JS摇一摇核心代码

        var speed = 25;       var x = y = z = lastX = lastY = lastZ = 0;       window.addEventListener('devicemotion

    2.3K40发布于 2018-06-04
  • 来自专栏大前端(横向跨端 & 纵向全栈)

    IOS系统中H5页面实现摇一摇功能

    alert("授权成功") window.addEventListener('devicemotion if (window.DeviceMotionEvent) { window.addEventListener('devicemotion

    1.6K20编辑于 2021-12-28
  • 来自专栏飞扬的花生

    一步一步完成一个聚会摇色子游戏

    function listenPhoneShake() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion ', deviceMotionHandler, false); console.log("addEventListener devicemotion"); } else function listenPhoneShake() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion ', deviceMotionHandler, false); console.log("addEventListener devicemotion"); } else

    1.7K90发布于 2018-01-18
  • 来自专栏centosDai

    「移动端」前端常见知识点总结

    HTML5 提供的 devicemotion 事件封装了设备的运动传感器,提供设备的加速度,还提供设备自转速率。对设备运动状态进行判断,就可以实现“摇一摇”效果。 devicemotion 监听手机加速度变化的事件: acceleration - 加速度 accelerationIncludingGravity - 重力加速度 rotationRate - 旋转速度 放一移动的干扰,设置一个临界值 /* 使用之前先检查浏览器是否支持 */ if(window.DeviceMotionEvent){ /* 添加事件 */ window.addEventListener('devicemotion

    1.3K20发布于 2021-09-30
  • 来自专栏游戏开发之旅

    cocos creator鼠标键盘事件总结

    cc.SystemEvent.EventType.KEY_DOWN (键盘按下) cc.SystemEvent.EventType.KEY_UP (键盘释放) cc.SystemEvent.EventType.DEVICEMOTION 绑定多点触摸事件 cc.eventManager.addListener(listener, this.node); 设备重力传感事件 事件监听器类型:cc.SystemEvent.EventType.DEVICEMOTION Accelerometer cc.inputManager.setAccelerometerEnabled(true); cc.systemEvent.on(cc.SystemEvent.EventType.DEVICEMOTION , this.onDeviceMotionEvent, this); }, destroy () { cc.systemEvent.off(cc.SystemEvent.EventType.DEVICEMOTION

    2.6K51发布于 2019-12-02
  • 来自专栏练小习的专栏

    设备方向事件与设备运动事件以及简单的摇一摇实现

    style="padding:20px; text-align:center; font-size:14px;">

    <script> window.addEventListener("devicemotion window.DeviceMotionEvent) { var speed = 20; var x = y = z = lastX = lastY = lastZ = 0; window.addEventListener('devicemotion

    1.3K50发布于 2017-12-29
  • 来自专栏每日一篇技术文章

    OpenGL ES_手把手教你打造VR全景播放器

    { if(self.isVR) { [self calculateModelViewProjectMatrixWithDeviceMotion:self.motionManager.deviceMotion :(CMDeviceMotion*)deviceMotion{ _modelViewMatrix = GLKMatrix4Identity; float scale = OSSphereScale; _modelViewMatrix = GLKMatrix4Scale(_modelViewMatrix, scale, scale, scale); if (deviceMotion ! = nil) { CMAttitude *attitude = deviceMotion.attitude; if (self.referenceAttitude multiplyByInverseOfAttitude:self.referenceAttitude]; } else { self.referenceAttitude = deviceMotion.attitude

    2.3K31发布于 2018-09-14
  • 来自专栏HT

    基于 HTML5 WebGL 的 CPU 监控系统

    手机传感器数据 HTML5 提供了几个 DOM 事件来获得移动端方向及运动的信息,deviceorientation 提供设备的物理方向信息;devicemotion 提供设备的加速度信息。 - 处理移动 (Motion) 事件 与方向事件处理类似,移动事件的处理也是首先注册监听 devicemotion: window.addEventListener('devicemotion', (e

    1.3K30发布于 2020-04-24
  • 来自专栏程序员的诗和远方

    JavaScript 陀螺仪检测设备方向(重力感应)

    ### 处理方向变化的事件 HTML5 中与手机方向变化有关的 API 有两个,一个是 deviceorientation 事件,一个是 devicemotion 事件。 而 devicemotion 事件主要是用来监听设备在位置和方向上的加速度变化信息,这个主要用在摇一摇等应用上。

    7.1K70发布于 2018-05-02
  • 来自专栏Cocos Creator开发

    CocosCreator一步一步实现重力球游戏

    10.1 开启重力传感系统 cc.systemEvent.setAccelerometerEnabled(true); cc.systemEvent.on(cc.SystemEvent.EventType.DEVICEMOTION ,this.onDeviceMotionEvent, this); 10.2 关闭重力传感系统 cc.systemEvent.off(cc.SystemEvent.EventType.DEVICEMOTION

    1.9K40发布于 2020-03-02
  • 来自专栏White feathe 的博客

    H5 项目实用

    HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 ---- 22、form表单手机号校验? ,在PC端正常 //2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间 ---- 33、重力感应事件 // 运用HTML5的deviceMotion ,调用重力感应事件 if(window.DeviceMotionEvent){ document.addEventListener('devicemotion', deviceMotionHandler

    6.1K11编辑于 2021-12-08
  • 领券