- 締切済み
javascriptで滑らかに画像を動かす方法
androidアプリでjavascriptでトランプゲームを作ろうとしています。 実際にディーラーから、トランプが配られたみたいに滑らかにトランプを動かしたいのですが、何を使えばできるのでしょうか？
- faneda
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- b0a0a
- ベストアンサー率49% (156/313)
requestAnimationFrameを使う
- babu_baboo
- ベストアンサー率51% (268/525)
かんたんなことを、こむずかしく。 ぜんかくくうはくは、はんかくに。 いめーじてきに、くばられるかーどは、どんなうごきをするの？ <!DOCTYPE html> <title>ぎゃらが？</title> <meta charset="UTF-8"> <style> #inv { position: absolute; } </style> <body> <h1>アニメーション</h1> <p> <img id ="inv" alt="インベーダ" width="36" height="24" src="data:image/gif;base64,R0lGODlhDAAIAIAAAP///wAAACwAAAAADAAIAAACEoQRGWfqip6Esc1pV9S1p85YBQA7"> <script> (function () { var win = this; if ('undefined' === typeof this.requestAnimationFrame) { this.requestAnimationFrame = this.requestAnimationFrame || this.webkitRequestAnimationFrame|| this.mozRequestAnimationFrame || this.oRequestAnimationFrame || this.msRequestAnimationFrame || function (callback, that) { var tmpFunc = function () { var timestamp = +(new Date); //(new Date).getTime (); callback (timestamp); //callback.call (that, timestamp); }; win.setTimeout (tmpFunc, Math.floor (1000/60)); }; } //_____________ var ToAnimate = new Function; ToAnimate.create = (function (callBackFunction, operatingTime) { if (1 > arguments.length) throw new Error ('Invalid argument.'); if ('function' !== typeof callBackFunction) throw new Error ('Not function.'); if ('undefined' === typeof operatingTime) operatingTime = -1; //無限に return { state : null, start : (function (opTime_) { if (this.state) return; this.state = true; if (! isNaN (opTime_)) operatingTime = opTime_; var now = (new Date).getTime (); var AnimationEndTime = operatingTime + now; (function cb (timeStamp) { var opTime = AnimationEndTime - timeStamp; var rate = opTime / operatingTime; if (1 < rate) { rate = 1; callBackFunction (rate); } else if (rate < 0) { rate = 0; callBackFunction (rate); } else { callBackFunction (rate); requestAnimationFrame (cb); } }) (now); }), stop : (function () { this.state = false; }) }; }); //_____________ this.ToAnimate = ToAnimate; }).call (window); var s = document.getElementById ('inv').style; function inv (rate) {//range 0-1 var x = 320 + Math.cos (rate*10) * 300; var y = 600 - rate * 600; s.top = y + 'px'; s.left = x + 'px'; } var anime = ToAnimate.create (inv, 3000);//callback, time(ms) anime.start (); </script>
- play_with_you
- ベストアンサー率37% (112/301)
jQueryを導入するのが一番楽なんじゃないでしょうか。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
補足
ご回答ありがとうございます。 jQueryのどの機能を使用すれば実現できますか？