vue2 3d 切换器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

空闲时写了一个3d切换器，灵感来自于转行前画3d工程图，效果如图：

功能：按住鼠标中间，变为3d模式，点击6个页面中的某一个页面，页面旋转放大，恢复到2d图形，3d图消失。再次点击鼠标中间，恢复为3d（含动画效果），按住中键不放，可以左右或者上下拖动，3d图片做720°旋转。

效果可在：此处查看请使用chrome打开

转动原理：由于正方体只有6个面，所以ul+6个li标签，先做出正方体布局。li标签布局出正方向后，都是相对于ul标签的位置，所以转动ul标签，正方形并不会散架。鼠标水平移动X为ul transform:rotateX(x)，鼠标竖直移动Y为ul的transform：rotateY(-Y) 实现转动。-Y是为了一开始竖直方向不要反方向转动。

关于坐标轴正方向:x轴：从左到右，y轴：从上到下，z轴：从屏幕到眼睛。坐标系是会转动的，这点非常恶心。

转动正方向：眼睛在坐标原点观察，逆时针为正方向。比如rotateX（30deg），指绕x轴正方向转30°。看到的那一面是下面往上跑的。

动画布局：ul li 为百分比布局，外层套一层div，实际切换动画由放大缩小div的大小来实现。动画时保存3d图形位置，当然只需要保存ul的转动数据，当按下中键后，恢复ul转动数据，恢复div大小，就可以了。

动画层：1、div tansition all 1s 这个动画是渐变放大与缩小，让ul与li都同时放大缩小。 2、ul transition all 1s 这儿需要动态加入属性，转动时不需要，切换时才需要，效果为切换时转动放大和缩小 3、transiton-group 包裹li标签，这儿动画是为了其中5个标签渐变消失，只留一个标签。

有了上面的理论，基本可以写出来了，这儿贴出代码。

<template>

  <div class='r' @mousedown='start'>

    <div  ref='odiv' :style='odiv' class='oDiv'>

      <ul :class='ulClass' :style="ulSty" v-show='showUl' >

        <transition-group name='tt' enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'> <!--淡入淡出效果-->

           <li v-for='n in 6' class='li'  v-show='showLi[n-1]' ref='n' :key='n' @mousedown='show(n,$event)'>

              <component :is='msg[n-1]' class='com'></component>

           </li>

        </transition-group>

      </ul>

    </div>

 </transition>

  </div>

</template>

<script>

import pieChart from './pieChart.vue'

import barChart from './barChart.vue'

import info from './info.vue'

import table1 from './table.vue'

import baidu from './baidu.vue'

import reg from './reg.vue'

export default{

    data(){

      return{

         msg:['info','barChart','reg','table1','baidu','pieChart'],

         n:'',

         m:true,

         showUl:true,

         ulClass:'ul1',

         flag:true,

         odiv:{

            width:'300px',

            height:'300px',

            margin:'50px auto 100px',

            transition:'all 1s'

         },

         showLi:[true,true,true,true,true,true],

         ulSty:{

           transform:''

         },

         changeSty:[],

         drag:{lastX:0,lastY:0,X:0,Y:0},

      }

    },

    components:{

      pieChart,barChart,info,table1,baidu,reg

    },

    methods:{

      show(n,e){//点击鼠标左键，显示该组件。

        if(e.button!=0)return

        if(!this.flag)return

        this.flag=false//show某个组件的时候，不能再次show它。

        this.n=nthis.odiv.width='100%'

        this.odiv.height='500px'

        let b= this.$refs.n[n-1].style

        let d=getComputedStyle(this.$refs.n[n-1],null)['background']

        b.overflow='visible'

        b.opacity='1'

        b.background='#fff'

        b.transition='all 1s'

        this.showLi=[false,false,false,false,false,false]

        this.showLi[n-1]=true

        this.ulClass='ul1 move'

        let c=getComputedStyle(this.$refs.n[n-1],null)['transform']

        this.changeSty=[this.ulSty.transform,c,d]

        this.ulSty.transform='rotateX(0deg) rotateY(0deg)'

        b.transform='rotateX(0deg) rotateY(0deg) translateZ(0px)'

      },

    init(){//当点击鼠标中键，恢复3d图形之前的位置。初始化li，ul，div的属性。

        let b= this.$refs.n[this.n-1].style

        b.overflow='hidden'

        b.opacity='0.8'

        b.background=this.changeSty[2]

        b.transform=this.changeSty[1]

        this.odiv.width='300px'

        this.odiv.height='300px'

        this.showLi=[true,true,true,true,true,true]

        this.ulClass='ul1'

        this.ulSty.transform=this.changeSty[0]

    },

    start(e){//转动效果

      if(e.button!=1)return

      if(this.n){

        this.init()

      }

      e.preventDefault();

      this.flag=true

      let x1=e.clientX,

        y1=e.clientY

        document.onmousemove=(evt)=>{

            let dx=evt.clientX-x1

            let dy=evt.clientY-y1

            this.drag.X=(this.drag.lastX+dx)%360

            this.drag.Y=(this.drag.lastY+dy)%360

            this.ulSty.transform='rotateX('+ -this.drag.Y+'deg) rotateY('+this.drag.X+'deg)'

        }

        document.onmouseup=()=>{

          this.drag.lastX=this.drag.X

          this.drag.lastY=this.drag.Y

          document.onmouseup=null

          document.onmousemove=null

        }

    }

  },

}

</script>

<style lang="stylus" scoped>

.com

  position:absolute

  width:100%

.r

  width:100%

wh()

  width:100%

  height:100%

.ul1

  position relative

  wh()

  transform-style: preserve-3d;

.move

  transition all 1s

.li

  list-style:none

  wh()

  position:absolute

  font-size 40px

  background:#fff

  z-index:0

  transform-origin:center center

  overflow:hidden

  transition:all 1s

n(x,y,z)

  transform:rotateY(y) rotateX(x) translateZ(150px)

  background:rgba(z,0.8)

.li:nth-child(1)

  n(0,90deg,burlywood)

.li:nth-child(2)

  n(0,-90deg,beige)

.li:nth-child(3)

  n(90deg,0,lightyellow)

.li:nth-child(4)

  n(180deg,0,pink)

.li:nth-child(5)

  n(270deg,0,#20A0FF)

.li:nth-child(6)

  n(0,0,aquamarine)

</style>