CSS 3D变形动画属性 之逆天立方体叠加动画

于 2017-08-22 07:32:35 发布
阅读量268 收藏 1
点赞数
文章标签： 人工智能
原文链接：https://juejin.im/post/599a28e86fb9a0247537cdb7
版权

上一篇，
juejin.im/post/5993d9…
把立方体的盒子搭出来之后，因为怕文章又臭又长（嗯，就是没有想好玩什么效果，偏不告诉你）关于动效没有做更多的处理，只做了一个绕Y轴旋转，这篇试着做几个效果，CSS3 3D变形的坑太大，一时半会的也填不满，先探探路。
燃鹅，这种跑死浏览器的3D动效实际用处不多，各位看看就好，我也仅仅是有兴趣鹅已。

1. 轻松改变各种效果

为了让3D动效发挥最大程度的头晕眼花，我在搭立方体的时候特意用了<SVG>作为组成各个面的图形元素，如果用<div>的话，诚然，可以利用CSS3的一些属性来实现一些渐变、描边、方格等等效果，但灵活性与<SVG>不能比。比如，我先来个立体框的效果。为了让舞台更大一些，我重新做了定义，所以依旧放上dom结构。
具体的各个面组成元素就不再一一解释了，可以看上篇。总之就是6个<SVG>组成了6个面，现在这个案例里，我用的是最基础的，六个矩形<rect>。

<div class="stage">
<div class="content">
<svg   id="cubic1" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic2" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic3" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic4" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic5" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic6" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
</div>
</div>复制代码

CSS部分如下，我重新优化了一下，便于动效的设定。

.stage {
width: 1000px; height: 1000px;   
/*更大的舞台*/
background:#e5fffb;
perspective:1000px;             
/*透视原点定义的比较大是让立方体尽可能不变形*/
}

@keyframes content{
to {transform:rotateX(360deg) rotateY(360deg);} 
}                                 
/*定义一个绕X轴和Y轴同时360度旋转的动画*/

.content{
transform-style: preserve-3d; 
animation:content 3s linear both  infinite ;
position: absolute;top:400px; left:400px;
width:200px; height:200px
}

