介绍

通过D3可以用很简单的代码实现很炫酷的效果,这个动画主要通过鼠标的移动为驱动的动画,它分为两个部分,一个是获得鼠标或触摸的位置坐标,一个是圆的生成和消散动画.

示例:https://huiyanpohun.github.io/DataVisualization/circle.html

填充一个SVG

// 在body中填充一个svg标签
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

这个不用多讲,在body中填充一个SVG标签,设置一下宽高属性

在SVG中填充一个矩形

在SVG中填充一个矩形主要是为了方便监听鼠标移动或者触摸移动事件

// 在svg中填充一个rect矩形对象
var rect = svg.append("rect").attr("width", width).attr("height", height)// 监听是否为手机触摸或者鼠标移动// partical是一个回调函数.on("ontouchstart" in document ? "touchmove" : "mousemove", partical);//.on("click",partical);

回调函数

回调函数是这个例子中最重要的一个函数,鼠标每移动一次,或者屏幕每触摸移动一次就会调用一次这个函数

// 回调函数,鼠标每移动一次,调用函数一次
function partical() {/*** 通过d3.mouse(this)可以得到鼠标的位置坐标* 得到的参数是数组类型的* x = param[0]* y = param[1]*//*** tips:* hsl颜色模式通过色度:h,饱和度:s和亮度:l来定义一种颜色* h的取值范围为[0,360],s的取值范围为[0,1],l的取值范围为[0,1]*/console.log("i==>"+i);var param = d3.mouse(this);svg.insert("circle", "rect").attr("cx", param[0]).attr("cy", param[1]).attr("r", 1e-6)// 描边.style("stroke", d3.hsl((i = (i + 1) % 360), 1, 0.5))// 描边的透明度.style("stroke-opacity", 1)// 平滑过渡.transition()// 持续时间.duration(2000)// 缓动函数,设定如何属性如何变化,在这个例子中.ease(/**function (x) {return x*x;}**/Math.sqrt()).attr("r", 100).style("stroke-opacity", 1e-6).remove();d3.event.preventDefault();
}

接下来说一下比较重要的操作符

transition()

过渡操作符,~~过渡操作符是操作元素过渡动画的操作符(废话)~~,这个操作的元素是是什么呢,当然就是svg中插入矩形的圆了,刚才说回调函数在鼠标每一次移动的时候都会调用一次,也就是鼠标每移动一次都会插入一个圆,(当然这个圆最后会通过remove()操作符移除掉),当使用呢这个操作符以后的就是设置如何过渡的呢

duration()

动画是时间的函数,当然需要一个持续时间,这个持续时间传入的参数是以毫秒为单位

ease()

这个操作符其实有点难说,可以把它看作为速度,持续时间可以看作是路程,x是一个变量它的范围是[0,1],路程是一定的,如果是线性的,就是匀速直线运动,当然也可以是加速运动,这个取决于你传入的函数.比如我要将圆从0变化到100,可以随时间匀速的变化到一百,也可以在某段时间变化得很快,一段时间变化得很慢.

transition.attr()

这个是要变化的属性,在这个例子中r的大小会变化,半径从1e-6变化到100

transition.style()

要变化的样式,在这个例子中描边的透明度(stroke-opacity)发生了变化从1变化到了1e-6

??正文结束??

OMG Partical Practice相关推荐

HDU1089-1096 A+B for Input-Output Practice 系列问题（输入输出格式练习）
HDU1089 A+B for Input-output Practice (1) 问题描述:每行输入一对整数a和b,每行对应输出a与b的和. Sample Input 1 5 10 20 Sampl ...
Programmer of Practice Manual
这是我以前再读研究生的时候写的东东,希望搞计算机的同学,教计算机本科生学习技术的文章(非算法类) 粘在这里纪念一下. 大一寒假结构化编程基础: 图书:<How to C> 实践过程:完成 ...
Database design best practice(1):关于primary key及其它
1. The job of the primary key is to uniquely identify records, not to store business data ; any use ...
《Git in Practice》作者访谈：关于Git的八个问题
Mike McQuaid的著作<Git in Pratice>是一份具有动手实践性的指导,它从实践性的角度介绍了Git,提供了超过60种在操作Git库时会使用到的技巧和命令,并且为有经验的 ...
Remoting Practice Sample
Remoting Practice Sample 这两天研究了一下Remoting, 改了MSDN 的例子. 那个例子不是很方便. 我做了如下改进: 整个sample做成一个solution 用了wi ...
ATPG Practice ATPG Practice II
文章目录 General ATPG Flow ATPG DRC example clock to data ATPG setting delay test的两种方法 single capture do ...
DFT实训教程笔记2（bibili版本）- Scan synthesis practice
文章目录 Scan synthesis practice 本博文是博主记录DFT实训教程的笔记版本,此笔记并没有对所有的知识进行记录,仅仅以自身的认知水平,来记录了一些部分笔记并加上了自己的理解. S ...
Best practice for JVM Tuning[转]
原文地址:https://backstage.forgerock.com/knowledge/kb/article/a35746010 JVM tuning considerations Before ...
OMG: daily scrum six
Member Today's task Tomorrow's task Note Rui Task:620 model view & binding 637 637 Agenda Data B ...

OMG Partical Practice

介绍