移动Web——空间转换-动画

空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

l 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
l 空间转换也叫3D转换
l 属性：transform

l 语法
l transform: translate3d(x, y, z);
l transform: translateX(值);
l transform: translateY(值);
l transform: translateZ(值);
l 取值（正负均可）
l 像素单位数值
l 百分比

透视

目标：使用perspective属性实现透视效果（模拟眼睛的位置）

l 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
Ø 答：近大远小、近清楚远模糊
l 思考：默认情况下，为什么无法观察到Z轴位移效果？
Ø 答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

l 属性（添加给父级）
Ø perspective: 值;
Ø 取值：像素单位数值， 数值一般在800 – 1200。
l 作用
Ø 空间转换时，为元素添加近大远小、近实远虚的视觉效果

l 属性（添加给父级）
Ø perspective: 值;
Ø 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

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

l 语法
Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);

l 左手法则
Ø 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展
Ø rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
Ø x，y，z 取值为0-1之间的数字

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

l 思考：使用perspective透视属性能否呈现立体图形？
l 答：不能，perspective只增加近大远小、近实远虚的视觉效果。

立体呈现

l 实现方法
Ø 添加 transform-style: preserve-3d;
Ø 使子元素处于真正的3d空间

l 呈现立体图形步骤
1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）
l 注意
Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰

立体呈现步骤：

1.子绝父相做定位使盒子重叠在一起。

2.transform:translate X/YX/(值)，让两个盒子产生距离

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

动画

目标：使用animation添加动画效果

l 思考：过渡可以实现什么效果？
l 答：实现2个状态间的变化过程
l 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

l 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
l 构成动画的最小单元：帧或动画帧

实现步骤：
1. 定义动画

2. 使用动画

代码：两个状态转换时，使用

//将盒子从两百的宽动画到六百
.实现动画的类目{
width:200px;
....对应的样式；
animation：动画的名称 动画要的时长；
}

@keyframes 动画的名称{
       from{
    width：200px；
       要改变的样式，宽，高之类
           }
      to{
    width:600px;
       要改变成什么样子
        }
}

需要多个状态使用：

//定义动画，从200px变成500px*300px，再从500px*300px变换为800px*500px
.box {
            width: 200px;
            height: 100px;
            background-color: pink;
            animation: change 5s;
        }
 @keyframes change{
            0%{
                width: 200px;
            }
            50%{
                width: 500px;
                height: 300px;
            }
            100%{
                width: 800px;
                height: 500px;
            }
        }

动画的复合属性

animation：动画名称(必写) 动画时长(必写)  速度曲线(取整数1.2.3....,step(取整数) 为逐帧动画)  延迟时间(秒)  重复次数(取整数， infinite为无限循环)  动画方向(alternate为反方向 )  执行完毕(backwards为默认值，forwards暂停状态) 

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

1. infinate 无限循环动画（重复次数）

2. alternate 为反向 就是左右来回执行动画（跑马灯）

3. forwards 动画结束停留在最后一帧状态， 不循环状态使用

4. linear 让动画匀速执行

鼠标悬停动画暂停：

 .box:hover {
           animation-play-state: paused;
        }

动画的开始状态和盒子的默认状态相同，可以省略开始状态的from属性