#cubic1{transform:translateZ(100px);}
#cubic2{transform:translateZ(-100px);}
#cubic3{transform:rotateX(90deg) translateZ(-100px)}
#cubic4{transform:rotateY(-90deg) translateZ(100px)}
#cubic5{transform:rotateX(-90deg)translateZ(-100px);}
#cubic6{transform: rotateY(90deg) translateZ(100px);}
rect{fill:none; stroke-width:3; stroke:#f29a76}
SVG {opacity:1;position: absolute;width:200px; height:200px}复制代码

现在动画效果是下面这种：


关于旋转的容器content我并没有给予transform-origin即旋转基点的定义，对于三维动画而言，transform-origin(x y z)最多可以定义三个值，X轴、Y轴和Z轴的偏移值，缺省值为(50% 50% 0)，也就是容器的中心点。 因为这里面涉及到两个原点，透视原点和变形原点，所以一定要搞清楚各自的归属，透视原点是舞台stage的属性，这个决定了立方体的表现形式，而变形原点则是执行变形动画的元素的属性，这个决定了立方体的运动形式。
比如说如果我改变transform-origin的值，就可以得到下面这种动画：


立方体的运动轨迹发生变化，立方体的表现形式是不变的。

而改变透视原点的效果则是下面这种：


与上面的正好相反，立方体的运动轨迹不变，但表现形式发生了变化。

好了，拿那个绕着自己的中心点旋转的规规矩矩的立方体作为基础模板，玩一些叠加的动效。首先弄清楚一点，目前进行3D旋转的是我们定义为content，也就是包含了六个<SVG>的<div>，而<SVG>本身，还没有发挥自己的特长呢。以前做过很多<SVG>的动效，现在叠加几个试试，看能不能让系统崩溃（o(╥﹏╥)o）。

2. 两个套在一起的立方体

严格来说，这只是个效果，并没有发挥上面啰啰嗦嗦半天强调的<SVG>的灵活性。但这也是灵光一现的想法，所以感觉效果还好。先说思路，想做一个立方框里套的一个立方体。本来呢，我是很想把CSS部分简化，看能不能只用一套立方体的定义来实现，后来呢，尝试了一下就放弃了，所以不辞辛苦的又造了一个小的立方体出来。CSS部分就不重复了，无非改了一下宽度、高度、位移值的定义。这里想说的是关于旋转角度的定义。
关于立方体旋转角度，我们是这样定义的：

@keyframes content{
to{transform:rotateX(360deg) rotateY(360deg);}
}复制代码

这里我要做的小立方体，容器命名为content2，为了让效果更出彩，我希望作为内核的小立方体与外面的大立方体旋转方向相反，如果这么定义transform:rotateX(-360deg) rotateY(-360deg)，那就很无语了，因为这样会得到下面这种神同步的两个立方体。


正确的定义方法如下： 
@keyframes content2{
0%{transform:rotateX(-180deg) rotateY(-180deg);}
100%{transform:rotateX(180deg) rotateY(180deg);}
}复制代码

DuangDuangDuang，看下效果如何（顺手改了一把透明度）：


这超时空的感觉。科技感满满有木有。有时候不得不感慨，CSS3真是逆天啊。不过这里总是有一种转着转着核立方体超过框立方体的瞬间，待有空再优化。

3. 配合描边动画的3D动效

先把小立方体删了。关于描边动画可以看看我以前的文章，有详解，这里只放CSS部分和效果。我希望得到一个在旋转的过程中进行描边的动画。每个<SVG>只需要增加一个描边动画就可以了。DOM部分不用处理，CSS需要增加一个描边动画的设置：

@keyframes dash {
to {
stroke-dashoffset: 0;
}
}复制代码

然后每个<SVG>去调用这个描边动画，做好延迟时间的定义。因为每个矩形的周长相同，都是800，所以我进行了统一的定义。

#cubic1{transform:translateZ(100px); animation: dash 1s linear forwards;}
#cubic3{transform:rotateX(90deg) translateZ(-100px);animation: dash 1s linear 1s forwards}
#cubic2{transform:translateZ(-100px); animation: dash 1s linear 2s forwards}
#cubic4{transform:rotateY(-90deg) translateZ(100px);animation: dash 1s linear 3s forwards }
#cubic5{transform:rotateX(-90deg)translateZ(-100px);animation: dash 1s linear 4s forwards }
#cubic6{transform: rotateY(90deg) translateZ(100px); }
.content SVG {opacity:1;position: absolute;width:200px; height:200px;stroke-dasharray: 800; stroke-dashoffset: 800;}  /*每个矩形的周长是800*/复制代码

看一下效果如何：

这里这个动画效果并不是很完美，主要是因为每个矩形都有重合的边，这也是最后一个矩形没有给任何描边动画的原因，因为轮到这last one，自己的边都被四邻完成了。要想做的尽善尽美，需要把矩形的定义用<polyline points=""/>这种定义多边形的方法去改写，并严格定义起点终点的位置以及描边参数。包括做不同颜色描边，这里我就不再费时间去修改了，总之要得出的结论是，结合每个<SVG> 的动画进行叠加能够得到叹为观止的效果。

4. 配合位移动画的3D动效

做完描边动画，仍然来个基础的，和位移动画叠加。位移动画比描边动画略为复杂的原因在于描边动画不用考虑6个<SVG>坐标系的变化，而位移动画则受到各自坐标系的影响，不过这里用分离的思想来理解，我们把位移动画附加给<SVG>里面的元素，各自<SVG>包含独立的位移动画，然后<SVG>进行组合立方体的3D旋转及Z轴位移，最后包含<SVG>的<div>再进行3D旋转动画。后面的两步是使用的模板，那只剩下第一步要完成，就是各自<SVG>包含的独立的位移动画。
先看下拆解的立方体的示意图：

为了偷懒，我把位移动画分成了两类，立方体1和2共用垂直方向的位移动画，3、4、5、6共用水平方向的位移动画。组合后的立方体如下所示：


CSS部分新增两个位移动画 
@keyframes move1 {
  to {transform:translateY(160px);} /*矩形宽40，移动160*/
}
@keyframes move2 {
to {transform:translateX(160px);}
}
.move1{animation: move1 2s ease alternate infinite }
.move2{animation: move2 2s ease alternate infinite }复制代码

DOM部分，只需要按我们的分类， 把定义了垂直位移动画的矩形

<rect  class="move1" height="40" width="200" x="0" y="0"/>复制代码

塞到cubic1和cubic2的<SVG>中。

把定义了水平位移动画的矩形

<rect   class="move2"  height="200" width="40" x="0" y="0"/>复制代码

塞到cubic3、cubic4、cubic5和cubic6的<SVG>中。
就可以得到下面这种叠加位移动画效果的旋转立方体了。（为了效果炫酷，把背景色改成了暗黑系，改改颜色、透明度什么的）


再次声明一遍，用 <SVG>来搭建立方体，真的比 <div>好很多。尤其在这种实现叠加动画动效上。

5. 配合旋转动画的3D动效

基础的动画除了上面的描边、位移，定然是少不了旋转动画咯。不过有了上面的基础，相信旋转动画很轻松就可以完成。这里，我们前面用的矩形<rect>要暂时退出历史舞台了，现在要用个更适合做旋转动画的二次元元素，充满魔力的六芒星！六芒星的绘制可以直接用多边形<polygon>完成，不过我说过因为我懒，所以我是直接AI画完导出的。
CSS里定义旋转动画如下：

@keyframes magic{
to {transform:rotate(360deg);}
}
.magic{animation:magic 2s linear  infinite; 
transform-origin:50% 50%}复制代码

DOM结构中，需要修改的，仅仅是把组成六芒星的路径塞进每个<SVG>里。只拿其中一个为例，其他都是粘贴复制的体力活。

<svg   id="cubic1" xmlns="http://www.w3.org/2000/svg" >
<rect  class="base" height="200" width="200" x="0" y="0"/>
 <g class="magic"><!--以下为组成六芒星的路径-->
<path d="M100,20l70.645,122.36H29.355L100,20 M100,18L27.623,143.36h144.753L100,18L100,18z"/>
<path d="M170.645,57.64L100,180L29.355,57.64L170.645,57.64 M172.377,56.64l-144.753,0L100,182L172.377,56.64L172.377,56.64z"/>
</g>
</svg>复制代码

再看一下六个面都叠加的动画效果

效果好坏先不说，你就说晕不晕！晕不晕！反正我做的时候，看了一眼效果，吓得赶紧关闭窗口，转的太恶心了。反正恶心的受不鸟了，索性再恶心点，改了不同的颜色，又叠加了个半透明的圆形，调整了一下转速。再看看效果：


好吧，反正怎么改都不满意，知道有这么个玩意就行了。

6. 六个面独立进行动画

前面的几个动效，不管怎么说，都是用了相同的动画叠加，要么一起转（晕啊，吐啊），要么一起移动，要么一起描边，那么如果是每个<SVG>进行不同的动效再叠加行不行啊？当然可以啊。这是我们选择<SVG>做立方体的初衷，就是要把它的作用发挥最大化。下面就来一个每个<SVG>都不同，动效也不同的效果。下面先修改<SVG>。（图片来源于网络，不想做不想做，W(￣_￣)W）


好吧，我承认，把 <SVG>修改之后，承诺的六种不同的效果我不想做了。手累到抽筋，下次再说。88。最后一个动画算是没结尾，下次给动物分别做上动态表情~
weixin_34060741
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值