02-移动web第02天--空间转换、动画

326 阅读4分钟

02-移动web第二天

空间转换、动画

一、空间转换/3d转换

3维坐标系【模拟、裸眼3d】 属性:transform

对浏览器、兼容性要求高

目标

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

1、 空间位移

  • transform: translate(100px) 与 transform: translateX(100px) 效果一样,默认向x轴正方向移走100px

  • transform: translateY(100px) 向Y轴正方向移走100px

  • transform: translate(100px,100px) 向交点方向移走100px

    • 平面上的位移,无需借助第3只眼睛 perspective
  • transform: translateZ(100px) 向z轴正方向移走100px

    • 空间上的位移,需要借助第3只眼睛 perspective:值 【数值一般在400 – 1200】 只能达到近大远小、近实远虚的视觉效果

如果没有第3只眼睛,我们肉眼看不到变化

    - 第3只眼睛【透视、视距、景深】是给需要空间位移的元素的父级元素添加,一般是给body添加
​
        - 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
​
    - perspective: 600px;  眼睛距离屏幕600px,

transform: translateZ(100px) 元素向眼睛向前走100px

  • 当perspective: 600px; 眼睛距离屏幕600px情况下的几种情况: ①盒子translateZ(100px) 有变大高效果 ②盒子translateZ(600px) 铺满整个屏幕【盒子走到眼睛前】 盒子translateZ(800px) 盒子走到后面了,变大后不见

  • transform: translate3d(300px, 300px, 300px);方向为矢量 类似于坐标轴交点方向 与 transform: translateX(300px) translateY(300px) translateZ(300px); 效果一样

2、空间旋转

  • transform: rotate(360deg); 【平面】 与 transform: rotateZ(360deg); 呈现效果一样,按元素中心点旋转
  • transform: rotateX(360deg); 沿着元素的中心x轴旋转
  • transform: rotateY(360deg); 沿着元素的中心y轴旋转
  • 可以自定义轴方向旋转: rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度 【x,y,z 取值为0-1之间的数字】 矢量与原点连接的方向

多轴同时旋转:【一般情况下 只在 x轴和 y轴同时旋转 ---在立体效果时会经常用到,用来开启上帝视角,俯视,3d旋转,更直观观测空间移动,可以先写0deg,然后在页面中调】

  • transform: rotateX(-45deg) rotateY(50deg) rotateZ(50deg);
- 记得加上透视
- 当元素旋转了,所对应的坐标轴方向也会跟着旋转
  • 左手法则 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

因为perspective只能增加近大远小、近实远虚的视觉效果,无法呈现立体效果

  • 此时就需要 transform-style: preserve-3d 呈现立体图形【同时保留近大远小的效果】 简写 tfs

transform-style: flat 为默认值,平面效果

- 早年用于 立体轮播图
- 给想要3d效果的盒子【一般是z轴位移的元素】的父元素添加【让父元素创造3d环境】

二、动画

与过渡的区别:

①过渡需要【手动点击】才会运动,只能实现2个状态间的变化过程【1来1回】

动画:

①过程可控(重复播放、最终画面、是否暂停),无需手动点击 ②实现多个状态间的变化过程【可以无限次】

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

    • 步骤

      • 第①步:定义动画 @keyframes 动画名称

单独写在style里

        - 有两种方式
​
            - 只有两种状态:起始    终止

​
            - 多种状态【时间序列】  百分比*时间
             
​
    - 第②步:调用动画【写在运动的元素里】   
    animation :动画名称   动画花费时长  
    以上两个为必写属性

02.png

03.png

  - 连写方法:animation: 动画名称    动画执行时间    动画延迟   速度曲线(linear)    播放次数(无限次infinite) 反向播放(alternate)    停留结束位置(forwards)
​
1. 动画连写属性没有顺序限制
2.如果动画执行时间和延迟时间同时出现,写在前面的是执行时间,写在后面的是延迟时间
​
3. 需要记住的单词
  速度曲线中的匀速  linear
  播放次数中的 无限次播放   infinite
  反向播放动画   alternate
  动画停留在结束位置 forwards
 
            
                -
  • 分开写方法:
  • animation-delay 动画延迟 ,也常用于给动画添加律动
  • 速度曲线中的匀速 linear 中间状态的变化为补帧动画,浏览器渲染 04.png

走路,秒针,运动,一般配合精灵图实现动画效果 背景图片 背景图片的位置移动 background-position animation-timing-function steps(数字):逐帧动画

解题思路:

1、是否需要开启上帝视角 2、是否需要添加透视 3、是否需要创造3D环境 4、如何定位 5、摆放的布局