【前端】空间转换与动画-编程知识

1.空间转换

1.1位移

1.2旋转

1.3立体呈现

1.4缩放

2.动画

1.空间转换

空间：是从坐标轴角度定义的，x，y，z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

空间转换也叫3D转换，实现元素在空间内的位移，旋转，缩放等效果

属性：transform

取值：正值指向屏幕外，负值指向屏幕内

1.1位移

语法：

transform: translate3d(x,y,z);

transform: translateX();

transform: translateY();

transform: translateZ();

取值：

像素单位数值
百分比

📖Note：

默认情况下，无法观察到Z轴位移效果

原因：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

解决方案：

属性：perspective 添加给父级

取值：像素单位值，数值一般在800~1200

效果：实现透视效果

perspective：也叫做视距，视距就是人的眼睛到屏幕的距离

取值：正负值均可。设置为正值，视距减小；设置为负值，视距增大

perspective：1000px

即设置1000px为视距的初始值。设置太小（小于800px），近大效果太明显；设置太大（大于1200px），近大远小效果不明显

1.2旋转

语法：

transform：rotateZ(值) 和rotate(值)实现的效果相同

transform：rotateX(值)

transform：rotateY(值)

根据设计图判断旋转的方向？

空间转换：左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

1.3立体呈现

属性：transform-style:preserve-3d;

效果：使子元素处于真正的3d空间

呈现立体图形步骤：

盒子父元素添加transform-style:preserve-3d;
按需求设置子盒子的位置（位移或旋转）

案例：3D导航

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {width: 300px;height: 40px;margin: 50px auto;}.navs li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;/* 过渡 */transition: all .5s;/* 让子级处于3D空间 */transform-style: preserve-3d;}.navs li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;/* 向Z轴正方向移动20px */transform: translateZ(20px);}.navs li a:last-child {background-color: orange;/* 注意旋转方向的判断 面向这个平面进行判断 */transform: rotateX(90deg) translateZ(20px);}/* li:hover 立方体旋转 */.navs li:hover {transform: rotateX(-90deg);}</style>
</head><body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body></html>

1.4缩放

语法：

transform: scale3d(x,y,z);

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleY(倍数);

2.动画

过渡：实现两个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）

动画的本质是快速切换大量图片使在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

动画的实现步骤：

1️⃣定义动画

/* 两个状态 */

@keyframes 动画名称 {

from {}

to {}

}

/* 多个状态 */

@keyframes 动画名称 {

0% {}

10% {}

15% {}

100% {}

}

百分比：指的是该样式占动画总时长的百分比

2️⃣使用动画

animation: 动画名称动画花费时长;

animation复合属性：

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态；

📖Note：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个表示动画时长，第二个表示延迟时间

animation的拆分写法：不常用

补间动画：平滑连续的动画

逐帧动画：分步动画

使用steps可以实现逐帧动画

精灵动画实现步骤：

1.准备显式区域：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

2.定义动画：改变背景图的位置（移动距离就是精灵图的宽度）

3.使用动画

添加速度曲线steps(N)，N与精灵图上的小图个数相同
添加无限重复效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 1680/12 */width: 140px;height: 140px;/* 便于观察盒子位置 *//* border: 1px solid #000; *//* 精灵图作为背景图 */background-image: url(../images/bg.png);/* 使用动画 */animation: run 1s steps(12) infinite,move 5s forwards;}/* 定义人物动画 */@keyframes run {/* 改变背景图的位置 */from {background-position: 0 0;}to {background-position: -1680px 0;}}/* 定义盒子移动动画 */@keyframes move {/* 改变背景图的位置 *//* 动画的开始状态和盒子的默认样式相同，可以省略开始状态的代码 */from {transform: translateX(0);}to {transform: translateX(800px);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>