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


Posted in HTML / CSS onDecember 24, 2022

开篇

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

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 了。

<template>
  <div class="ArcAnimation">
    <h1>ArcAnimation Page</h1>
    <p>
      <el-button @click="updateArray(false)">刷新数据</el-button>
      <el-button @click="updateArray(true)">自动刷新</el-button>
    </p>

      <div class="base-content">
        <svg :viewBox="`-${width / 2} -${width / 2} ${width} ${width}`">
          <g v-for="i in arr" :key="i.k">
            <path :d="i.path" fill="none" stroke="#c4605f" stroke-width="4px"></path>
            <circle r="5" fill="#af4">
              <animateMotion dur="4s" repeatCount="indefinite" :path="i.path" />
            </circle>
          </g>
          <circle r="30" cx="0" cy="-60" fill="#2bc0e4" />
          <circle r="296" cx="0" cy="0" fill="none" stroke="#2bc0e4" stroke-width="4px" />
        </svg>
      </div>
  </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}`;
},

这里说明一下几点

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

后续

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

到此这篇关于CSS使用SVG实现动态分布的圆环发散路径动画的文章就介绍到这了,更多相关svg路径动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 #HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 #HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 #HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP新手入门学习方法
2011/05/08 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
wxPython实现绘图小例子
2019/11/19 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
贷款担保书
2015/01/20 职场文书
大学校园招聘会感想
2015/08/10 职场文书
初级职称评定工作总结
2015/08/13 职场文书
员工工作心得体会
2019/05/07 职场文书