移动Web第二天 4 空间转换 && 5 动画

移动Web

老师：黑马程序员

二、移动Web第二天

4 空间转换

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

空间转换也叫3D转换

属性: transform

4.1 空间位移

语法

• transform: translate3d(x, y, z);
• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);

取值（正负均可)

• 像素单位数值
• 百分比

4.2 透视

使用perspective属性实现透视效果

属性（添加给父级)

• perspective:值;
• 取值∶像素单位数值，数值一般在800-1200。

作用

• 空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

4.3 空间旋转

使用rotate实现元素空间旋转效果

语法

• transform: rotateZ(值);
• transform: rotateX(值);
• transform: rotateY(值);

左手法则

判断旋转方向:

左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向

4.3.1 拓展

rotate3d(x, y,z,角度度数)︰用来设置自定义旋转轴的位置及旋转的角度

x , y，z取值为0-1之间的数字

4.4 立体呈现

使用transform-style: preserve-3d呈现立体图形

实现方法

• 添加transform-style: preserve-3d;
• 使子元素处于真正的3d空间

呈现立体图形步骤

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

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

4.5 3D导航

使用立体呈现技巧实现3D导航效果

实现思路

1. 搭建立方体∶绿色盒子是立方体的前面，橙色盒子是立方体的上面
2. 添加hover状态旋转切换效果

4.6 空间缩放

使用scale实现空间缩放效果

语法

• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);
• transform: scale3d(x, y, z);

5 动画

5.1 使用animation添加动画效果

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

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

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

实现步骤：

1. 定义动画

   

2. 使用动画

   

   注意：

   动画名称和动画时长必须赋值

   取值不分先后顺序
   如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

5.2 动画属性

5.3 使用steps实现逐帧动画

逐帧动画∶帧动画。

开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N);

将动画过程等分成N份