vue2 3d 切换器

Posted 2020-09-16 吃个石头

空闲时写了一个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>