<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GitHub &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/github/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Tue, 09 Nov 2010 02:44:18 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>JavaScriptでAS風のEnterFrameの実装を考えてみる</title>
		<link>https://blog.mach3.jp/2010/11/09/js-enterframe-like-as.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 09 Nov 2010 02:44:18 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[GitHub]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jsdoit]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=1068</guid>

					<description><![CDATA[jQueryのアニメーション機能はあまりにも便利ですが、 刻々と位置情報などを更新していくタイプの処理には向いていません。 こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、 似たような実 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>jQueryのアニメーション機能はあまりにも便利ですが、<br />
刻々と位置情報などを更新していくタイプの処理には向いていません。<br />
こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、<br />
似たような実装をJavaScriptで出来ないだろうか、というのが今回の趣旨です。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh6.ggpht.com/_JJkNs5Ixl70/TNi0gYIE9NI/AAAAAAAABFU/aHSbRQxDMUM/201011091137.png" alt="EnterFrame on JavaScript"/></figure>



<p></p>



<span id="more-1068"></span>



<h2 class="wp-block-heading">生のsetInterval/setTimeoutでいいんじゃない？</h2>



<p>ごもっとも。そんなに複雑にはなりませんしね。<br />
ただ、もうちょっと直感的に扱いたかったり、管理し易いクラスが欲しかった。<br />
さらに強いて言えば、「書いてみたかった」のです。</p>



<p>以下に、2通りのパターンをライブラリにしてみました。<br />
さりげなくjsdo.itデビューも果たしてみましたよ！</p>



<p>※いずれもjQueryを使用</p>



<h2 class="wp-block-heading">Timeline.js</h2>



<p>jQueryのbind/triggerを使ってイベントを拾っていくタイプです。<br />
AS3のaddEventListenerに最も近くて馴染み易いのではないでしょうか。<br />
…相変わらずコメントのほうが長い！</p>



<dl>
<dt>Source</dt>
<dd><a href="https://github.com/mach3/js-timeline-enterframe/blob/master/timeline.js">timeline.js at master from mach3&#8217;s js-timeline-enterframe &#8211; GitHub</a></dd>
<dt>Demo</dt>
<dd><a href="http://jsdo.it/mach3/wvRl">JavaScriptでEnterFrame：(1) Timeline.js &#8211; jsdo.it</a></dd>
</dl>



<h3 class="wp-block-heading">使い方</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> tl = <span class="hljs-keyword">new</span> Timeline( <span class="hljs-number">30</span> ); <span class="hljs-comment">// 引数はfps</span>
tl.bind( <span class="hljs-string">"enterFrame"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> } );
tl.start(); <span class="hljs-comment">// タイムライン開始</span>
</code></span></pre>


<p>コンストラクタの引数は省略可能。FPSの初期値は30です。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> func = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> };
tl.bind( tl.EVENT_ENTER_FRAME, func ); <span class="hljs-comment">// イベントリスナの追加</span>
tl.unbind( tl.EVENT_ENTER_FRAME, func ); <span class="hljs-comment">// イベントリスナの削除</span>
</code></span></pre>


<p>イベントリスナを削除したい時用に、unbindのwrapperも用意してございます。<br />
また、イベント名（enterFrame）は定数<em>EVENT_ENTER_FRAME</em>に格納してあります。</p>



<h2 class="wp-block-heading">EnterFrame.js</h2>



<p>こちらはもう少し簡略化したタイプで、わざわざjQueryのbind/triggerを介しません。<br />
若干のパフォーマンス向上が見込めるのではないかと予想。<br />
ただ、ActionScriptの実装とはだいぶかけ離れてしまった…</p>



<dl>
<dt>Source</dt>
<dd><a href="https://github.com/mach3/js-timeline-enterframe/blob/master/enterframe.js">enterframe.js at master from mach3&#8217;s js-timeline-enterframe &#8211; GitHub</a></dd>
<dt>Demo</dt>
<dd><a href="http://jsdo.it/mach3/9pRA">JavaScriptでEnterFrame：(2) EnterFrame.js &#8211; jsdo.it</a></dd>
</dl>



<h3 class="wp-block-heading">使い方</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> ef = <span class="hljs-keyword">new</span> EnterFrame( <span class="hljs-number">30</span> ); <span class="hljs-comment">// インスタンス生成</span>
ef.add( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> });
ef.start();
</code></span></pre>


<p>addメソッドでイベントリスナを追加。その他はTimelineと同様です。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> func = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> } );
ef.add( func ); <span class="hljs-comment">// イベントリスナの追加</span>
ef.remove( func ); <span class="hljs-comment">// イベントリスナの削除</span>
</code></span></pre>


<p>削除にはremoveメソッドを使用します。</p>



<h2 class="wp-block-heading">まとめ</h2>



<p>画面いっぱい使ってヌルヌル動くギャラリーなんかは、<br />
いがいと作り易いかもしれないですね。</p>



<h2 class="wp-block-heading">追記 : 2013/10/13</h2>



<p>今なら requestAnimationFrameとかもあるので、setTimeout等を使うより<br />
こちらがある場合は利用した方がよさそうですね。<br />
そのうち記事になると思います。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
