专注呼吸 - 一个 CSS 动画，帮助冥想和专注呼吸练习

2025-06-10

专注呼吸 - 一个 CSS 动画，帮助冥想和专注呼吸练习

我建造了什么

我的 Digital Ocean / DEV 黑客马拉松提交内容是专注于呼吸的CSS 动画，以帮助冥想和专注呼吸练习。

类别提交

人民计划

应用链接

focused-breathing-ogh7t.ondigitalocean.app/或shannoncrabill.com/focused-breathing重定向到托管在 Digital Ocean 上的应用程序。

截图

默认状态下专注呼吸的屏幕截图。

https://dev-to-uploads.s3.amazonaws.com/i/58lh7qq52nv5258y9st2.png

动画（展开、保持、收缩）的时长默认为 8 秒。您可以使用输入框更改时长。

这是应用程序运行的 gif。

https://dev-to-uploads.s3.amazonaws.com/i/3qy903gwz9cfkz9siett.gif

描述

专注呼吸包括一个圆圈，圆圈扩张2秒，保持2秒，然后收缩至原始大小4秒。呼吸练习包括在圆圈扩张时用鼻子吸气，屏住呼吸，然后在圆圈收缩时用嘴呼气。

源代码链接

GitHub 徽标 scrabill /专注呼吸

帮助进行集中呼吸练习的 CSS 动画

许可证

麻省理工学院

背景

我最近学习了专注呼吸练习，作为冥想或平静日常的一部分。我总是忘记吸气的时间、屏住呼吸的时间等等。所以，我决定做一个小应用来帮助我调整呼吸节奏。

我一直很享受尝试 CSS 动画，并认为这是一个了解animation属性、过渡和的绝佳机会@keyframes。

我是如何建造它的

我把代码分成*focused breathing*两部分。第一个版本是尝试使用 CSS 动画和@keyframes。我想看看能否仅使用 HTML 和 CSS 实现我想要的过渡和节奏。结果确实如此！原始版本不需要 JavaScript，可以在 CodePen 上找到。

第二部分，我想看看能否根据用户的输入更改动画的时长（在 CSS 文件中）。我知道可以用 JavaScript 从 HTML 文件中获取输入值，但我能否将这些更新后的变量传递回 CSS 并渲染到页面上？事实证明，这也是可行的！

以下是我构建第一部分和第二部分的方法以及在此过程中学到的东西。

第一部分 - HTML 和 CSS

在我开始编码之前，将我所学的专注呼吸技术的高级步骤写下来对我很有帮助。

事情是这样的。

  • 用鼻子吸气
  • 屏住呼吸
  • 用嘴呼气4秒

吸气和屏住呼吸的时间长短可能并不重要，但从编码的角度来看，吸气 2 秒、屏住呼吸 2 秒似乎是合理的。

从视觉上看，会有一个小到中等大小的圆圈，它会扩大，提示你吸气，呼气时它会收缩。

动画可视化

用 来@keyframes处理圆圈的膨胀和收缩是最好的选择，这样我就能控制每一步的时间和节奏。@keyframes停止或偏移量的范围在 0% 到 100% 之间。动画的开始或起始位置将是 0% 停止位置，结束位置将是 100%。或者，可以是介于两者之间的任何数字。

我曾参与过@keyframes其他项目，但很难想象需要编写什么代码才能实现我脑海中所想象的目标。

把我想要发生的事情像时间线一样描绘出来很有意义。一条有两个端点的线段可以表示动画的时间线。左端点代表动画周期的开始，右端点代表结束。

一些快速标签、注释和视觉效果，我有一个看起来像这样的时间线。

https://i1.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/12/step3.png?resize=640%2C86&ssl=1

将时间线翻译为@keyframes

从上面的时间轴来看，动画似乎需要 8 个或 4 个步骤，但事实并非如此。动画中的每个偏移点 都是属性可以从其原始值@keyframe 更改的点 。

圆圈一开始很小， 然后 变大， 然后 保持原大小， 最后 缩小到原来的大小，动画重新开始。 @keyframe 只需要两个偏移点（在 25% 和 50% 标记处），圆圈的原始样式会处理起始（和结束）的视觉效果。

与分组其他 CSS 属性类似，可以在声明中一次设置多个属性和偏移量@keyframe。



@keyframes breath {
 25%, 50% {
    background-color: lightpink;
    width: 200px;
    height: 200px;
    border-radius: 100px;
 }   
}
Enter fullscreen mode Exit fullscreen mode

并且，为了让我们更容易一些，我们将线分成 8 个均匀的部分（动画每秒 1 个部分）。

变化的时间以及圆圈的宽度和高度意味着我无法

圆的膨胀和收缩可以用 来处理@keyframes。

第 2 部分 - Javascript

对于这个项目的第二部分，我想添加一些自定义功能。首先，我想看看能否将动画的持续时间（初始值为 8 秒）更改为其他值。创建一个输入字段很简单，但如何在属性中更新该值呢animation？

在谷歌搜索时，我想起可以使用和使用 Javascript访问和更新 CSS 变量。我已经在使用 CSS 变量来表示颜色和大小，因此为 新建了一个。getComputedStylegetPropertyValuetiming



:root {
    --timing: 8s;
}
Enter fullscreen mode Exit fullscreen mode

并更新我的animation属性以包含该变量（var(--timing)）而不是硬编码值（8s）



div {
   animation: breath var(--timing) ease infinite none running
}
Enter fullscreen mode Exit fullscreen mode

--timing看起来没有任何变化，这意味着它成功了！我可以在控制台中运行以下命令来再次检查 的值。



getComputedStyle(document.documentElement).getPropertyValue('--timing') // 8s
Enter fullscreen mode Exit fullscreen mode

我可以按照以下方式进行更改，并看到动画速度显著加快。



document.documentElement.style.setProperty('--timing', '1s');
Enter fullscreen mode Exit fullscreen mode

然后，通过在页面上添加输入字段，我可以获取该输入的值，将其传递.setProperty并更新 CSS。

包起来

总的来说，我从这个项目中学到了很多！@keyframes把脑子里的想法画出来，让编程过程更顺畅，也减少了反复尝试和犯错。

回顾这个项目，我第一次尝试，或者说变得更加适应的是：

  • CSS 网格（居中，对吧？）
  • CSS 动画（animation和@keyframes属性）
  • 使用 Javascript 操作 CSS 变量（getComputedStyle和getPropertyValue）
  • 持续部署（像我平常一样手动复制和粘贴文件）

对于未来的增强，一些想法是：

  • 改变其他变量的能力（保持时间更长、更短等）
  • 开始和停止的能力（或者，加入一个计时器，用于 5 分钟的集中呼吸等）
  • 伴随声音或音乐来指示您何时吸气、呼气等。
  • 关于如何从头开始构建自己的专注呼吸动画/应用程序的详细教程

其他资源/信息

链接：https://dev.to/scrabill/focused-breathing-a-css-animation-to-help-with-meditation-and-focused-breathing-exercises-dob
Devto 翻译
PREV
如何在 10 分钟内构建一个 React.js 聊天应用程序
NEXT
我从作家那里学到的五个编程技巧