d3.js角度渐变动画(弧度渐变)
众所周知的原因SVG、Canvas里面都没有角度渐变的API。所以如果要制作一个颜色随着弧度变化而变化的环形,还是挺麻烦的一件事。如果再加上增长减少动画那就更加麻烦了。
如下图所示我们要制作的动画效果,圆环的透明度随着角度的增加而增加。角度为0的时候透明度为0,角度结束的时候透明度为1。注意透明度为1的地方不固定,它随着百分比的变化而变化。
d3实现角度渐变的方式有两种:
- path分割法:就是把路径分割成细小的块,每一块都填充上不同的颜色。
- 渐变分割法:把角度渐变分成左右的两个上下渐变。
两种方式各有优缺点。
方法1可以快速生成这样会的彩虹环。
var π = Math.PI,
τ = 2 * π,
n = 360;
var width = 300,
height = 300,
outerRadius = width / 2 - 20,
innerRadius = outerRadius - 100;
d3.select("svg").append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.selectAll("path")
.data(d3.range(0, τ, τ / n))
.enter().append("path")
.attr("d", d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius)
.startAngle(function(d) { return d; })
.endAngle(function(d) { return d + τ / n * 1.1; }))
.style("fill", function(d) { return d3.hsl(d * 360 / τ, 1, .5); });
上面代码中的n就是把路径分割成多少份,这是个难以控制的参数:
分割太多了会这样:
分割太少了会这样:
如果角度还在动态变化中
这个n的值就会更加难以琢磨了。
方法2就不会存在这个N了。
方法2在github上有个案例:
https://github.com/xswei/ringGradient
思路就是把一个圆分成左右两半,左边几个渐变,右边一个渐变,两个渐变配合使用。这个案例中的颜色是随着角度而固定不变的。所以要实现一开始图中透明度为1的地方随着比例变化而变化,还需要进一步的加工处理。
分为两种情况,当比例小于50%的时候,左边就不显示,右边的透明度就是从0-1变化。
当值大于50%的时候,左边的透明度就是从1-x,左边就是就0-x。x的值是50/百分比。这样整体就会衔接的比较好。
但是当值在50%-80%之间的时候,方法仔细瞅,会发现左边比右边的量一点点,嗯,因为它短,所以亮,这个细节我暂时还没处理,因为在d3中我也处理不了,除非在three上shader。
当环的半径变大的时候这个问题更加明显
现在渐变的环已经做好了,后面就是做动画的这个难度不大,直接撸代码就可以了。