[英]d3js - SVG circle in smooth perpetual motion
I am trying to animate a cloud of circles with d3js. 我正在尝试使用d3js为圈子动画。 What I'd like to get is a random smooth perpetual motion where all the circle "gravitate" around their initial position.
我想要得到的是一个随机的平滑永动机,其中所有圆都围绕其初始位置“引力”。
So far, I got this: http://jsfiddle.net/vnr1f9f8/6/ 到目前为止,我已经知道了: http : //jsfiddle.net/vnr1f9f8/6/
The problem here is that the motion is not smooth at all. 这里的问题是运动根本不平稳。 The circles move then stops and starts again.
圆圈移动,然后停止并再次开始。
How can I fix this? 我怎样才能解决这个问题?
Here is the d3 code I used: 这是我使用的d3代码:
var svg = d3.select('body').append('svg')
.attr("width", 960)
.attr("height", 480);
var circleContainer = [];
for (var i = 0; i < 10; i++) {
var originX = 100 * (1 + 2.5 * Math.random()),
originY = 80 * (1 + 2.5 * Math.random());
circleContainer[i] = svg.append('circle')
.attr('class', 'circle-' + i)
.attr('cx', originX)
.attr('cy', originY)
.attr('originX', originX)
.attr('originY', originY)
.attr('r', 20)
.attr('fill','red');
}
transition();
function transition() {
for (var i = 0; i < 10; i++) {
circleContainer[i].transition()
.duration(1000)
.attr('cx', circleContainer[i].attr('originX') * (1 + Math.random()/10))
.attr('cy', circleContainer[i].attr('originY') * (1 + Math.random()/10))
.each("end", transition)
.ease("linear");
}
}
You can add .ease("linear")
to get it to be smooth. 您可以添加
.ease("linear")
使其变得平滑。 Here is jsfiddle - http://jsfiddle.net/cuckovic/vnr1f9f8/3/ 这是jsfiddle- http://jsfiddle.net/cuckovic/vnr1f9f8/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.