HTML5+CSS3高级动画的应用实践

本文为作者行舟客投稿，点击阅读原文可到达github地址～

github地址：https://github.com/1314mxc/yunUI ，欢迎star！

我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都得心应手。但目前来说，3D效果的“高级”动画似乎更受欢迎一些，而且我们也确实需要。

---

这不，前两天笔者就在项目中给“翻转动画”增加了一个3D效果，看起来贼爽：

这个动画实现所用到的3D盒子模型是现在3D模型中最常用的一个 —— 不过我们先拿其中两个面分析：

1. 首先，要实现这个功能，我们从外往里看：把文字所在部分看作一个盒子的话，前后两个横线并不属于这个盒子才对，那么，很自然就想到了—— ::after 和 ::before 伪元素；

2. 其次，两个文字分别在两个div上，那么就需要有一个可以附带 overflow: hidden 的盒子 —— 不能加到上面的盒子中，因为after和before不属于div！

3. 最后是两个元素的翻转效果：我们需要知道的是，为了性能考虑，我们最好是对整个盒子进行翻转，而不是对两个文字div附加动画

★

事实上，transform动画中的属性表示的含义更多的是“过渡多少”而不是“过渡到哪里”！

”

那么，这个层级关系就很明了了：

<!--伪元素装饰盒子-->
<div class="pic_border">
    <!--overflow-hidden盒子-->
    <div class="pic_box">
        <!--transition过渡盒子-->
        <div class="pic_item">
            <div class="pic_text">music</div>
            <div class="pic_back">此时此刻，非我莫属</div>
        </div>
    </div>
</div>

按照上面所说，我们很容易为它添加对应的CSS：

.pic_border{
    position: relative;
}
.pic_border::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 43vw;
    height: 1px;
    background-color: red;
}
.pic_border::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 43vw;
    height: 1px;
    background-color: red;
}
@media screen and (max-width: 1100px) {
    .pic_border::before,.pic_border::after{
        width: 20vw;
    }
}
.pic_box{
    display: inline-block;
    height: 70px;
    margin-left: calc(50% - 70px);
    overflow: hidden;
    perspective: 2000px;
    cursor: pointer;
    user-select: none;
}
.pic_item{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all .7s ease;
}
.pic_text,.pic_back{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pic_text{
    transform: rotateX(0deg) translateZ(-21.9px);
}
.pic_back{
    transform: rotateX(90deg) translateZ(-15px);
}
.pic_box:hover .pic_item{
    transform: rotateX(-90deg);
}
.pic_box:active .pic_item{
    transform: rotateX(-90deg);
}

需要注意的是：3D效果是一定要有Z轴参与的！ 不然会显得很“尴尬”

---

有了简单的上下翻滚，我们还可以实现“跟随鼠标上下左右翻滚”动画，就是所谓的“鼠标从哪里进入盒子，盒子就往哪个方向翻转” —— 有两种实现方式：

1. 在最外层盒子中加四个方向的i或span标签，用来判断鼠标从哪里进入，JS控制盒子做对应的rotateX/Y；

2. 借助数学库与“matrix”：

<div class="block" id="block">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face up"></div>
    <div class="face down"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</div>

.block {
    position: absolute;
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
    transform-origin: 50px 50px;
}
.front {
    background: fuchsia;
}

.back {
    transform: translate3d(0, 0, 100px) rotateY(180deg);
    background: red;
}
.left {
    transform-origin: 100% 50% 0px;
    transform: rotateY(90deg);
    background: aqua;
}
.right {
    transform-origin: 0% 50% 0px;
    transform: rotateY(-90deg);
    background: blueviolet;
}
.up {
    transform-origin: 50% 0% 0px;
    transform: rotateX(90deg);
    background: darkorange;
}
.down {
    transform-origin: 50% 100% 0px;
    transform: rotateX(-90deg);
    background: darkviolet;
}

为了便于观察，我们为让魔方格子旋转起来：鼠标滑动分为左、右、上、下滑动，每种滑动对应一种方向的格子旋转。

• 从右往左：绕 Y 轴旋转 θ 角

• 从左往右：绕 Y 轴旋转 -θ 角

• 从上往下：绕 X 轴旋转 θ 角

• 从下往上：绕 X 轴旋转 -θ 度

当然旋转需要有一个参照点，默认盒子中心。我们可以借助库函数将生成的矩阵转化为 CSS 中 transform 的 matrix3d 属性值。

var currentQ = {x:0, y:0, z:0, w:1};
var lastQ = {x:0, y:0, z:0, w:1};
var currentMatrix = matrix.identity();
var l = Math.sqrt(dx * dx + dy * dy);
if(l <= 0) return;
var x = dx / l, y = dy / l;
var axis = {x: x, y: y, z: 0};
var q = matrix.fromAxisAndAngle(axis, l);
currentQ = matrix.multiplyQuaternions(q, lastQ);
currentMatrix = matrix.makeRotationFromQuaternion(currentQ);

通过上述方式我们计算出了当前旋转矩阵 currentMatrix，接下来，我们使用上面介绍的矩阵转化成对应 css 的函数，生成对应的 transform 属性：

// 将矩阵转化为transform matrix 属性值。
function matrix2css(m){
    var style = 'matrix(';
    if(m.length == 16){
        style = 'matrix3d('
    }
    for(let i =0; i< m.length; i++){
        style += m[i];
        if(i !== m.length - 1){
            style += ','
        }else{
            style +=')'
        }
    }
    return style;
}

var style = matrix2css(currentMatrix);

最后将生成的样式应用到魔方格子上：

document.querySelector('#block').style.transform = style;

这样就实现了一个美妙的动画盒子！

---

帧动画在canvas中的应用

除去CSS-transform和animation在项目中的大放异彩，canvas+CSS的动画方式也得到了很多人的支持！而canvas中实现动画的最好方式不是离屏技术、不是canvas动画库，而是帧动画！

我们通常通过requestAnimFrame控制一张图片上的显示区域的位置从而达到“伪动画”！

比如：

//调用方js部分内容
var starPic=new Image()
starPic.src="上面图片地址"

var lastTime,deltaTime;

var stardog=new starObj()
stardog.init()

lastTime=Date.now()

gameloop()

function gameloop(){
 window.requestAnimFrame(gameloop)
 var now=Date.now()
 deltaTime=now-lastTime
 lastTime=now
 drawStars()
}

//真正控制动画的js文件
var satrObj=function(){
 this.x;
 this.y;
 this.picNo;
 this.timer;
}
starObj.prototype.init=function(){
 this.x=Math.random()*630+100;   //630：图片宽度
 this.y=Math.random()*70+150;   //70：图片高度
 this.picNo=0;
 this.timer=0;
}
starObj.prototype.update=function(){
 this.timer+=deltaTime;
 if(this.timer>50){
  this.picNo+=1;
  this.picNo%=7;
  this.timer=0;
 }
}
starObj.prototype.draw=function(){
 ctx.drawImage(starPic,0,0,this.picNo*70,70,this.x,this.y,70,70)
}

function drawStars(){
 stardog.update();
 stardog.draw();
}

毫无疑问的是：这种方式对UI和前端的结合开始有了要求。（笔者前段时间研究支付宝春节活动发现：里面采用的也是“前端引入动画文件”的方式！）

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