外链论坛

 找回密码
 立即注册
搜索
查看: 69|回复: 3

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

[复制链接]

2942

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109397
发表于 2024-6-29 14:05:18 | 显示全部楼层 |阅读模式

本文为作者行舟客投稿,点击阅读原文可到达github位置

github位置:https://github.com/1314mxc/yunUI ,欢迎star!

咱们大概都晓得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;

    top50%

;

    left0

;

    width43vw

;

    height1px

;

    bac公斤round-color

: red;

}

.pic_border::after

{

    content

: ;

    position

: absolute;

    top50%

;

    right0

;

    width43vw

;

    height1px

;

    bac公斤round-color

: red;

}

@mediascreen and (max-width:1100px

) {

    .pic_border::before,.pic_border::after

{

        width20vw

;

    }

}

.pic_box

{

    display

: inline-block;

    height70px

;

    margin-leftcalc

(50% - 70px);

    overflow

: hidden;

    perspective2000px

;

    cursor

: pointer;

    user-select

: none;

}

.pic_item

{

    width100%

;

    height100%

;

    transform-style: preserve-3

d;

    transition: all .7s

 ease;

}

.pic_text,.pic_back

{

    width100%

;

    height100%

;

    display

: flex;

    justify-content

: center;

    align-items

: center;

}

.pic_text

{

    transformrotateX(0deg) translateZ

(-21.9px);

}

.pic_back

{

    transformrotateX(90deg) translateZ

(-15px);

}

.pic_box:hover .pic_item

{

    transformrotateX

(-90deg);

}

.pic_box:active .pic_item

{

    transformrotateX

(-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-3

d;

    width100px

;

    height100px

;

    transform-origin50px 50px

;

}

.front

 {

    bac公斤round

: fuchsia;

}

.back

 {

    transformtranslate3d(0, 0, 100px) rotateY

(180deg);

    bac公斤round

: red;

}

.left

 {

    transform-origin100% 50% 0px

;

    transformrotateY

(90deg);

    bac公斤round

: aqua;

}

.right

 {

    transform-origin0% 50% 0px

;

    transformrotateY

(-90deg);

    bac公斤round

: blueviolet;

}

.up

 {

    transform-origin50% 0% 0px

;

    transformrotateX

(90deg);

    bac公斤round

: darkorange;

}

.down

 {

    transform-origin50% 100% 0px

;

    transformrotateX

(-90deg);

    bac公斤round

: darkviolet;

}

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

从右往左:绕 Y 轴旋转 θ 角从左往右:绕 Y 轴旋转 -θ 角从上往下:绕 X 轴旋转 θ 角从下往上:绕 X 轴旋转 -θ 度

当然旋转必须有一个参照点,默认盒子中心。咱们能够借助库函数将生成的矩阵转化为 CSS 中 transform 的 matrix3d 属性值。

var currentQ = {x:0y:0z:0w:1

};

var lastQ = {x:0y:0z:0w:1

};

var

 currentMatrix = matrix.identity();

varl =Math

.sqrt(dx * dx + dy * dy);

if(l <= 0return

;

var

 x = dx / l, y = dy / l;

var axis = {x: x, y: y, z0

};

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和前端的结合起始有了需求。(笔者前段时间科研支付宝春节活动发掘:里面采用的是“前端引入动画文件”的方式!)

最后

欢迎加我微X(winty230),拉你进技术群,长时间交流学习...

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

点个在看支持我吧
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-20 14:07:10 | 显示全部楼层
你的留言真是温暖如春,让我感受到了无尽的支持与鼓励。
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-9 05:44:00 | 显示全部楼层
谷歌外链发布 http://www.fok120.com/
回复

使用道具 举报

2950

主题

2万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569299
发表于 2024-9-29 20:30:20 | 显示全部楼层
楼主果然英明!不得不赞美你一下!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-9 10:45 , Processed in 0.117672 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.