移动WEB学习 - 空间转换、动画

一、空间转换

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

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

1、空间位移

• 语法：
  • transform:translate3d(x,y,z);
  • transform:translateX(值);
  • transform:translateY(值);
  • transform:translateZ(值);
• 取值（正负均可）
  • 像素单位数值
  • 百分比
• 透视
  • 属性（添加给父级）
    • perspective：值
    • 取值像素单位数值，数值一般在800-1200
    • 透视距离也成为视距，所谓视距就是人的眼睛到屏幕的距离

2、空间旋转

• 语法
  • transform:rotateZ(值);
  • transform:rotateX(值);
  • transform:rotateY(值);
• 拓展（了解）
  • rotate3d(x,y,z,角度度数); 用来设置自定义旋转轴的位置及旋转角度
  • x,y,z 取值为0-1之间的数字

3、立体呈现（不常用）

• 实现方法
  • 添加transform-style:perserve-3d;
  • 使子元素处于真正的3d空间
  • 默认值flat，表示子元素处于2D平面内呈现

4、空间缩放

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

二、动画 

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

• 动画的本质使快速切换大量图片在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或动画帧
• 实现步骤：
  • 定义动画

    /* 两个状态之间的变化 */
    @keyframes 动画名称 {
        from {}
        to {}
    }
    
    /* 多个状态之间的变化 */
    @keyframes 动画名称 {
        0% {}
        10% {}
        15% {}
        100% {}
    }

  • 使用动画

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

•  属性：

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

  • 注意：

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

    • 取值不分先后顺序

    • 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性（了解）	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards:最后一帧状态 backwards:默认，第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite：无限循环
animation-direction	动画执行方向	alternate:反向动画
animation-play-state	暂停动画	paused：暂停，通常配合 :hover使用

• 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
  • animation-timing-function:steps(N);
    • 将动画过程等分成N份
  • 精灵动画制作步骤
    • 准备显示区域
      • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
    • 定义动画
      • 改变背景图的位置（移动距离就是精灵图的宽度）
    • 使用动画
      • 添加速度曲线steps(N)，N与精灵图上小图个数相同
      • 添加无限重复效果
• 多组动画
  • animation:动画1,动画2,动画N;