飞鹫

飞鹫 查看完整档案

填写现居城市  |  填写毕业院校QTone  |  Web Front 编辑 1Orz.cn 编辑
编辑

每天进步一点

个人动态

飞鹫 赞了文章 · 2020-04-03

Svg 路径动画实现旋转进度条

尝试使用 Svg 实现简易的动画效果。有关 Svg 的具体知识点不在此文赘述,仅就所举示例的需求点阐述实现思路。

先阐明具体需求:白色轨迹需自起始点旋转至由用户成长值决定的终点。

动画效果如下:若无效果请戳这里

该动画可拆分为两部分实现:粉红圆环轨迹、粉红圆形尾巴。


绘制粉红圆环轨迹

相关代码:

<path d="M 110 10 a 100 100 0 0 1 0 200 a 100 100 0 0 1 0 -200 Z" fill="none" stroke="#FD7991" stroke-width="4" stroke-linecap="round" stroke-dasharray="628.4073486328125">
    <animate attributeName="stroke-dashoffset" from="628.4073486328125" to="0" dur="2s" repeatCount="indefinite" />
</path>

使用 path 绘制半径 100 的圆环轨迹。起点 M 110 10 ,右半圆弧 a 100 100 0 0 1 0 200 ,左半圆弧 a 100 100 0 0 1 0 -200 ,闭合路径 Z

不了解 Svg Paths 的同学建议自行科普~

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

可优先了解 圆弧 A a

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

路径绘制完毕如何添加描线效果呢?请注意 stroke-dasharraystroke-dashoffset

属性 stroke-dasharray 控制描边点划线的图案范式;属性 stroke-dashoffset 指定 dash 模式至路径开始的距离。

stroke-dashoffset 偏移量为 path 路径长度时,粉红轨迹完全不可见,逐步减小偏移至 0 可使之完全呈现。

这好比在热狗上挤果酱,本应从其左侧挤至右侧。而你却从其右侧开始向右挤,整整偏移了一条热狗的长度。热狗上无半点果酱,只能靠减小偏移来加料喽。

指定 stroke-dasharraypath 路径长度,意味着操作空间为整条热狗。

友情提示如何获取路径长度:

var pathLength = $('path')[0].getTotalLength();

绘制粉红圆形尾巴

尾巴可使用图片绘制:

<defs>
    <pattern id="tail" width="100%" height="100%" patternContentUnits="objectBoundingBox">
        <image width="1" height="1" xlink:href="http://oz54e50y4.bkt.clouddn.com/tail.png" />
    </pattern>
</defs>
<g>
    <circle cx="0" cy="0" r="8" fill="url(#tail)"></circle>
</g>

也可使用渐变绘制:

<defs>
    <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="60%" id="tail">
        <stop stop-opacity="1" stop-color="#FD7991" offset="30%"/>
        <stop stop-opacity="0.5" stop-color="#fD97AA" offset="40%"/>
        <stop stop-opacity="0" stop-color="#FECBD4" offset="80%"/>
    </radialGradient>
</defs>
<g>
    <rect x="-10" y="-10" width="20" height="20" fill="url(#tail)"></rect>
</g>

为尾巴添加动画:

<rect x="-10" y="-10" width="20" height="20" fill="url(#tail)">
    <animateMotion path="M 110 10 a 100 100 0 0 1 0 200 a 100 100 0 0 1 0 -200 Z" rotate="auto" dur="2s" repeatCount="indefinite" />
</rect>

动画路径、执行时间、速度曲线等属性与粉红圆环轨迹保持一致即可~


控制动画终止位置

再次阐明具体需求:白色轨迹需自起始点旋转至由用户成长值决定的终点。

假定轨迹描线长度占圆环总长的百分比已知,如何控制动画终止位置?根据百分比计算描线长度然后巴拉巴拉计算坐标点...数学欠佳的还是绕行吧。

控制动画执行次数 repeatDur 便可...

var totalTime = 3;
var percent = 0.8;
var runAnimate = function () {
    var durTime = totalTime * percent;
    $circleAnimate[0].setAttribute('repeatDur', durTime + 's');
    $tailAnimate[0].setAttribute('repeatDur', durTime + 's');
    $circleAnimate[0].beginElement();
    $tailAnimate[0].beginElement();
};

