Sorth Tong

# 陀螺仪

  • deviceorientation 当加速计检测到设备方位发生改变时，它就会被触发

  • devicemotion 每当设备运动状态出现加速或者减速时，devicemotio事件都会被触发

  • compassneedscalibration 这个事件会在用户代理检测到指南针需要校准时被触发

    window.addEventListener("deviceorientation", function (event) { event.alpha、event.beta、event.gamma }, true)

    window.addEventListener("devicemotion", function (event) { //负责指定设备相对于地球在x、y与z轴上的加速状况，大家可以分别通过其x、y与z属性进行访问。该数值的单位为m/s2。 event.acceleration //accelerationIncludingGravity与acceleration属性所取的数值相同，但它会把地球重力因素考虑在内。这项属性的取值应当被用在设备硬件不知道如何去除加速数据中重力影响效果的情况下。事实上，在这类实例当中，acceleration属性往往不该由用户代理提供。 event.accelerationIncludingGravity //rotationRate负责指定设备在各个轴上每秒运动多少度。我们可以通过其alpha、beta与gamma属性访问rotationRate的各独立取值。 event.rotationRate }, true)

    window.addEventListener("compassneedscalibration", function (event) { alert('您的罗盘需要校准') event.preventDefault(); }, true)

# 摇一摇
//运动事件监听
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion',deviceMotionHandler,false);
}

//获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
        var acceleration =eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime-last_update)> 10) {
            var diffTime = curTime -last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
            if (speed > SHAKE_THRESHOLD) {
                alert("你中奖啦！");  // Do something
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 集合Touch事件

3D物体的滑动事件 touchstart touchmove

  • 手写 touchstart touchmove 事件
  • css3D库 css3d-engine parallax(js视觉差引擎库)

eg 淘宝造物节 https://www.zcool.com.cn/work/ZMTg3NTc3Mjg=.html

# 3D魔方 提供代码感受效果

  • html
<div id="view" style="width:160px;height:160px;margin:80px auto 0 auto;">
    <div id="box">
    <div class="one">A</div>
    <div class="two">B</div>
    <div class="three">C</div>
    <div class="four">D</div>
    <div class="five">E</div>
    <div class="six">F</div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
  • css
<style>
    #box div {
        position: absolute;
        width: 160px;
        height: 160px;
        border: 3px solid #000;
        background-color: rgba(255, 200, 100, 0.8);
        text-align: center;
        font-size: 130px;
    }

    #box {
        /* -webkit-perspective: 300px;视距以及方向
        -webkit-perspective-origin: left; */
        /* -webkit-perspective: 300px; */
        -webkit-animation-name: animation;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 3s;
        margin: 80;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 80px 80px 0;
    }

    #box .one {
        -webkit-transform: translateZ(80px);
    }

    #box .two {
        -webkit-transform: rotateX(-90deg) translateZ(80px);
    }

    #box .three {
        -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
    }

    #box .four {
        -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
    }

    #box .five {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
    }

    #box .six {
        -webkit-transform: rotateY(90deg) translateZ(80px);
    }

    @-webkit-keyframes animation {

        from,
        to {}

        16% {
            -webkit-transform: rotateY(-90deg);
        }

        33% {
            -webkit-transform: rotateY(-90deg) rotateZ(135deg);
        }

        50% {
            -webkit-transform: rotateY(225deg) rotateZ(135deg);
        }

        66% {
            -webkit-transform: rotateY(135deg) rotateX(135deg);
        }

        83% {
            -webkit-transform: rotateY(135deg);
        }
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

← CSS高级实用技巧 →