英文单词切换。效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/byabeG互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cevPbkfB（由于scrimba不支持web动画api，所以视频播放时看不到动画效果，但可以随时暂停视频，手动刷新预览窗口查看动画效果）源码下载前端日常实战系列的所有源码请从github下载：https://github.com/comehop??e/front-end-daily-challenges同一时间。整个开发过程分为4个步骤。第一步是用CSS实现页面的静态布局，后面3步是用JS实现动画和业务逻辑。第二步实现单词中间字母OO的闪烁效果，第三步实现随机取词逻辑，第四步实现字符切换动画。眨眼动画和角色切换动画都是用WebAnimationAPI实现的。虽然用JS写动画比用CSS麻烦，但是API提供了一些事件处理函数。在角色切换动画中，利用事件机制对动画进行精确控制，并在动画过程中加入业务逻辑。让我们开始编码吧。1、静态布局：dom、cssdom结构很简单，一个名为.word的
元素包含4个子元素，每个子元素持有一个字符：book
将页面中的元素居中，设置页面背景色为青色：body{保证金：0；高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:steelblue;}设置word的样式，亚麻色，大字体，大写：.word{font-size:100px;颜色：亚麻；字体系列：等宽；字体粗细：粗体；显示：弹性；文本转换：大写；游标：指针；对于粉红色：.wordspan:first-child,.wordspan:last-child{color:pink;}使用径向渐变为单词中间的OO添加眼球：.wordspan:not(:first-child):not(:last-child){background-image:radial-gradient(circleatcenter,linen0.05em,transparent0.05em);}至此静态布局完成。2.闪烁动画为.word元素创建一个点击事件函数。每当点击发生时，先让中间的OO闪烁，然后获取下一个要显示的词，再用新词替换当前词：document.querySelector('.word').onclick=function(){//Step1:Blink动画//Step2:获取下一个单词//Step3:角色切换动画}让我们来实现Step1-Blink动画。在此之前，让我们了解一下WebAnimationAPI的语法，这里有一个简单的例子：letkeyframes=[{transform:'scaleY(1)'},{transform:'scaleY(0.1)'},]letoptions={duration:200,iterations:2,}element.animate(keyframes,options)animate()方法接收2个参数，第一个参数是定义关键帧的数组；第二个参数是定义Animation属性的对象，分别对应CSS中的@keyframes语句和animation属性。上面的JS代码相当于下面的CSS代码：@keyframesanim{from{transform:scaleY(1);}到{转换：scaleY(0);}}.element{动画名称：动画；动画持续时间：200毫秒；animation-iteration-count:2;}好了，让我们正式写眨眼动画：')letkeyframes=[{transform:'scaleY(1)',offset:0},{transform:'scaleY(0.1)',offset:0.25},{transform:'scaleY(1)',offset:0.5},{transform:'scaleY(1)',offset:1},]letoptions={duration:200,iterations:2,}eyes.forEach(eye=>eye.animate(keyframes,options))}上面的offset在代码中是在@keyframes中为每一帧指定的百分比值。这个动画的意思是每个动画闪烁2次，每次闪烁耗时200ms。200ms的前50%（即前100ms）闪烁，后50%等待。这个设计的目的是在两次闪烁之间插入一个100ms的间隔。然后，在点击事件中调用上面的方法：document.querySelector('.word').onclick=function(){//Step1:BlinkanimationblinkEyes()//Step2:Getthenextword//Step3:字符切换动画}至此，鼠标点击文字时，OO会闪烁。3.获取下一个词接下来，编写一点随机选取一个词的业务逻辑。引入lodash库：定义一个名为Word:function的类Word(){constWORDS=['book','boot','cook','cool','door','food','fool','foot','good','look','loop','moon','noon','pool','poor','room','roof','root','soon','tool','wood','zoom',]letcurrent='book'this.getNext=()=>{returncurrent=_(WORDS).without(current).sample()}}Word类有一个方法叫getNext()，用来从预设数组中随机选取outawordfrom，可以用下面的代码来测试效果，会输出一个像food这样的词：letword=newWord()console.log(word.getNext())因为下一个动画只涉及左边而word右侧的字母，所以在getNext()方法中，将两端的字符分开，返回一个对象：functionWord(){constWORDS=['book','boot','cook','酷','门','食物','傻瓜','脚','好','看','循环','月亮','中午','池','差','room','roof','root','soon','tool','wood','zoom',]letcurrent='book'this.getNext=()=>{current=_(WORDS).without(current).sample()返回{first:current.slice(0,1),last:current.slice(-1)}}}再次测试效果，输出会变成类似{first:"f",last:"d"}的对象在点击事件中调用上面的函数并将结果存储在一个名为chars的变量中：()//Step2:Getthenextwordletchars=word.getNext()//Step3:Characterswitchinganimation}4.Characterswitchinganimation是时候创建一个字符切换动画了。函数的声明如下，函数名switchChar，接收2个参数，第一个参数表示对哪个角色进行动画，取值为first或last，第二个参数为要替换的新角色：functionswitchChar(which,char){}这样调用：switchChar('first','f')先实现替换逻辑，不包含动画效果：functionswitchChar(which,char){letletter={first:{dom:document.querySelector('.wordspan:first-child'),},last:{dom:document.querySelector('.wordspan:last-child'),}}[哪个]letter.dom.textContent=char}在点击事件中调用switchChar函数：document.querySelector('.word').onclick=function(){//step1:eyesblinkanimationblinkEyes()//Step2:获取下一个单词letchars=word.getNext()//第三步：字符切换动画Object.keys(chars).forEach(key=>switchChar(key,chars[key]))}如果现在运行程序，每次点击后，两边的字符该词将被更新。接下来写动画效果，方法和写blink动画差不多。这里有两点需要说明。一个是first和last有2个角色，进出2个动画，所以其实一共实现了4个动画效果；二是动画过程是让老角色先出场，然后让新角色进入场内，改变角色的操作放在两个动画之间，通过动画API的onfinish事件实现：functionswitchChar(which,char){letletter={first:{dom:document.querySelector('.wordspan:first-child'),to:'-0.5em',from:'0.8em',},last:{dom:document.querySelector('.wordspan:last-child'),to:'0.5em',from:'-0.8em',}}[which]让关键帧={out:[{transform:`translateX(0)`,filter:'opacity(1)'},{transform:`translateX(${letter.to})`,filter:'opacity(0)'},],in:[{transform:`translateX(${letter.from})`,filter:'opacity(0)'},{transform:`translateX(0)`,filter:'opacity(1)'},]}letoptions={duration:500,fill:'forwards',easing:'cubic-bezier(0.5,1.5,0.5,1.5)'}让ter.dom.animate(keyframes.out,options).onfinish=function(){letter.dom.animate(keyframes.in,options)letter.dom.textContent=char}}至此，所有编码解释完毕JS代码和解释CSS代码是不同的，因为不是每一行代码都有视觉效果，很难用文字描述。如果有什么不明白的地方，一定是我没有解释清楚，所以请多看几遍视频，认真理解。WebAnimationAPI在前端日常实践的第162号作品中也用到了，但是那部作品的业务逻辑比这复杂。了解本作后若想再次挑战，可再次参考。你完成了！
