小程序 rotate3d

js · 小程序 · 2018年8月20日 · 13923 次浏览

视图层 wxml

1
2
3
4
5
6
7
8
9
10
<view id="example-element" bindtap="animationData">
    <view class="transition-all" style="" animation="{{animationData}}">
        <view class="face front">1</view>
        <view class="face back">6</view>
        <view class="face right">2</view>
        <view class="face left">4</view>
        <view class="face top">3</view>
        <view class="face bottom">5</view>
    </view>
</view>

 

视图层 wxss

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
#example-element {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 50%;
    right:50%;
 
}
 
.transition-all {
    /*perspective: 550px;*/
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}
.face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    font-size: 60px;
    color: #fff;
    border-radius: 20px;
}
 
.front {
    background: rgb(90,90,90);
    transform: translateZ(50px);
}
 
.back {
    background: rgb(0,210,0);
    transform: rotateY(180deg) translateZ(50px);
}
 
.right {
    background: rgb(210,0,0);
    transform: rotateY(90deg) translateZ(50px);
}
 
.left {
    background: rgb(0,0,210);
    transform: rotateY(-90deg) translateZ(50px);
}
 
.top {
    background: rgb(210,210,0);
    transform: rotateX(90deg) translateZ(50px);
}
 
.bottom {
    background: rgb(210,0,210);
    transform: rotateX(-90deg) translateZ(50px);
}

 

js 控制层

通过 wxml 与 wxss 配合可以形成一个3D视图，通过 js 可以控制转动，这里需要使用 rotate3d，小程序 rotate3d 第四参数 <angle> 只支持 deg 角度；

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
Component({
    properties:{
        size:{
            type:Number,
            value:100
        },
    },
    data:{
        animationData:{}
    },
    attached(){
        var animation = wx.createAnimation({
            duration:1000,
            timingFunction:"ease",
        })
 
        this.animation = animation
        this.num=1;
 
        // animation.scale(2,2).rotate(45).step();
        //
        // this.setData({
        //     animationData:animation.export()
        // })
 
        setTimeout(function(){
            animation.rotate3d(1,1,-1,360).step();
            this.setData({
                animationData:animation.export()
            })
        }.bind(this),1000)
    },
    methods:{
        animationData(){
            let num=this.num++;
            console.log('animationData',num);
            //this.num++;
            this.num=this.num>6?1:this.num;
            switch (num){
                case 1:
                    this.animation.rotate3d(0,1,0,-90).step();
                    break;
                case 2:
                    this.animation.rotate3d(1,0,0,-90).step();
                    break;
                case 3:
                    this.animation.rotate3d(0,1,0,90).step();
                    break;
                case 4:
                    this.animation.rotate3d(1,0,0,90).step();
                    break;
                case 5:
                    this.animation.rotate3d(1,0,0,180).step();
                    break;
            }
            //this.animation.rotate3d(1,1,-1,180).step();
            this.setData({
                animationData:this.animation.export()
            })
        },
    }
})

 

标准h5 <angle>支持unit (deg, rad, grad, turn)，具体如下

小程序 rotate3d

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

打赏
标签:
暂无评论

请到【后台 - 用户 - 我的个人资料】中填写个人说明。

发表评论