使用CSS3自制小程序圆形加载动画

在CSS3中绘制一个圆圆的loading转圈动画主要涉及到两个关键点：布局和动画。以下是对这个主题的详细解释： 1. **布局原理**： - 首先，你需要一个父容器来承载这些小圆圈。在这个例子中，父元素`<view class="q-loading-dot-warp">`被设置为`position: relative;`，这允许其子元素以它为参考进行绝对定位。 - 子元素（小圆圈）通过`position: absolute;`进行定位，并使用`left`, `top`, `right`, 和 `bottom`属性分配到特定的位置。为了均匀分布在圆周上，需要计算每个圆圈相对于父容器的精确位置。由于这里使用的是正方形布局，所以每个圆圈的位置可以通过计算正方形对角线上的坐标来确定。 2. **位置设置技巧**： - 通常，圆圈的分布可以基于一个正方形的对角线，因为在一个正方形中，圆的边界会沿着对角线。如果圆心位于正方形的中心，那么每个圆的边界将与正方形的四条边相切。对于8个小圆，可以将正方形的对角线分成8等份，每个圆位于这些等份线上。 - 使用百分比定位可以帮助简化计算。例如，对于水平或垂直方向，可以使用`50%`来居中。对于对角线上的圆，需要根据正方形的宽高和圆的半径来计算具体的偏移量。 3. **动画原理**： - 动画的实现是通过CSS3的`@keyframes`规则来创建。每个小圆圈将有自己的动画，改变其透明度（`opacity`）以模拟旋转的效果。通过调整动画的延迟时间，可以使得每个圆圈在不同时间开始动画，从而创造出连续转动的视觉效果。 - 可以使用`animation`属性来应用这个动画，包括`animation-name`（引用`@keyframes`中的动画名称）、`animation-duration`（动画持续时间）、`animation-delay`（动画开始前的延迟）以及`animation-iteration-count`（动画重复次数）等。 4. **CSS变量和函数**： - 使用CSS变量（`--variable`或`$variable`，取决于你使用的语法）可以方便地管理样式，比如在这里可以定义`$width`, `$height`, `$dotWidth`, `$dotHeight`, `$radius`, 和 `$offset`来控制加载图标的尺寸和圆圈的大小。 - 函数如`getLeft()`和`getTop()`用于计算每个圆圈的具体位置，这些函数可以根据输入参数返回对应的坐标值。 5. **实际应用**： - 在小程序中，这样的自定义加载动画可以避免引入大型组件库，节省资源。同时，通过CSS3的灵活性，可以方便地调整动画效果，比如改变圆圈的数量、大小、颜色、速度等，以适应不同的设计需求。 通过理解CSS3的布局和动画机制，我们可以创建出各种复杂的加载动画，而无需依赖额外的JavaScript库或插件。在实际开发中，这种技术不仅可以提升用户体验，还能优化性能，是前端开发者必备的技能之一。