<p><strong>วิà¸à¸µà¸à¸³ html animation à¸à¹à¸§à¸¢ greensock tween js</strong></p>
<p>à¸à¸±à¸§à¸à¸¢à¹à¸²à¸ <a href="http://codebee.co.th/labs/examples/greensock-tween-js/" title="à¸à¸±à¸§à¸à¸¢à¹à¸²à¸à¸à¸²à¸£à¸à¸³ html animation &#038; movement" target="_blank">http://codebee.co.th/labs/examples/greensock-tween-js/</a></p>
<p>Greensock Tween à¹à¸à¹à¸ tween engine à¸à¸µà¹à¹à¸à¹à¹à¸à¸´à¸¡à¹à¸à¸´à¸à¸à¸²à¸à¸ าษา action script à¸à¸µà¹à¹à¸à¹à¸ªà¸³à¸«à¸£à¸±à¸à¹à¸à¸µà¸¢à¸à¹à¸à¸£à¹à¸à¸£à¸¡à¸à¸à¹à¸à¸£à¸<br />
à¸à¹à¸à¸¡à¸²à¹à¸à¹à¸à¸¹à¸à¸à¸±à¸à¸à¸²à¹à¸«à¹à¹à¸à¹à¸à¸²à¸à¹à¸à¹à¸à¸±à¸à¸ าษา javascript à¸à¸¶à¸à¹à¸£à¸µà¸¢à¸à¸§à¹à¸² greensock tween js<br />
<!--more--></p>
<p>à¸à¸¸à¸à¹à¸à¹à¸à¸à¸à¸ Greensock tween à¸à¸·à¸ à¹à¸à¹à¸à¸²à¸à¸à¹à¸²à¸¢ มีà¸à¸§à¸²à¸¡à¸«à¸¥à¸²à¸à¸«à¸¥à¸²à¸¢à¹à¸¥à¸°à¸¢à¸·à¸à¸«à¸¢à¸¸à¹à¸à¹à¸à¸à¸²à¸£à¹à¸à¹à¸à¸²à¸à¸¡à¸²à¸ à¹<br />
à¹à¸¥à¸°à¸à¸µà¹à¸ªà¸³à¸à¸±à¸ สามารà¸à¸à¸³à¹à¸à¹à¸à¹à¸à¸²à¸à¹à¸à¹à¹à¸à¸à¸à¸£à¸µ ๠à¹à¸¡à¹à¸¡à¸µà¸à¹à¸²à¹à¸à¹à¸à¹à¸²à¸¢</p>
<p><strong>à¹à¸£à¸´à¹à¸¡à¹à¸à¹à¸à¸²à¸ Greensock Tween </strong></p>
<p>1. download greensock tween js à¹à¸à¹à¸à¸µà¹ <a href="https://greensock.com" title="greensock tween js" target="_blank">https://greensock.com</a></p>
<p>2. สรà¹à¸²à¸à¹à¸à¸¥à¹ index.html à¸à¸¶à¹à¸à¸¡à¸²à¸à¸£à¸±à¸à¹à¸¥à¹à¸§à¸à¸³à¸à¸²à¸£à¹à¸£à¸µà¸¢à¸à¹à¸à¹à¸à¸²à¸ TweenMax.min.js à¹à¸¥à¸° à¹à¸à¸¥à¹ jquery.min.js</p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" ><;script type="text/javascript" src="js/greensock/TweenMax.min.js">;<;/script>; 
<;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">;<;/script>;</pre>
<p>3. à¸à¹à¸à¹à¸à¹à¸£à¸²à¸à¸°à¸¥à¸à¸à¸à¸³ tween à¹à¸«à¹à¸à¸±à¸à¸£à¸¹à¸à¸à¸¹à¸à¸°à¸à¸£à¸±à¸ สรà¹à¸²à¸ tag img มาà¹à¸ body à¹à¸¥à¸°à¸à¸±à¹à¸à¸à¸·à¹à¸ class วà¹à¸² myimg</p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" ><img class="myimg" src="greensock-tween-js.png"/></pre>
<p>4. à¹à¸à¸µà¸¢à¸à¸à¸³à¸ªà¸±à¹à¸ javascript à¹à¸«à¹à¸à¸¥à¸²à¸ª myimg มี rotation หมุà¸à¹à¸à¸à¸µà¹ 50 à¸à¸à¸¨à¸² à¹à¸¥à¸°à¸à¸¥à¸±à¸à¸¡à¸²à¸à¸µà¹ 0 à¸à¸à¸¨à¸²à¹à¸«à¸¡à¸·à¸à¸à¹à¸à¸´à¸¡<br />
 à¸à¸°à¹à¸à¹à¹à¸à¹à¸à¸à¸£à¸°à¸¡à¸²à¸à¸à¸µà¹à¸à¸£à¸±à¸</p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" ><script> 
