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>
vue2 3d 切换器的更多相关文章
- C# 方法调用的切换器 Update 2015.02.02
在编写应用程序时,我们经常要处理这样的一组对象,它们的类型都派生自同一个基类,但又需要为每个不同的子类型应用不同的处理方法. 通常的做法,最简单的就是用很多 if-else 去判断各自的类型,如下面的 ...
- KVM切换器
所谓KVM,就是Keyboard.Video.Mouse的缩写,正式的名称为多计算机切换器.简单的说,就是一组键盘.显示器和鼠标,控制2台.4 台.8台.16台甚至到4096台以上的计算机主机. KV ...
- Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法
网格试图(GridView)用于在界面上按行,列分布的方式来显示多个组件. GridView和ListView有共同的父类:AbsListView,因此GridView和ListView具有一定的相似 ...
- Android应用开发学习之图片切换器
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 如果我们要实现类似Windows的照片查看器切换上一张下一张照片的效果,可以使用图片切换器ImageSwitcher ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 文本切换器(TextSwitcher)的功能和用法
TextSwitcher继承了ViewSwitcher,因此它具有与ViewSwitcher相同的特征:可以在切换View组件的同时使用动画效果.与ImageSwitcher相似的是,使用TextSw ...
- [jk]服务器远控卡及kvm切换器
远控卡的需求 经常我们有这么一个需求,那就是某一台器服务器突然宕机,不能启动,而机房却在外地.解决这个问题的方法有两种,一是联系机房人员,二是通过idrac卡远程连接.我们必须根据事情的轻重缓急,来选 ...
- 51nod 1293 球与切换器 | DP
51nod 1293 球与切换器 | DP 题面 有N行M列的正方形盒子.每个盒子有三种状态0, -1, +1.球从盒子上边或左边进入盒子,从下边或右边离开盒子.规则: 如果盒子的模式是-1,则进入它 ...
- 轻量i3wm配置使用笔记 -- 主题切换器(j4-make-config)
快速切换主题 j4-make-config介绍: j4-make-config脚本可以方便地在几组"主题"之间切换,还可以根据当前工作的环境,轻松地从几个不同的配置部分组合一个完整 ...
随机推荐
- UWP 调用outlook邮箱反馈
public static async Task FeedbackAsync(string address, string subject, string body) { if (address == ...
- day1-Python入门
百度云有关文档资料链接 链接:https://pan.baidu.com/s/1pLighnX 密码:j69s
- 翻煎饼 Stacks of Flapjacks
题意:本题意为煎饼排序,大的放在上面,小的放在下面(此题输入是从上到下输入的),为煎饼排序是通过一系列的"翻转"动作来完成的.翻转动作就是将一个小铲插到一叠煎饼中的某两个煎饼之间, ...
- POJ 2084 Catalan数+高精度
POJ 2084 /**************************************** * author : Grant Yuan * time : 2014/10/19 15:42 * ...
- Being a Good Boy in Spring Festival(杭电1850)(尼姆博弈)
Being a Good Boy in Spring Festival Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32 ...
- Android的init过程:init.rc解析流程
这几天打算看下安卓的代码,看优秀的源代码也是一种学习过程,看源代码的过程就感觉到,安卓确实是深受linux内核的影响,不少数据结构的使用方法全然一致.花了一中午时间,研究了下init.rc解析过程,做 ...
- 使用Logstash来实时同步MySQL数据到ES
上篇讲到了ES和Head插件的环境搭建和配置,也简单模拟了数据作测试 本篇我们来实战从MYSQL里直接同步数据 一.首先下载和你的ES对应的logstash版本,本篇我们使用的都是6.1.1 下载后使 ...
- C#设计模式之二十一职责链模式(Chain of Responsibility Pattern)【行为型】
一.引言 今天我们开始讲"行为型"设计模式的第八个模式,该模式是[职责链模式],英文名称是:Chain of Responsibility Pattern.让我们看看现实生活中 ...
- MyBatis_延迟加载01
一.延迟加载 MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时, 按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. MyBatis的延迟加载只是对关联 ...
- tomcat加入系统服务+开机自启
1.首先将tomcat/bin 下的catalina.sh复制到目录/etc/init.d中,并修改名称为tomcat [root@iZ2318 ~]# sudo cp /usr/local/tomc ...