react-state-animation
Version:
Simple animations with React state
66 lines (64 loc) • 4.31 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ReactStateAnimation Demo for canvas setState performance</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../../examples/common/examples.css">
</head>
<body>
<header>react-state-animation for canvas performance</header>
<div class="wrap">
<div class="description">
<div>
<a href="https://github.com/tejitak/react-state-animation" target="_blank">react-state-animation</a> provides a capability to update React component's state by requestAnimationFrame with a simple APIs.
</div>
<div>
This works with regular <a href="http://facebook.github.io/react/" target="_blank">React</a> component and <a href="https://github.com/Flipboard/react-canvas" target="_blank">React Canvas</a>. <a href="https://github.com/tejitak/react-state-animation" target="_blank">View on GitHub</a>
</div>
<div></div>
</div>
<section>
<code>
</code>
<small>This demo is for performance check between React Canvas with setState (asynchronous and batch) and without setStates. Press start to check animation</small>
</section>
<section>
<div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resumeBtn">Resume</button>
</div>
</section>
<div id="demo"></div>
</div>
<footer>
<div class="social_container">
<div class="social_item">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tejitak.github.io/react-state-animation/examples/demo/canvas.html" data-via="" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="social_item">
<iframe src="http://ghbtns.com/github-btn.html?user=tejitak&repo=react-state-animation&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
</div>
<div class="social_item" style="position: relative; top: -4px;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=556655494444828&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://tejitak.github.io/react-state-animation/examples/demo/canvas.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<div class="social_item">
<a href="http://b.hatena.ne.jp/entry/http://tejitak.github.io/react-state-animation/examples/demo/canvas.html" class="hatena-bookmark-button" data-hatena-bookmark-title="Galaxy Octopus with React Canvas" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>
</div>
<div>Design and Implemented by <a href="https://twitter.com/tejitak" target="_blank">tejitak</a></div>
</footer>
<script src="../../build/canvas.js"></script>
</body>
</html>