最近刚跟 Framer 官方教程 学了 Linear 官网的流光动效。
趁热打铁，一起来复刻一下（需要具备 Framer 软件基础）。
可以先在 Figma 里设计完成界面，再通过 Figma to HTML with Framer（插件加链接） 插件导入到 Framer 里制作，使其成为真正可交互的网页，全程零代码。
界面制作很简单不多赘述，源文件和插件贴在文末，可以在 Framer 里打开跟我一起做：
第一步：紧贴截图右上角，新建一个宽 100px，高 1px 的矩形；布局选择 absolute （绝对定位）；填充色选择横向渐变，色值区间：#5E6AD2，0%～#6875E8，80%。
第二步：选中矩形，在右侧属性栏点击 effect（效果）；在弹出菜单里点选 loop（循环）；选择 delay（延迟） 3 秒，为每次的循环增加一个缓冲时间；scale（比例） 设为 1。
第三步：矩形需要向右水平移动，所以我们需要设置 offset （移动路径）的 X 轴坐标参数，可以边点击步进器向上箭头边进行预览，顺势给矩形敲定一个合理的退场位置。
第四步：更改矩形的 opacity（不透明度），好让它以淡出的形式退场。这里直接把 opacity 的参数改为 0 即可。
第五步：然后设置 transition（过渡动效），缓动选择 ease out（缓出），把动画播放时长改为 1.5s。
预览一下，动画每隔 3s 播放一次，播放一次耗时 1.5s。
第六步：因为我们需要做出流光沿截图外边缘滑动的效果，所以在截图的纵向上也需要添加一段渐变矩形。
可以直接复制横向矩形，再把宽高参数对调，然后因为是向下移动，所以要设置 offset （移动路径）的 Y 轴坐标参数。
因为要制造流动的感觉，所以两段渐变不能同步进行，所以把 Delay 的时间改小一些，比如改成 2。其他操作都一样，篇幅原因，这里就不重复了
然后点击右上角蓝色「Publish」按钮，更新一下，发布完成！
现在你已经做了一个真实的 Linear 风格的网页了，去浏览器里看一看效果吧。
操作十分简单，但效果却非常显著，小小流光动效大大提升了页面质感。
好啦，到这里，你已经会做 Linear 式设计了，那就愉快地应用到设计工作当中吧，相信一定会为你的作品锦上添花的。
另外，采用 Linear 设计风格的网站和应用其实都有一个专属的名称叫做：Linears。
下面就来看看都有哪些不错的 Linears 值得我们学习借鉴！
01. Raycast
首推 Raycast，一款我自己在用的 Mac 上的效率工具，类似 Mac 原生的 Spotlight，听名字都知道它也是 Linear 那挂的。Raycast 有强大的插件社区，目前产品也已接入 AI 功能，正在内测中。
Raycast 的设计也是自成一派，每打通一个应用就会为其重设计一款 Raycast 风格的应用图标（犹记得当年锤子手机也是这么干，时光啊！），包括当时给 Arc 设计的这个图标一放出来，也是立马就被刷屏了！
Raycast 的官网设计文件 可以在 Figma 里打开来看一下细节：
切换到轮廓模式，可以看到设计图是相当复杂的，层级很多。
02. Cron
Cron 是一款连续两年获得 Product Hunt 金猫奖的日历应用，号称是为专业人士和团队打造的下一代日历。也是我自己在用的产品，用户体验不错，网页端使用需要在官网申请候补。
这款应用目前已经被 Notion 收购了，跟 Arc 也是好基友（数数 Arc 到底有多少好基友），最近 Arc 浏览器的固定标签也支持了对 Cron 进行预览。
03. Linears.art
一个专门搜集 Linears 的网站，需要更多灵感可以去逛逛。
另外关于 Linear 设计风格，如果感兴趣可以看看这篇文章：什么是 Linear 设计风格？ - 少数派 (sspai.com)
感谢阅读，欢迎来一起探讨交流～
封面出自 Jurre Houtkamp
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。