从一次iphone14Pro“灵动岛”动画实践出发，梳理web动画实用知识

见贤思齐

前言首先，苹果的“灵动岛”设计确实巧妙。作为曾经的一位数码爱好者，最近几年确实很少在UI交互上看到这样令人眼前一亮的创新。那一块挤满元器件的“感叹号”区域，虽然无法正常显示内容，但它完全能够做到可触控（屏幕的触控层与显示层是分离的），影响显示并不等于影响交互。这也体现了苹果设计师一贯的独立思考能力。这让笔者回忆起大学时期酷爱的那部魅族mx2，当年的“小圆圈”设计也很精巧。只不过，苹果这次的设计更加大胆，动画也更加夸张，也更会包装起名字...毕业之后，从事了前端工作，恰逢中秋佳节，北漂在外，闲来无事，尝试运用CSS3-animation+JS实现一个简易版本的“灵动岛”连播动画。实现的最终效果如下，虽不及苹果官网的酷炫。但勉强也算以小见大、见微知著吧！在文章结尾，笔者会贴出完整的代码实现。但本文并不会以介绍具体实现为主，而是通过一些实现过程中的重点，梳理一些web动画方面的基础知识。毕竟中后台做久了，难免会忘记一些更偏C端的样式及动画知识，所以对自己而言也是一次难得的“温故而知新”的机会。web动画基础1.CSS与JS在动画实现上的边界随着设备对css3的支持度越来越高，在大部分场景上完全能取代js来实现复杂且精美的动画效果。但同时也导致一些人在选择上的困惑:同样的一个动画场景是使用css3还是js来实现呢？答案是：相互协同，取长补短。由于js单线程的特性，天生不适合做大量的密集运算，所以用作动画过程的渲染时，常常会出现不流畅的效果。而这恰恰是css3的强项，尤其在给元素添加translateZ(0)开启GPU硬件加速后，在动画的绘制性能方面是明显强于JS的。JS作为一门图灵完备的编程语言，它的强项在于对动画流程的控制。比如在实现“灵动岛”动画的连续播放时，纯css3的解决方案是：.dynamic-island{...animation:动画1,动画2,动画3;...}但这种仅仅能实现最简单的自动连续播放需求，但是想实现诸如：(1)通过一个点击事件触发播放;(2)整个动画组合循环轮播等等这些稍微复杂点的需求，纯CSS的方案就有局限了。那么这时就必须使用擅长逻辑控制的js，配合丰富的动画事件来实现：//灵动岛对应domconstbox=document.querySelector(".dynamic-island");//以类名定义所有动画类型，以类名切换，实现动画切换constanimationList=["longer","divide","fusion","bigger"];box.addEventListener("click",()=>{box.classList.add(animationList[index]);});letindex=0;//每一个动画结束都会触发此事件（包括子元素及不同属性动画结束时）box.addEventListener("animationend",(e)=>{if(e.animationName==="divide-right"||e.animationName==="fusion-right"){return;}index++;setTimeout(()=>{if(index