JSTweener - JavaScript ã§ã¢ã¼ã·ã§ã³ãã¥ã¤ã¼ã³ããã©ã¤ãã©ãª
- http://coderepos.org/share/wiki/JSTweener
- http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/
JS ã§ã¢ã¼ã·ã§ã³ãã£ã¼ã³ããã®ã«ãJSTween ã¨ããã©ã¤ãã©ãªãããã®ã§ãããä¸ã¤ä¸ã¤ã®ã¢ã¼ã·ã§ã³ã§ setTimeout(func, 0) ã§åãã¦ã¦ãããå¢ããã°å¢ããã»ã©éããªã£ãããstyle è¨å®ãçµæ§é¢åã ã£ãããä¸åº¦ã«è¤æ°ããããã£ç»é²ãã§ããªãã£ããããã®ã§ãèªåã§ã©ã¤ãã©ãªãä½ã£ã¦ã¿ã¾ãããã²ã£ã¤ãâã¹ã¿ã¼ã JSTweener ã§åããããä½æã§å
¨ç¶éããªãã¾ããã
ã³ã¼ãä¾ã§ãããã²ã£ã¤ãã¹ã¿ã¼ã§ã®ãã¥ã¤ã¼ã³å¦çã¯
JSTweener.addTween(el.style, { time: tm, transitions: 'easeOutExpo', onComplete: function() { moveStar(el) }, width: size, height: size, left: mousePoint.x + Math.random() * 100 - 50, top: mousePoint.y + Math.random() * 100 - 50 });
ã®ããã«æ¸ãã¾ããAPI ã¯ã¾ãã¾ Tweenerãpenner's easing é¢æ°ã Tweener ã®ã JS ã«ç§»æ¤ãã¦ãã®ã§ãTweener ã§ä½¿ããã®ã¯ãã®ã¾ã¾ä½¿ããã¨ãåºæ¥ã¾ãã
ãã ã»ãã¨ã«ã·ã³ãã«ãªã¡ã¤ã³ã®é¨åã®å¦çããæ¸ãã¦ãªãã®ã§ãã¢ã«ãã¡(ãã©ã¦ã¶ã«ãã£ã¦ CSS ã§ã®æ¸ãæ¹ãç°ãªããã)å¤ããã§ã¼ãã¢ã¦ãããªãã㯠onUpdate ã«ã³ã¼ã«ããã¯ç»é²ãã¦èªåã§å¦çãæ¸ããªãã¦ã¯ãªãã¾ããããã ãã使ããã㪠top/left/height/width/marginXXXX ãªã©ã¯ä½ãããã¨ãå¤ãå¤åã§ããã®ã§ã使ãã©ããã«ãã£ã¦ã¯ç´ ã§ååã ã£ãããã¾ãã