最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS使用SVG实现动态分布的圆环发散路径动画教程
时间:2022-10-31 编辑:坚强 来源:一聚教程网
本文为小伙伴们带来了关于CSS使用SVG实现动态分布的圆环发散路径动画教程,感兴趣的小伙伴一起来看看吧。
开篇
这个需求也是最近的 大屏项目 里面需要用到的一个效果,大致需求是实现一个圆形范围内 由一个不确定坐标的点 向圆周进行曲线发散 的效果,曲线圆弧向上并伴随路径动画。第一时间看到这个需求想到的就是 SVG 或者 Canvas。但是由于开发时可能还需要插入其他元素,所以这里还是希望通过 纯 DOM + CSS 或者 SVG 的方式来实现。
当然这个中心点还是比较确定哈,因为最后的效果是希望左右对称的,所以中心肯定在 width / 2 的那条纵线上。
于是今天忙活了半天,总算是有了一个 SVG 实现的雏形。最终效果就和封面图一样,只是因为录制的问题动画显得有断层。
先设计
为了方便显示,整个 SVG 的默认视口大小设置为了 600 的一个正方形,并且内部固定有一个中心点和圆周,当然这个中心点 目前还是固定的。
然后 曲线就通过遍历数组来创建 SVG 路径,路径动画与每条曲线进行绑定,然后每条曲线的路径的话,就通过 Vue 计算属性返回一个闭包函数,通过元素下标来计算曲线的路径。
并且,为了 方便后面判断曲线的左右分布,将 圆心的坐标 作为了 SVG 的坐标中心。
再实现
首先是模拟数据
这里是生成一个 10 ~ 20 之间的数组,再模拟处理每个点的坐标的。
css;">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 了。
ArcAnimation Page
刷新数据 自动刷新
这里只有一点:
在 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来实现。
以上就是关于CSS使用SVG实现动态分布的圆环发散路径动画教程的全部内容了,感兴趣的小伙伴记得点击关注哦。
-
上一个: css3中仿放大镜效果的几种方式原理介绍
-
下一个: CSS 鼠标点击拖拽效果代码展示
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26
- CSS弹性布局FLEX,媒体查询及移动端点击事件教程 10-26