H5+C3:高级动画的应用实践
我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都得心应手。
但目前来说,3D效果的“高级”动画似乎更受欢迎一些,而且我们也确实需要。
这不,前两天笔者就在项目中给“翻转动画”增加了一个3D效果,看起来贼爽:
这个动画实现所用到的3D盒子模型是现在3D模型中最常用的一个 —— 不过我们先拿其中两个面分析:
- 首先,要实现这个功能,我们从外往里看:把文字所在部分看作一个盒子的话,前后两个横线并不属于这个盒子才对,那么,很自然就想到了——
::after
和::before
伪元素; - 其次,两个文字分别在两个div上,那么就需要有一个可以附带
overflow: hidden
的盒子 —— 不能加到上面的盒子中,因为after和before不属于div! - 最后是两个元素的翻转效果:我们需要知道的是,为了性能考虑,我们最好是对整个盒子进行翻转,而不是对两个文字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轴参与的! 不然会显得很“尴尬”
有了简单的上下翻滚,我们还可以实现“跟随鼠标上下左右翻滚”动画,就是所谓的“鼠标从哪里进入盒子,盒子就往哪个方向翻转” —— 有两种实现方式:
- 在最外层盒子中加四个方向的i或span标签,用来判断鼠标从哪里进入,JS控制盒子做对应的rotateX/Y;
- 借助数学库与“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和前端的结合开始有了要求。
(笔者前段时间研究支付宝春节活动发现:里面采用的也是“前端引入动画文件”的方式!)