动画的原理
动画
定义:由许多静止的画面(帧),以一定的速度(如每秒30张)连续播放时,以肉眼因视觉残像产生错觉,而误以为是活动的画面
概念
帧:每个静止的画面都叫做帧
播放速度:每秒24帧(影视)或者25帧(动画)或者30帧(游戏)
案例:
简单动画
代码:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="demo"></div>
</body>
</html>
CSS
#demo{
width:100px;
height:100px;
border:1px solid red;
position:relative;
left:0;
}
JS
var n = 1
var id=setInterval ( ()=>{
if(n<=200){
n=n+1;
demo.style.left=n+'px'; *注意demo属性必须是ID名;要加 n+'px'
}
else{
clearInterval(id);
}
},1000/60)
拓展1:setInterval语法setInterval(函数,时间)
拓展2:()=>{} 相同含义 function(){}
拓展3:clearInterval(id)——清除计时器(需要配合id指定)
简单动画)
JS Binjs.jirengu.com
原理:
每过一段时间(通过setInterval计时器+if/else函数)
将Div移动一段距离,直到到达目标地点
注意⚠️:案例动画是用left制作的,但前端高手是不会用left制作动画的哦~
CSS 动画的两种做法
第一种:transition 过渡
第二种:animation 动画 (推荐)
transition(过渡)
- 作用
补充中间帧
- 语法
transition: 属性名 | 时长 | 过渡方式 | 延迟
注意⚠️:指定第一个数字默认指定为时长,第二个数字默认才是延迟时间
拓展:1s = 1000ms(毫秒)
transition: left 200ms linear
可以用逗号分隔两个不同属性
transition: left 200ms , top 400ms
可以用all代表所有的属性
transition:all 200ms
- 过渡方式
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
常用的有:
linear 线性
动画会以恒定的速度从初始状态过渡到结束状态
ease 缓动
动画开始时逐步加速,中间逐渐减慢,结束时逐步加速
ease-in-out
动画开始时缓慢,中间逐步加速,结束时逐渐减慢
- 延迟
延迟多久时间后执行动画
具体含义可以查看MDN文档
<timing-function>developer.mozilla.org
好啦,看完常态看变态(感觉哪里不对 ~)
不是所有属性都能进行Transition(过渡)
display:none ==> block 没法过渡
显示和消失是无法过渡的~
一般改成visibility:hidden ==> visibile (没有为什么,我也不知道)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="demo"></div>
<button id="but">消失</button>
</body>
</html>
————————————————————————————————————
*{
margin:0;padding:0;box-sizing:border-box;
}
#demo{
width:100px;
height:100px;
border:1px solid red;
visibility:visibile;
}
#demo.h{
visibility:hidden;
}
————————————————————————————————————
but.onclick=()=>{
demo.classList.add('h')
setTimeout(()=>{
demo.remove()
},1000)
}
代码链接: (visibility过渡)
JS Binjs.jirengu.com
display与visibility 区别JS Bindisplay与visibility 区别
- display:none(消失)
- visibility:hidden (隐藏)| visibility:visibile(显示)
display:block 和 visibility:visibile 都有让元素显示的意思,那么两者的区别在与:
display:none(消失)是在不再占用空间
visibility:hidden (隐藏)使元素在网页上隐藏,但仍占用空间
background背景颜色可以过渡吗?
opacity透明度可以过渡吗?
过渡必须要有起始
一般只有一次动画,或者两次
比如hover和非hover状态的过渡
animation 动画
用法
声明关键帧
添加动画
声明关键帧
- 语法
@keyframes 动画名{ }
- 标准写法
from/to
@keyframes 动画名 {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
百分数 推荐
@keyframes 动画名 {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
添加动画
语法
animation:动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 |
动画名 (animation-name)
指定执行某个动画
时长(animation-duration)
s 或者 ms
过渡方式(animation-timing-function)
与transition取值是一样的
延迟(animation-delay)
延迟多久时间后执行动画
次数(animation-iteration-count)
数字(3或者2.4)或者 infinite(无限循环)
方向(animation-direction)
- normal 默认正常
- reverse 相反方向
- alternate 默认正常方向循环(需要配合次数)
- alternate-reverse 默认相反方向循环(需要配合次数)
填充模式(animation-fill-mode)
- none 默认
- forwards 最后静止不动(保持最后一帧)
- backwards (需配合延迟属性)立即应用第一个关键帧的样式,延迟结束后,执行动画
- both (forwards+backwards相结合 需配合延迟属性)立即应用第一个关键帧的样式,延迟结束后,执行动画,动画结束后保持最后一帧
是否暂停(animation-play-state)
- running 恢复运行动画
- paused 暂停动画
使用以上两种方法制作动画
使用两次transform
.a===transform===>.b
配合setTimeout或者监听transitioned事件
.b===transform===>.c
代码链接: (元素移动)
JS Binjs.jirengu.com
使用animation
代码链接: (跳动的心)