start(); 
function start() 
{ 
	TweenLite.to($(".myimg"), 1, {css:{rotation:50},onComplete:repeat}); 	 
} 
function repeat() 
{ 
	TweenLite.to($(".myimg"), 1, {css:{rotation:-50},onComplete:start}); 	 
} 
 
</script></pre>
<p>หรืà¸à¸à¹à¸²à¸à¹à¸à¸à¸à¸²à¸£à¹à¸«à¹à¸à¸¥à¸²à¸ª myimg หมุà¸à¹à¸à¸à¸à¹à¸à¹à¸à¸·à¹à¸à¸ à¹à¸«à¹à¹à¸£à¸²à¹à¸à¸¥à¸µà¹à¸¢à¸à¹à¸à¹à¸à¹ TweenMax à¹à¸¥à¸°à¹à¸à¹<br />
property repeat à¸à¸à¸ TweenMax à¹à¸à¹à¸²à¸¡à¸²à¸à¹à¸§à¸¢ à¸à¸°à¹à¸à¹à¸à¸³à¸ªà¸±à¹à¸à¸à¸£à¸°à¸¡à¸²à¸à¸à¸µà¹à¸à¸£à¸±à¸</p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" > 
start(); 
function start() 
{ 
	TweenMax.to($(".myimg"), 1, {repeatDelay:0,repeat:10,css:{rotation:360}}); 	 
} 
</pre>
<p>à¹à¸£à¸²à¸ªà¸²à¸¡à¸²à¸£à¸à¹à¸à¸´à¹à¸¡à¸£à¸¹à¸à¹à¸à¸à¸à¸à¸à¸à¸²à¸£ tween à¹à¸à¹à¸à¹à¸§à¸¢à¸à¸²à¸£à¹à¸ªà¹ property ease à¹à¸«à¹à¸à¸±à¸ tween<br />
à¹à¸£à¸´à¹à¸¡à¹à¸à¸¢à¸à¸²à¸£à¹à¸£à¸µà¸¢à¸à¹à¸à¹ EasePack.min.js</p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" > 
<script type="text/javascript" src="js/greensock/EasePack.min.js"></script> 
</pre>
<p>à¹à¸à¸´à¹à¸¡à¸£à¸¹à¸à¹à¸à¸à¸à¸²à¸£à¸à¸§à¸µà¸</p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" > 
TweenMax.to($(".myimg"), 1, {repeatDelay:0,repeat:10,css:{rotation:360},ease:Back.easeInOut}); 	 
</pre>
<p><strong>สรุà¸à¸à¸²à¸£à¹à¸à¹à¸à¸²à¸</strong><br />
à¸à¸²à¸à¸à¸±à¸§à¸à¸¢à¹à¸²à¸à¸à¸°à¹à¸à¹à¸à¸²à¸à¹à¸à¹ rotation à¹à¸£à¸²à¸ªà¸²à¸¡à¸²à¸£à¸ tween à¸à¸³à¹à¸«à¸à¹à¸ x,y หรืภscaleX, scaleY à¹à¸à¹à¸à¹à¸§à¸¢à¸à¸°à¸à¸£à¸±à¸<br />
หรืà¸à¹à¸¡à¹à¹à¸à¹ CSS properties à¸à¸§à¸ background-color, opacity à¹à¸¥à¸°à¸à¸·à¹à¸ ๠à¸à¹à¸ªà¸²à¸¡à¸²à¸£à¸à¸à¸§à¸µà¸à¹à¸à¹à¹à¸à¹à¸à¸à¸±à¸à¸à¸£à¸±à¸</p>
<p>à¸à¸±à¸§à¸à¸¢à¹à¸²à¸ <a href="http://codebee.co.th/labs/examples/greensock-tween-js/" title="à¸à¸±à¸§à¸à¸¢à¹à¸²à¸à¸à¸²à¸£à¸à¸³ html animation &#038; movement" target="_blank">http://codebee.co.th/labs/examples/greensock-tween-js/</a></p>
<p><strong>à¹à¸à¹à¸à¸à¸µà¹à¹à¸ªà¸£à¹à¸à¹à¸¥à¹à¸§</strong></p>
<pre class="lang:default decode:true " title="วิà¸à¸µà¹à¸à¹ greensock tween js" > 
<html> 
<head> 
<title>Greensock Tween JS</title> 
 
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
</head> 
<style> 
body{ 
	text-align:center; 
	margin-top:100px; 
} 
</style> 
<body> 
<img width="300" class="myimg" src="greensock-tween-js.png"/> 
</body> 
 
<script> 
start(); 
function start() 
{ 
	TweenLite.to($(".myimg"), 1, {css:{rotation:50},onComplete:repeat}); 	 
} 
function repeat() 
{ 
	TweenLite.to($(".myimg"), 1, {css:{rotation:-50},onComplete:start}); 	 
} 
 
</script> 
</html> 
</pre>

วิธีทำ html animation ด้วย greensock tween js
