一、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变换