开锁动画

今天折腾这个开锁动画，纯粹是因为刷短视频看到个特别丝滑的效果，手痒想自己试试看。

第一步：先琢磨原理

我盯着那个动画反复看了十几遍，发现就是个锁芯转动的过程。关键点在于锁舌收缩和锁体旋转的配合，还得带点弹性效果。先用纸笔画了个草图，把旋转轴心和运动轨迹标清楚。

动手写基础结构

打开编辑器先搭个div当锁身，里面塞两个span假装是锁舌和钥匙孔。用CSS把边框调成圆角矩形，加个深灰色背景。这时候看起来就是个丑丑的方块，完全没那味儿。

怎么让锁舌平滑缩回去？试了translateX和scale变换都不自然。想到用clip-path裁剪区域，配合overflow:hidden模拟锁舌移动。调了半个多小时角度才勉强能看。

最头疼的旋转动画

锁身旋转不能硬邦邦地转90度就完事。得先快后慢，还要回弹一下。贝塞尔曲线调了七八种都不满意，突然想到可以拆成两个关键帧：0-80%正常旋转，20%加个反向微调。

• 第一版：旋转像卡齿轮一样生硬
• 第二版：回弹幅度太大像抽搐
• 第三版：终于找到接近机械感的节奏

收尾的细节打磨

给锁舌加了个渐变阴影增强立体感，钥匙孔用径向渐变做出凹陷效果。补了个点击触发的事件，鼠标放上去指针变成钥匙形状。测试时候发现手机端触屏反馈不明显，又加了点震动效果。

现在回头看，最难的不是技术实现，而是对机械运动的理解。下次再做类似动画，得先找个真锁头拆开看看内部结构才行。