为了账号安全,请及时绑定邮箱和手机立即绑定

一个关于圆(角度)的JS动画问题

一个关于圆(角度)的JS动画问题

繁星coding 2018-09-12 13:21:48
现在我通过重力感应API 的得到 longitude,将手机平放在桌面时,将其进行旋转,其值是0增加到360。当到达360时,再转就会突变成0.由于我是通过得到前后两次的旋转角度的差值,进行过渡动画。 可当到达360在转到0时, 前后两者的差值就会发生突变,造成过渡动画突变(旋转一周后再回到正常的位置)。我的过渡动画是通过 transform: rotateY() 进行过渡的,因此有什么方法可以解决这种突变呢(即让360与0之间的转换平顺)?// 我的过渡方法:①第一次进入页面时,记录当前的 longitude值为 initLon②手机旋转时,获取longitude值为 curLon,然后 disLon = curLon - initLon 得到差值,然后进行过渡运算。因此360与0之间的突变会导致动画过渡问题
查看完整描述

1 回答

?
aluckdog

TA贡献1847条经验 获得超7个赞

function calcDisLon(initLon, curLon) {

  return (curLon + 360 + 180 - initLon) % 360 - 180; // [-180, 180)

}


console.log(calcDisLon(359, 1)); // 2

console.log(calcDisLon(1, 359)); // -2

假设每次执行动画的间隔足够短,不会出现角度值实际变化量的绝对值大于等于 180° 的情况

那么我们以 180° 为分界线,增量大于 180° 则认为其实际值为负,因而减去 360°

否则返回原先的值


查看完整回答
反对 回复 2018-10-23
  • 1 回答
  • 0 关注
  • 453 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信