本例 源码demo


作者:呆恋小喵

我的后花园:https://sunmengyuan.github.io...

我的 github:https://github.com/sunmengyuan

原文链接:https://sunmengyuan.github.io...

查看原文

赞 6 收藏 1 评论 0

飞鹫 收藏了文章 · 2019-10-23

基于ECharts 图表二次封装实现0配置画图表,持续迭代中欢迎 Star

x-charts

基于 ECharts 二次封装的图表库 📉📊

项目仓库地址: https://github.com/IdenPin/x-...

demo 演示地址: https://idenpin.github.io/x-c...

特性

  • 0 配置(简化繁琐的 options 配置)
  • 可以针对项目提取共用的 default options
  • 将 options 和 data 分离

使用方法

npm i @pdeng/x-charts

new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data?: {rows:? Array, columns?: Array, legendData?: Array})

  • new Xcharts(el: HTMLDivElement, type?: String).setData()
    el, type 为必填字段,setData 不传默认使用预置 mock 数据
  • new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data)
    data 中 rows 表示图表的纬度
    options 选传字段,默认使用预置的 default options。可以根据自己项目情况抽离出一份自己的 default options

注意 : 目前支持的 type 类型有 line | bar | pie | scatter | radar | map,项目持续更新中

// 使用预置 options
<template>
  <div>
    <div id="chart0" style="width:100%;heigth:300px" />
  </div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
  mounted() {
    new Xcharts('chart0', 'line').setData()
  }
}
</script>

// 自定义 options
<template>
  <div>
    <div id="chart0" style="width:100%;heigth:300px" />
  </div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
  data() {
    return {
      legendData: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      columns: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 548, name: '搜索引擎' }
      ]
    }
  },
  mounted() {
    this.chart0 = new Xcharts('chart0', 'pie', {
      series: [
        {
          radius: [0, '70%'],
          roseType: 'radius'
        }
      ]
    }).setData({
      legendData: this.legendData,
      columns: this.columns
    })
  }
}

DEMO 截图







实战项目截图:




演示地址: https://idenpin.github.io/x-c...

查看原文

飞鹫 发布了文章 · 2019-10-23

基于ECharts 图表二次封装实现0配置画图表,持续迭代中欢迎 Star

x-charts

基于 ECharts 二次封装的图表库 📉📊

项目仓库地址: https://github.com/IdenPin/x-...

demo 演示地址: https://idenpin.github.io/x-c...

特性

  • 0 配置(简化繁琐的 options 配置)
  • 可以针对项目提取共用的 default options
  • 将 options 和 data 分离

使用方法

npm i @pdeng/x-charts

new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data?: {rows:? Array, columns?: Array, legendData?: Array})

  • new Xcharts(el: HTMLDivElement, type?: String).setData()
    el, type 为必填字段,setData 不传默认使用预置 mock 数据
  • new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data)
    data 中 rows 表示图表的纬度
    options 选传字段,默认使用预置的 default options。可以根据自己项目情况抽离出一份自己的 default options

注意 : 目前支持的 type 类型有 line | bar | pie | scatter | radar | map,项目持续更新中

// 使用预置 options
<template>
  <div>
    <div id="chart0" style="width:100%;heigth:300px" />
  </div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
  mounted() {
    new Xcharts('chart0', 'line').setData()
  }
}
</script>

// 自定义 options
<template>
  <div>
    <div id="chart0" style="width:100%;heigth:300px" />
  </div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
  data() {
    return {
      legendData: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      columns: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 548, name: '搜索引擎' }
      ]
    }
  },
  mounted() {
    this.chart0 = new Xcharts('chart0', 'pie', {
      series: [
        {
          radius: [0, '70%'],
          roseType: 'radius'
        }
      ]
    }).setData({
      legendData: this.legendData,
      columns: this.columns
    })
  }
}

DEMO 截图







实战项目截图:




演示地址: https://idenpin.github.io/x-c...

查看原文

赞 1 收藏 1 评论 0

认证与成就

  • 获得 6 次点赞
  • 获得 5 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-01-03
个人主页被 462 人浏览