{"action":"created","comment":{"url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/comments/70055563","id":70055563,"diff_hunk":"@@ -80,20 +83,38 @@ class SpriteAnimator extends Component {\n       return this.loadSprite()\n     }\n \n-    const {shouldAnimate, timeout, stopLastFrame, onEnd} = this.props\n+    const {shouldAnimate, fps, stopLastFrame, onEnd} = this.props\n     if (shouldAnimate) {\n       const {maxFrames, currentFrame} = this.state\n       const nextFrame = currentFrame + 1 >= maxFrames ? 0 : currentFrame + 1\n+\n+      if (!shouldAnimate) {\n+        return\n+      }\n       if (nextFrame === 0 && stopLastFrame) {\n         return onEnd()\n       }\n-      setTimeout(() => {\n-        if (!this.props.shouldAnimate) return\n-        this.setState({currentFrame: nextFrame})\n-      }, timeout)\n+      this.interval = 1000 / fps\n+\n+      this.animationId = raf(time => this.animate(nextFrame, time))\n     }\n   }\n \n+  animate (nextFrame, time) {\n+    if (!this.prevTime) {\n+      this.prevTime = time\n+    }\n+\n+    const delta = time - this.prevTime\n+    if (delta < this.interval) {\n+      this.animationId = raf(time => this.animate(nextFrame, time))\n+      return","path":"src/index.js","position":69,"original_position":69,"commit_id":"72b3b32c0a4ebc6be07387994330e9153511c964","original_commit_id":"72b3b32c0a4ebc6be07387994330e9153511c964","user":{"login":"dlindenkreuz","id":509681,"avatar_url":"https://avatars.githubusercontent.com/u/509681?v=3","gravatar_id":"","url":"https://api.github.com/users/dlindenkreuz","html_url":"https://github.com/dlindenkreuz","followers_url":"https://api.github.com/users/dlindenkreuz/followers","following_url":"https://api.github.com/users/dlindenkreuz/following{/other_user}","gists_url":"https://api.github.com/users/dlindenkreuz/gists{/gist_id}","starred_url":"https://api.github.com/users/dlindenkreuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dlindenkreuz/subscriptions","organizations_url":"https://api.github.com/users/dlindenkreuz/orgs","repos_url":"https://api.github.com/users/dlindenkreuz/repos","events_url":"https://api.github.com/users/dlindenkreuz/events{/privacy}","received_events_url":"https://api.github.com/users/dlindenkreuz/received_events","type":"User","site_admin":false},"body":"bail out if the animation is too fast","created_at":"2016-07-08T10:35:32Z","updated_at":"2016-07-08T10:35:32Z","html_url":"https://github.com/RadPad/react-sprite-animator/pull/6#discussion_r70055563","pull_request_url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6","_links":{"self":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/comments/70055563"},"html":{"href":"https://github.com/RadPad/react-sprite-animator/pull/6#discussion_r70055563"},"pull_request":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6"}}},"pull_request":{"url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6","id":76732316,"html_url":"https://github.com/RadPad/react-sprite-animator/pull/6","diff_url":"https://github.com/RadPad/react-sprite-animator/pull/6.diff","patch_url":"https://github.com/RadPad/react-sprite-animator/pull/6.patch","issue_url":"https://api.github.com/repos/RadPad/react-sprite-animator/issues/6","number":6,"state":"open","locked":false,"title":"use requestAnimationFrame for animation","user":{"login":"dlindenkreuz","id":509681,"avatar_url":"https://avatars.githubusercontent.com/u/509681?v=3","gravatar_id":"","url":"https://api.github.com/users/dlindenkreuz","html_url":"https://github.com/dlindenkreuz","followers_url":"https://api.github.com/users/dlindenkreuz/followers","following_url":"https://api.github.com/users/dlindenkreuz/following{/other_user}","gists_url":"https://api.github.com/users/dlindenkreuz/gists{/gist_id}","starred_url":"https://api.github.com/users/dlindenkreuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dlindenkreuz/subscriptions","organizations_url":"https://api.github.com/users/dlindenkreuz/orgs","repos_url":"https://api.github.com/users/dlindenkreuz/repos","events_url":"https://api.github.com/users/dlindenkreuz/events{/privacy}","received_events_url":"https://api.github.com/users/dlindenkreuz/received_events","type":"User","site_admin":false},"body":"- fixed frame rates through `fps` prop\r\n- remove `timeout` prop\r\n\r\nanimations now look way smoother!","created_at":"2016-07-08T10:28:58Z","updated_at":"2016-07-08T10:35:32Z","closed_at":null,"merged_at":null,"merge_commit_sha":"7de27dfdad199aab08388e08b530226f4b81da18","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6/commits","review_comments_url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6/comments","review_comment_url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/comments{/number}","comments_url":"https://api.github.com/repos/RadPad/react-sprite-animator/issues/6/comments","statuses_url":"https://api.github.com/repos/RadPad/react-sprite-animator/statuses/72b3b32c0a4ebc6be07387994330e9153511c964","head":{"label":"dlindenkreuz:master","ref":"master","sha":"72b3b32c0a4ebc6be07387994330e9153511c964","user":{"login":"dlindenkreuz","id":509681,"avatar_url":"https://avatars.githubusercontent.com/u/509681?v=3","gravatar_id":"","url":"https://api.github.com/users/dlindenkreuz","html_url":"https://github.com/dlindenkreuz","followers_url":"https://api.github.com/users/dlindenkreuz/followers","following_url":"https://api.github.com/users/dlindenkreuz/following{/other_user}","gists_url":"https://api.github.com/users/dlindenkreuz/gists{/gist_id}","starred_url":"https://api.github.com/users/dlindenkreuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dlindenkreuz/subscriptions","organizations_url":"https://api.github.com/users/dlindenkreuz/orgs","repos_url":"https://api.github.com/users/dlindenkreuz/repos","events_url":"https://api.github.com/users/dlindenkreuz/events{/privacy}","received_events_url":"https://api.github.com/users/dlindenkreuz/received_events","type":"User","site_admin":false},"repo":{"id":62842077,"name":"react-sprite-animator","full_name":"dlindenkreuz/react-sprite-animator","owner":{"login":"dlindenkreuz","id":509681,"avatar_url":"https://avatars.githubusercontent.com/u/509681?v=3","gravatar_id":"","url":"https://api.github.com/users/dlindenkreuz","html_url":"https://github.com/dlindenkreuz","followers_url":"https://api.github.com/users/dlindenkreuz/followers","following_url":"https://api.github.com/users/dlindenkreuz/following{/other_user}","gists_url":"https://api.github.com/users/dlindenkreuz/gists{/gist_id}","starred_url":"https://api.github.com/users/dlindenkreuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dlindenkreuz/subscriptions","organizations_url":"https://api.github.com/users/dlindenkreuz/orgs","repos_url":"https://api.github.com/users/dlindenkreuz/repos","events_url":"https://api.github.com/users/dlindenkreuz/events{/privacy}","received_events_url":"https://api.github.com/users/dlindenkreuz/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/dlindenkreuz/react-sprite-animator","description":"A React component that animates simple spritesheets","fork":true,"url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator","forks_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/forks","keys_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/keys{/key_id}","collaborators_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/teams","hooks_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/hooks","issue_events_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/issues/events{/number}","events_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/events","assignees_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/assignees{/user}","branches_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/branches{/branch}","tags_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/tags","blobs_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/git/refs{/sha}","trees_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/git/trees{/sha}","statuses_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/statuses/{sha}","languages_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/languages","stargazers_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/stargazers","contributors_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/contributors","subscribers_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/subscribers","subscription_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/subscription","commits_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/commits{/sha}","git_commits_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/git/commits{/sha}","comments_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/comments{/number}","issue_comment_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/issues/comments{/number}","contents_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/contents/{+path}","compare_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/compare/{base}...{head}","merges_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/merges","archive_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/downloads","issues_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/issues{/number}","pulls_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/pulls{/number}","milestones_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/milestones{/number}","notifications_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/labels{/name}","releases_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/releases{/id}","deployments_url":"https://api.github.com/repos/dlindenkreuz/react-sprite-animator/deployments","created_at":"2016-07-07T22:30:51Z","updated_at":"2016-07-08T10:28:50Z","pushed_at":"2016-07-08T10:26:56Z","git_url":"git://github.com/dlindenkreuz/react-sprite-animator.git","ssh_url":"git@github.com:dlindenkreuz/react-sprite-animator.git","clone_url":"https://github.com/dlindenkreuz/react-sprite-animator.git","svn_url":"https://github.com/dlindenkreuz/react-sprite-animator","homepage":null,"size":521,"stargazers_count":1,"watchers_count":1,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":1,"default_branch":"master"}},"base":{"label":"RadPad:master","ref":"master","sha":"9152f1bb5bfa235960ccb1199c0fc00ad27f930f","user":{"login":"RadPad","id":6598684,"avatar_url":"https://avatars.githubusercontent.com/u/6598684?v=3","gravatar_id":"","url":"https://api.github.com/users/RadPad","html_url":"https://github.com/RadPad","followers_url":"https://api.github.com/users/RadPad/followers","following_url":"https://api.github.com/users/RadPad/following{/other_user}","gists_url":"https://api.github.com/users/RadPad/gists{/gist_id}","starred_url":"https://api.github.com/users/RadPad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RadPad/subscriptions","organizations_url":"https://api.github.com/users/RadPad/orgs","repos_url":"https://api.github.com/users/RadPad/repos","events_url":"https://api.github.com/users/RadPad/events{/privacy}","received_events_url":"https://api.github.com/users/RadPad/received_events","type":"Organization","site_admin":false},"repo":{"id":51660061,"name":"react-sprite-animator","full_name":"RadPad/react-sprite-animator","owner":{"login":"RadPad","id":6598684,"avatar_url":"https://avatars.githubusercontent.com/u/6598684?v=3","gravatar_id":"","url":"https://api.github.com/users/RadPad","html_url":"https://github.com/RadPad","followers_url":"https://api.github.com/users/RadPad/followers","following_url":"https://api.github.com/users/RadPad/following{/other_user}","gists_url":"https://api.github.com/users/RadPad/gists{/gist_id}","starred_url":"https://api.github.com/users/RadPad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RadPad/subscriptions","organizations_url":"https://api.github.com/users/RadPad/orgs","repos_url":"https://api.github.com/users/RadPad/repos","events_url":"https://api.github.com/users/RadPad/events{/privacy}","received_events_url":"https://api.github.com/users/RadPad/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/RadPad/react-sprite-animator","description":"A React component that animates simple spritesheets","fork":false,"url":"https://api.github.com/repos/RadPad/react-sprite-animator","forks_url":"https://api.github.com/repos/RadPad/react-sprite-animator/forks","keys_url":"https://api.github.com/repos/RadPad/react-sprite-animator/keys{/key_id}","collaborators_url":"https://api.github.com/repos/RadPad/react-sprite-animator/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/RadPad/react-sprite-animator/teams","hooks_url":"https://api.github.com/repos/RadPad/react-sprite-animator/hooks","issue_events_url":"https://api.github.com/repos/RadPad/react-sprite-animator/issues/events{/number}","events_url":"https://api.github.com/repos/RadPad/react-sprite-animator/events","assignees_url":"https://api.github.com/repos/RadPad/react-sprite-animator/assignees{/user}","branches_url":"https://api.github.com/repos/RadPad/react-sprite-animator/branches{/branch}","tags_url":"https://api.github.com/repos/RadPad/react-sprite-animator/tags","blobs_url":"https://api.github.com/repos/RadPad/react-sprite-animator/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/RadPad/react-sprite-animator/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/RadPad/react-sprite-animator/git/refs{/sha}","trees_url":"https://api.github.com/repos/RadPad/react-sprite-animator/git/trees{/sha}","statuses_url":"https://api.github.com/repos/RadPad/react-sprite-animator/statuses/{sha}","languages_url":"https://api.github.com/repos/RadPad/react-sprite-animator/languages","stargazers_url":"https://api.github.com/repos/RadPad/react-sprite-animator/stargazers","contributors_url":"https://api.github.com/repos/RadPad/react-sprite-animator/contributors","subscribers_url":"https://api.github.com/repos/RadPad/react-sprite-animator/subscribers","subscription_url":"https://api.github.com/repos/RadPad/react-sprite-animator/subscription","commits_url":"https://api.github.com/repos/RadPad/react-sprite-animator/commits{/sha}","git_commits_url":"https://api.github.com/repos/RadPad/react-sprite-animator/git/commits{/sha}","comments_url":"https://api.github.com/repos/RadPad/react-sprite-animator/comments{/number}","issue_comment_url":"https://api.github.com/repos/RadPad/react-sprite-animator/issues/comments{/number}","contents_url":"https://api.github.com/repos/RadPad/react-sprite-animator/contents/{+path}","compare_url":"https://api.github.com/repos/RadPad/react-sprite-animator/compare/{base}...{head}","merges_url":"https://api.github.com/repos/RadPad/react-sprite-animator/merges","archive_url":"https://api.github.com/repos/RadPad/react-sprite-animator/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/RadPad/react-sprite-animator/downloads","issues_url":"https://api.github.com/repos/RadPad/react-sprite-animator/issues{/number}","pulls_url":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls{/number}","milestones_url":"https://api.github.com/repos/RadPad/react-sprite-animator/milestones{/number}","notifications_url":"https://api.github.com/repos/RadPad/react-sprite-animator/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/RadPad/react-sprite-animator/labels{/name}","releases_url":"https://api.github.com/repos/RadPad/react-sprite-animator/releases{/id}","deployments_url":"https://api.github.com/repos/RadPad/react-sprite-animator/deployments","created_at":"2016-02-13T18:48:13Z","updated_at":"2016-07-08T10:28:45Z","pushed_at":"2016-07-08T10:28:58Z","git_url":"git://github.com/RadPad/react-sprite-animator.git","ssh_url":"git@github.com:RadPad/react-sprite-animator.git","clone_url":"https://github.com/RadPad/react-sprite-animator.git","svn_url":"https://github.com/RadPad/react-sprite-animator","homepage":null,"size":521,"stargazers_count":12,"watchers_count":12,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":3,"mirror_url":null,"open_issues_count":3,"forks":3,"open_issues":3,"watchers":12,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6"},"html":{"href":"https://github.com/RadPad/react-sprite-animator/pull/6"},"issue":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/issues/6"},"comments":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/issues/6/comments"},"review_comments":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6/comments"},"review_comment":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/pulls/6/commits"},"statuses":{"href":"https://api.github.com/repos/RadPad/react-sprite-animator/statuses/72b3b32c0a4ebc6be07387994330e9153511c964"}}}}
{"actor":{"display_login":"dlindenkreuz"}}