在setInterval（）上平滑旋转canvas元素

Question

我正在尝试复制此效果：http://codepen.io/kenjiSpecial/pen/enrbq

我有一个Segment类：

function Segment (x, y, length) {
    this.x = x;
    this.y = y;
    this.length = length;
    this.rotation = 0;
    this.color = '#fff';
}

我使用它来填充屏幕垂直线（由线段组成），然后使用此函数和setInterval顺时针旋转每个45度：

function drawSegments(segment) {
    segment.rotation = angle;
    segment.draw(ctx);
}

setInterval(function(){
    angle += 45 * Math.PI / 180;
}, 800);

它的工作原理（即线条每隔800毫秒旋转一次）但转换之间没有动画。我试过这样的事情，但不幸的是它没有用......

for (var i = 0; i < 360; i++) {
    angle += i * Math.PI / 180;
} 

所以，问题是 - 如何为片段的每个旋转设置动画？

以下是现场演示的链接：http://codepen.io/gbnikolov/pen/KEGzJ