requestAnimationFrame()使用時にn秒かけて要素を移動する処理

JavascriptでCanvasを使ったアニメーションのようなものを行う際、setIntervalを使ったループではなく、requestAnimationFrame() でループさせようと考えています。
canvasのそばにボタンが有り、ボタンを押すとアニメーションが実行され、１秒かけて四角形が右に移動します。

JavaScript
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>Canvas</title>
6        <script>
7        window.addEventListener("load", function(){
8            var canvas = document.getElementById("canvas1");
9            var context = canvas.getContext("2d");
10            var x = 0;
11
12            var button1 = document.getElementById("button1");
13            button1.addEventListener("click", function(){
14                x = 0;
15                var func = setInterval(function(){
16                    if(x > 100){
17                        clearInterval(func);
18                        return;
19                    }
20                    x += 1;
21                }, 10);
22            });
23
24            var loop = function(){
25
26                context.clearRect(0, 0, canvas.width, canvas.height);
27                y = 30;
28                context.fillRect(x, y, 30, 30);
29                window.requestAnimationFrame(loop);
30            };
31            loop();
32        });
33        </script>
34    </head>
35    <body>
36        <canvas id="canvas1" width="320" height="100"></canvas>
37
38        <p><button id="button1">Button</button></p>
39    </body>
40</html>

しかしこのままでは描画用の requestAnimationFrame() の他に移動のための setInterval() ループが必要になってしまいます。
n秒かけて物体がある地点まで移動するといったアニメーションを行うにはどのようにして FPS が一定でない requestAnimationFrame() のループと同期させれば良いのでしょうか？