CSS使用SVG实现动态分布的圆环发散路径动画_F11 - 专业站长和开发者的学习网站

分享到

CSS使用SVG实现动态分布的圆环发散路径动画

css 来源：互联网作者：佚名发布时间：2022-10-31 22:18:03 人浏览

摘要

这个需求也是最近的大屏项目里面需要用到的一个效果，大致需求是实现一个圆形范围内由一个不确定坐标的点向圆周进行曲线发散的效果，曲线圆弧向上并伴随路径动画。第一时间

这个需求也是最近的大屏项目里面需要用到的一个效果，大致需求是实现一个圆形范围内由一个不确定坐标的点向圆周进行曲线发散的效果，曲线圆弧向上并伴随路径动画。第一时间看到这个需求想到的就是 SVG 或者 Canvas。但是由于开发时可能还需要插入其他元素，所以这里还是希望通过纯 DOM + CSS 或者 SVG 的方式来实现。

当然这个中心点还是比较确定哈，因为最后的效果是希望左右对称的，所以中心肯定在 width / 2 的那条纵线上。

于是今天忙活了半天，总算是有了一个 SVG 实现的雏形。最终效果就和封面图一样，只是因为录制的问题动画显得有断层。

先设计

为了方便显示，整个 SVG 的默认视口大小设置为了 600 的一个正方形，并且内部固定有一个中心点和圆周，当然这个中心点目前还是固定的。

然后曲线就通过遍历数组来创建 SVG 路径，路径动画与每条曲线进行绑定，然后每条曲线的路径的话，就通过 Vue 计算属性返回一个闭包函数，通过元素下标来计算曲线的路径。

并且，为了方便后面判断曲线的左右分布，将圆心的坐标作为了 SVG 的坐标中心。

再实现

首先是模拟数据

这里是生成一个 10 ~ 20 之间的数组，再模拟处理每个点的坐标的。

export default {

name: "ArcAnimation",

data() {

return {

arr: [],

width: 600

};

created() {

this.updateArray(false);

methods: {

updateArray(timing) {

const length = Math.floor(Math.random() * 10 + 10);

// 这里是因为 svg 的中心点也在圆心，所以就是 0,0

const center = { x: 0, y: 0 };

this.arr = this.calcCircularLayout(length, center, 296);

timing && setTimeout(() => this.updateArray(true), 2000);

/**

* 计算N个点均匀排列成圆的各个点坐标

* @param nodeSize 参与排列成圆的元素个数

* @param center 圆的中心点坐标 {x:, y:}

* @param radius 圆的半径

* @return 各个元素的坐标：[{x:, y:}, {x:, y:}, ...]

calcCircularLayout(nodeSize, center, radius) {

let i;

let _i;

let _layouts = [];

for (i = _i = 0; _i < nodeSize; i = ++_i) {

let x = center.x + radius * Math.sin((2 * Math.PI * i) / nodeSize);

let y = center.y + radius * Math.cos((2 * Math.PI * i) / nodeSize);

_layouts.push({ x: x, y: y, k: i });

}

return _layouts;

}

};

这个圆周每个点的坐标是从网上找的，但是因为当时忘记留地址了。要是作者看见了可以联系我删除或者加上您的文章地址。

每个元素的 path 的计算放到了后面说明的。

然后是模板部分

因为最终代码在 calcCircularLayout 这里会计算好路径放到数组元素中，但是因为 path 路径计算在后面说嘛，所以这里大家就先当这个数组里面已经有 path 了。

<h1>ArcAnimation Page</h1>

<p>

<el-button @click="updateArray(false)">刷新数据</el-button>

<el-button @click="updateArray(true)">自动刷新</el-button>

</p>

</circle>

</g>

</svg>

</div>

</template>

这里只有一点：

在 for 循环中循环生成的是一个 g 分组标签，里面是一个 path 曲线元素和一个 circle 原点，并且这个原点添加了一个与曲线一致的路径动画。

最后是曲线路径计算

方法如下：

computedDotPath({ x, y }) {

const centerX = 0;

const centerY = -60;

let controlX = (centerX + x) / 1.4;

let controlY = (centerY + y) / 2;

if (y < centerY) {

controlX = x / 2;

controlY = y / 1.2;

}

return `M0,-60 C${controlX},${controlY} ${controlX},${controlY} ${x},${y}`;

这里说明一下几点

centerX 与 centerY 代表的是 UI 图中的中心点，也是每个曲线的起点，可以根据情况修改
if 判断是因为如果不调整控制点的话，曲线的方向会与需求方向相反
两次除的除数数值不一样，也是因为中心点的位置偏上，所以稍微有修改，当然后面也可以调整

后续

后面可能还会涉及到路径计算的调整、路径动画配置等其他优化的方案，后面也会慢慢完善的。也会试验使用纯CSS结合DIV来实现。

您可能感兴趣的文章 :

原文链接 :

Tag : 动画(21)css(221)SVG(19)

table不让td文字溢出操作方法

核心代码 1 2 3 4 5 6 7 8 9 10 11 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%
CSS使用SVG实现动态分布的圆环发散路径动画

这个需求也是最近的大屏项目里面需要用到的一个效果，大致需求是实现一个圆形范围内由一个不确定坐标的点向圆周进行曲线发散的效
CSS3浏览器兼容的介绍

一、浏览器兼容 1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核
CSS元素定位之通过元素的标签或者元素的id、cl

大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好
微信小程序纯CSS实现无限弹幕滚动效果

啥也不说，先上效果图实现背景产品：我们需要一个弹幕滚动效果，类似于微博热搜那种实时评论，但是我们的数据是固定的20条，你让他
使用CSS构建强大且酷炫的粒子动画效果

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。当然，不使用 HTML + CSS 的主要
flex:1的详细介绍

简单的来说一下在别人问你这个问题的时候怎么来回答它前端新人，如有错误求大佬指出~求教???? 情景复现大佬提问：你知道flex: 1;的更深
新的CSS伪类函数 :is 和 :where()示例介绍

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 b 标签进行颜色调整，我
纯CSS打字动画的实现方法

在一些技术网站中，经常会看到这样一种展示效果：逐个显示一段文本中的字符，模拟出一种打字的效果。通过这种方式可以显著地提升网
实现el-form每行显示两列底部按钮居中效果的教程

el-form 每行显示两列，底部按钮居中问题：以前的解决办法是：el-col,el-row。但是这里只有一个el-form-item的label数据是已知的，其余项都是循