HTML5+CSS3高级动画的应用实践-外链论坛

7wu1wm0 发表于 2024-6-29 14:05:18

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

<img src="https://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG3130Y2hAXktGHLUh928RJm3myrqkheLOYFvHIjErDMWl3Qwme8oOCvvSZmiaC6ykrRgVLTH9AzgA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1&retryload=1" style="width: 50%; margin-bottom: 20px;">
本文为作者行舟客投稿，点击阅读原文可到达github位置～
github位置：https://github.com/1314mxc/yunUI ，欢迎star！
咱们大概都晓得css能够用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都得心应手。但日前来讲，3D效果的“高级”动画似乎更受欢迎有些，况且咱们亦确实必须。

这不，前两天笔者就在项目中给“翻转动画”增多了一个3D效果，看起来贼爽：<img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/2wV7LicL762ZC3ibWfiatVmzP1dKDVWj1bZsTEVySSibU5XfPhOz0icGSwnyPSUh088j64podczia4zZ6IibkHaehAqgg/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
这个动画实现所用到的3D盒子模型是此刻3D模型中最常用的一个 —— 不外咱们先拿其中两个面分析：首要，要实现这个功能，咱们从外往里看：把文字所在部分看作一个盒子的话，前后两个横线并不属于这个盒子才对，那样，很自然就想到了—— ::after 和 ::before 伪元素；其次，两个文字分别在两个div上，那样就必须有一个能够附带 overflow: hidden 的盒子 —— 不可加到上面的盒子中，由于after和before不属于div！最后是两个元素的翻转效果：咱们必须晓得的是，为了性能思虑，咱们最好是对全部盒子进行翻转，而不是对两个文字div附加动画★
事实上，transform动画中的属性暗示的含义更加多的是“过渡多少”而不是“过渡到哪里”！”
那样，这个层级关系就很明了了：<div class="pic_border">        <div class="pic_box">                <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
;    bac公斤round-color
: red;
}.pic_border::after
{    content
: ;    position
: absolute;    top: 50%
;    right: 0
;    width: 43vw
;    height: 1px
;    bac公斤round-color
: red;
}@mediascreen 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-3
d;    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轴参与的！ 否则会显出很“尴尬”<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/2wV7LicL762ZC3ibWfiatVmzP1dKDVWj1bZo9VWV82AYxHKCia0JXZnSgAuGykbaNthHvWQ626a7kYjCZHb2ibDDpVQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
有了简单的上下翻滚，咱们还能够实现“跟随鼠标上下上下翻滚”动画，便是所说的“鼠标从哪里进入盒子，盒子就往哪个方向翻转” —— 有两种实现方式：在最外层盒子中加四个方向的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-3
d;    width: 100px
;    height: 100px
;    transform-origin: 50px 50px
;
}.front
 {    bac公斤round
: fuchsia;
}.back
 {    transform: translate3d(0, 0, 100px) rotateY
(180deg);    bac公斤round
: red;
}.left
 {    transform-origin: 100% 50% 0px
;    transform: rotateY
(90deg);    bac公斤round
: aqua;
}.right
 {    transform-origin: 0% 50% 0px
;    transform: rotateY
(-90deg);    bac公斤round
: blueviolet;
}.up
 {    transform-origin: 50% 0% 0px
;    transform: rotateX
(90deg);    bac公斤round
: darkorange;
}.down
 {    transform-origin: 50% 100% 0px
;    transform: rotateX
(-90deg);    bac公斤round
: 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();varl =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;        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掌控一张照片上的表示区域的位置从而达到“伪动画”！
例如：<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/2wV7LicL762ZC3ibWfiatVmzP1dKDVWj1bZxFRxibMcRyLwEs6qxmQasiaPLKuDzrPaxia0SPApqficgbtLprPJUAah0g/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">//调用方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();
}
<img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/2wV7LicL762ZC3ibWfiatVmzP1dKDVWj1bZm57GIowhHJJ3n7ib4FLMGLxzTAao8ZSCia05iaOTMUgRDx1XpMPKOnNDA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">毫没疑问的是：这种方式对UI和前端的结合起始有了需求。（笔者前段时间科研支付宝春节活动发掘：里面采用的亦是“前端引入动画文件”的方式！）最后欢迎加我微X(winty230)，拉你进技术群，长时间交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...
<img src="https://mmbiz.qpic.cn/mmbiz_png/2wV7LicL762bCOIS0es2Dvt0PXFBaRkRCpHTOlwao0X1xJFAQW9SAa6mgzRIO5fXktSjOSuZALqgt0ibBDBcPf9g/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/7QRTvkK2qC6BGNLOQxwBmMTOGmO0dSd31LlXL5HoZWBH6fKtSSeKQ2DOeTfVR7nHVXl0U7RSAchUVoia2bErYfg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">点个在看支持我吧<img src="https://mmbiz.qpic.cn/mmbiz_gif/7QRTvkK2qC6BGNLOQxwBmMTOGmO0dSd3NmOWsZBMWg3BC1msdwtyvBkNLYh1xGLQibm4QsHibClwxWfzuibicbJcIA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;">

星☆雨 发表于 2024-8-20 14:07:10

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

星☆雨 发表于 2024-9-9 05:44:00

谷歌外链发布 http://www.fok120.com/

wrjc1hod 发表于 2024-9-29 20:30:20

楼主果然英明！不得不赞美你一下！

页: [1]

外链论坛's Archiver

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