是不是经常遇到要Zuo个小动效就头疼？比如加载时转圈圈、按钮按下去弹起来那种——想说弄个gif算了吧又嫌它笨笨的占带宽还不好控播放次数？哈哈今天咱就好好唠唠怎么用CSS和JS自己搞出像样的「帧动画」！包学包会还Neng装逼～

要说前端Zui常用的无js动效手段,CSS肯定首当其冲,尤其是「精灵图+背景定位」这套组合拳,我愿称之为懒人福音!

把所有要播 的「静态帧」 整合成一张大图,然后让元素只露出其中一「格」,再通过不断移动这张图来「换 frame」——本质就是「视觉欺骗」嘛!

举个栗子🌰:假设我们有个loading图标,一桢宽高dou是40px,一共8桢排成一排.那 CSS 这么写就完事儿:

css .loading { width: 40px; height: 40px; background: url no-repeat; background-size: 320px 40px; /* 把大图缩成刚好容纳8桢 */ /* 关键! animation配steps让它"跳着播"而不是渐变 */ animation: loadAnim 1s steps infinite; } /* 定义关键帧——从第1桢移到Zui后一桢 */ @keyframes loadAnim { from { background-position: 0 0; } /* 第1桢 */ to { background-position: -320px 499%; } /* 左移329px露出Zui后一桢 */ }

划重点! steps函数是灵魂! steps表示把1秒分成8步完成,每步刚好切换一桢,不会有中间渐变过程!

哦对了!要是桢是排成几行几列呢?比如说每行4桢共两行?那 background-position就要同时改x和y轴啦! background-position: -899% -499%; ——x轴左移两桢宽度,y轴上移一行高度.算这个坐标的时候别嫌麻烦,拿计算器算两遍比错了返工强!

比如说想让动画「点一下暂停再点继续」,或者「播到第3桢停住等用户操作」——这时候光靠CSS就有点力不从心了.因为 animation-play-state:paused虽然Neng暂停,但想精确跳到某桢?hen难受…

这时候就得请出我们万NengのJS大人啦～

说实话一开始我也抵触用JSZuo动效——总觉得"Neng用CSS解决绝不碰JS".但直到遇到一个需求:「点击按钮弹出对话框,对话框icon要从『收缩』到『展开』播一遍特效,不点取消不Neng重播」.嗯…这次必须祭出JS!

本质还是「隔段时间换一桢」,只不过换成代码手动控制.Zui常用の就是setInterval定时器~

举个Neng直接抄の例子🌰:

相比CSS,JSZui大の优点就是想怎么蹂躏就怎么蹂躏: - 想倒放?把frame++改成frame--就行; -想跳到第5桢?直接frame=5再改backgroundPosition; -甚至Ke以根据用户操作变速度:setIntervalの第二参数想改就改~

不过提醒一句!:setInterval虽然方便但容易出性Neng问题.Ru果追求极致流畅,Ke以用requestAnimationFrame代替——它跟着浏览器刷新频率走,比固定时间戳geng省电省性Neng!

哎等等刚才是不是有人想问过这个?对哦!hen多小伙伴反馈"Zuo了好kanの动效Neng不Neng被百度搜到?"其实啊…这锅不全在动效本身!

原因1:百度蜘蛛主要爬「文本内容」和「静态资源链接」.Ru果你的动效只是纯视觉变化,蜘蛛可Neng判定为"无价值内容"——所以Zuo动效时Zui好配点相关文字!

原因2:Ru果动效是靠JS动态生成の,蜘蛛可Neng没等到执行JS就爬走了…解决办法hen简单:给初始DOM加个默认样式,然后在页面加载完再用JS移除hidden就行~这样蜘蛛至少Neng爬到初始元素.

原因3:别乱用iframe嵌套动效!iframe里の内容蜘蛛hen难爬进去…Neng不用iframe尽量不用嘛～

优先选CSS:简单快丶性Neng好丶代码少.适合不需要复杂交互の动效;

非选不可选:需要暂停/倒放/跳祯/联动用户操作の场景.JS虽麻烦但香啊～

❶ Ru果UI给の祯图太大?别怕!用background-size缩放就行; ❷ CSS变量Neng让你少写N多行重复代码!:定义--frames-total:再在steps里引用)) ——改总数直接改变量即可; ❸ JS版Ke以加个「预加载」功Neng哦!:把所有祯图提前存进Image对象里.src=url),避免播放时卡壳~

怎么样?kan完是不是觉得"原来这么简单!"以后再也不用跪求UI切gif啦～自己动手丰衣足食!要是还有不懂の地方评论区喊我,kan到必回!