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

从一次 iPhone 14Pro “灵动岛” 动画实践出发，梳理 Web 动画实用知识

摘要

首先，苹果的“灵动岛”设计确实巧妙。作为曾经的一位数码爱好者，最近几年确实很少在UI交互上看到这样令人眼前一亮的创新。那一块挤满元器件的“感叹号”区域，虽然无法正常显示内容，但它完全能够做到可触控（屏幕的触控层与显示层是分离的），影响显示并不等于影响交互。这也体现了苹果设计师一贯的独立思考能力。这让笔者回忆起大学时期酷爱的那部魅族mx2，当年的“小圆圈”设计也很精巧。只不过，苹果这次的设计更加大胆，动画也更加夸张，也更会包装起名字... 毕业之后，从事了前端工作，恰逢中秋佳节，北漂在外，闲来无事，尝试运用CSS3-animation + JS实现一个简易版本的“灵动岛”连播动画。