动画处理
总原则:能用css3解决的动画,优先使用css3,因为他的性能体验最好,解决不了的再基于js实现,如果js也解决不了,很早之前是基于flash处理,现在直接换需求,不然就换个产品经理
Css3动画
有一个动画库:https://animate.style/
transform是变形属性,不是动画
-
transition 过渡动画
步骤:设置过渡效果,当改变元素样式的时候会按照过渡效果进行运动
特点:不关注运动的轨迹,
transition-property: all;
transition-duration: .3s;
transition-timing-function: linear;
transition-delay: 0s;
transition:[property] [duration] [timing-function] [delay];
JS中可以监听transition的过程,有ontransitionstart、ontransitionrun、ontransitionend事件,有几个属性更改就会触发几次
-
animation 帧动画
步骤:基于@keyframes设置运动的轨迹{0%[form]~100%[to]},最后基于animation按照指定的轨迹进行运动
animation-name: AAA;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-fill-mode: forwards/backwards/both;
animation-play-state: paused/running;
animation也有对应的可以监听的事件过程:onanimationstart、onanimationiteration、onanimationend,不一样的是一个animation只会触发一次事件,
动画方案选取的规则:
- 简单动画优先使用transition、复杂动画使用animation,但是运动轨迹或者样式是动态管理的,使用transition
定时器处理
定时器返回的值:数字,代表当天设置的定时器,是系统中的第几个定时器。
定时器有4个
-
setTimeout([callback],[interval])——到达时间后只执行一次,定时器就结束,后续不再触发执行,但并不代表定时器被清除
-
setInterval([callback],[interval])——轮询定时器,每隔一段时间就触发一次,直到手动清除定时器
- clearTimeout/clearInterval 清除定时器,传递一个数字,移除该编号的定时器,都可以移除两种定时器
- requestAnimationFrame 类似于setTimeout定时器,只不过不需要指定时间因子,他会自动按照电脑的刷新率时间进行处理——>等待每次屏幕刷新的时候,把指定的回调函数执行
requestAnimationFrame(()=>{})
获取元素的样式
- 元素.style.xxx 只能获取写在元素行内的样式(不常用,很好在行内上写样式)
- window.getComputedStyle(元素,伪类) 获取元素/伪元素
所有经过浏览器计算过的样式
——只要元素被浏览器渲染
了,那么其所有样式都是经过计算
的,即便不写样式,浏览器也会为元素设置默认样式
- …
设置元素样式的方法
- 元素.style.xxx =xx 把样式设置在行内上(优先级很高)
- 元素.className = ‘xxx’
元素.classList.add/remove(‘xxx’) 在样式表中先把样式写好,在js中基于操作样式类名,来管理样式 - 元素.style.cssText =
xxx:xxx;