一、CSS动画
1、元素2D变换transform
1.平移
- transform变换，用于描述物体的位置旋转缩放
- transform:translate(x,y)平移，第一个参数：水平平移量(x轴),右为正方向；第二个参数：竖直平移量(y轴)，下为正方向。
- transform:translateX() 水平方向的平移
- transform:translateY() 竖直方向的平移
2.旋转
- transform:rotate()
- 单位：deg角度，rad弧度
- 转换：弧度制的PI=180°
- ?沿轴进行顺时针旋转为正方向，0°代表竖直向上 ；
- 负数的含义就是360度-对应的度数，如(-30deg)=(360-30deg)=(30deg)；
- 默认旋转函数rotate是沿着z轴（即垂直屏幕的线）进行旋转的。
- rotateX()沿着水平轴进行旋转，
- rotateY()与X轴相反
3.缩放
- scale(水平方向，竖直方向)缩放，可以单参数也可以双参数
- transform:scale(1) ，1倍大小（即原来的大小）
- transform:scale(-1) ，反向
- 参数：比率；1为原本大小
- 写负数代表反向
- scaleX()水平方向的缩放（变瘦）
- scaleY()竖直方向的缩放（变高变大）
4.倾斜
- transform:skew()，倾斜，参数为角度值；
- skew(水平方向，竖直方向)缩放，可以单参数，也可以双参数
5.原点
- transform-origin: center;
- 原点的位置会影响旋转的圆心，缩放的位置
- 待选值: top， bottom ，left， right ，center， 还可以填入像素值
- 第一个参数代表水平偏移量 ，第二个参数代表竖直偏移量，当值为像素值的时候，像素值的参考位置是元素的左上角。
2、过度动画
- 动画原理：连续的播放多张图片，形成一个连贯的动画；
- css代码中如何理解动画：一个元素存在多个css状态，连续的播放改元素的这些css状态，将形成一组动画，这就是css动画；
- 帧率：描述动画在1s钟之内播放多少个状态；
- transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态。
定义初始状态
transition:translateX(0px)
注意：播放过度动画至少包含 transition-property ，transition-duration
指定css属性能够产生过渡动画
transition-property：left,transform;
transition-property 还有两个待选项
- - none：无
- - all：所有属性都能播放过渡动画
动画播放时常
transition-duration: 2s;
动画播放的速度曲线
待选项
- linear：匀速直线运动
- ease-in：慢进
- ease-out：慢出
- ease-in-out：慢进慢出
- cubic-bezier：曲线函数
- ?transition-timing-function：linear；
动画播放延迟
?transition-delay:3s；
合成属性
- transition: property duration timing-function delay;
- 过渡：产生过渡动画的属性，持续时间，速度，延迟时间
通过class来控制过渡动画
通常来说使用 active 类名来代表播放动画的状态,在点击某个按钮或者元素时，通过改变它的class来实现不同的效果。
改变类名的两种方式：
className
- 某某元素.className= ‘类名’
- classList.add(‘新添加的类名’)
- 某某元素.classList.add(‘新添加的类名’)
- 两者的区别在于，className每次改类名都是完整的修改，classList是添加新的一个类名，原来如果有类名那么也还在那里。
classList的其他方法：
- classList.remove() 移除某个类
- classList.contains() 判断是否包含某个类名 返回一个 bool 值； true 为包含
- transition 动画事件
- 场景: 假设有一个按钮控制动画的来回播放，当点击按钮播放动画的过程中需要禁用按钮，只有动画播放完了才能解除按钮的禁用，此时可以捕获事件来完成需求
禁用按钮 btn.disabled = true
true为禁用，false为不禁用
- transitionend过渡完成，transitionrun过渡运行中，transitionstart过渡开始；
- 如果在这个事件中，设置了后台的打印，发现打印多条测试语句，是因为有多少个过渡属性就会打印多少次测试语句；
- transitionrun在创建过渡时触发（即在任何延迟开始时；
- transitionstart当实际动画开始时触发（即在任何延迟结束时）。
3、3d变换和animation动画
animation动画
- 动画名称 animation-name:move;
- 动画播放时长 animation-duration：3s;
- 动画播放的速度曲线 animation-timing-function:linear;
- 动画延迟 animation-delay:3s;
- 动画播放状态 animation-play-state:paused（暂停）、running（播放）
animation独有的属性
动画的迭代次数（动画的播放次数） infinite 无限次
动画播放方向
待选项：
- normal（顺向播放）
- reverse（反向播放）
- alternate（来回播放）
- alternate-reverse（反向来回播放）
动画填充模式
（动画播放结束后所保留的状态）
- forwards:保留结束帧的状态
- backwards:保留起始帧的状态
- both：即保留初始状态，又保留结束状态（保留初始和结束时的状态）
- animation-fill-mode:forwards;
复合属性，取代上面的所有属性，赋值顺序，可以参考如下顺序
duration | timing-function | delay | iteration-count | direction | fill-mode
| play-state | name
duration | timing-function | delay | name
duration | name
动画帧序列
? ? @keyframes move {
? ? ? ? /* 起始帧 */
? ? ? ? from {
? ? ? ? ? ? /* 每一帧中描述该元素的状态 */
? ? ? ? ? ? transform: translateX(0px);
? ? ? ? ? ? opacity: 0;
? ? ? ? }
? ? ? ? /* 可以用百分比来代表动画的中间状态 */
? ? ? ? 50% {
? ? ? ? ? ? transform: translateX(600px);
? ? ? ? ? ? opacity: 1;
? ? ? ? }
? ? ? ? /* 结束帧 */
? ? ? ? to {
? ? ? ? ? ? transform: translateX(300px);
? ? ? ? }
? ? }
动画的播放和暂停
- animationPlayState 动画播放状态
- ?paused 暂停
- ??running 播放
3D变换
- ?perserve-3d 代表将元素变成一个3D空间
- ?灭点到屏幕的距离?
- ?若三维场景中不添加 perspective 则三维场景是一个正交视图?
- ?透视原点（灭点所在的坐标）
- ?原点为 0 值时，所在位置是scene的左上角
- 3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）
透视的特点：
- 存在地平线
- 存在灭点
- 近大远小
- 灭点离物体越近，透视产生的形变越明显
- 和透视相对应的就是正交，正交视角没有透视的远近感，相反是种平面的感觉
要使用3d变换需要依序执行以下步骤：
- 搭建3d场景，在父元素上设置：transform-style: preserve-3d;
- 在父元素上设置透视距离：perspective: 100px;
- 给场景添加演员，给场景元素添加子元素
- 在子元素上使用3d变换
|