13

JavaScriptで水平方向のdiv移動をアニメーション化しようとしています。200px

以下のコードはピクセルをジャンプさせますが、jQueryを使用せずにアニメーション化されたように見せるための方法はありますか？

function () {
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = "200px";
}
4

7 に答える 7

46

基本的なアニメーションの設定は次のとおりです。

function animate(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

使用するには：

animate(
    document.getElementById('challengeOneImageJavascript'),
    "left","px",0,200,1000
);

この例では、指定された要素をアニメーション化して、1秒（1000ミリ秒）の時間で0pxから200pxまで直線的にスライドします。

于 2012-06-26T18:07:32.087 に答える
9

これはCSS3-Transitionを介して簡単に行うことができます：

#challengeOneImageJavascript {
    -webkit-transition: left .2s;
       -moz-transition: left .2s;
         -o-transition: left .2s;
            transition: left .2s;
}

ただし、IE9以前のバージョンのブラウザではサポートされていません。

于 2012-06-26T18:02:40.553 に答える
2

私はたくさんの研究をしました、そして私はついにそれを本当にうまくやる方法を学びました。

プログラムをwindow.onload関数に配置するのが好きです。そうすれば、ページの読み込みが完了するまでコードが実行されません。

アニメーションを作成するには、関数を作成し（これを描画関数と呼びます）、予約語を除いて任意に呼び出します。次に、描画関数の最後でrequestAnimationFrame関数を呼び出し、関数の名前を付けます。次のフレームと呼ばれます。

requestAnimationFrame関数を使用する前に、宣言する必要があります。

以下のコードを参照してください。

window.onload = function() {
  function draw() { //  declare animation function
    context.fillStyle = "white";
    context.fillRect(0, 0, 400, 400);
    requestAnimationFrame(draw); // make another frame
  }
  var requestAnimationFrame = // declare the 
    window.requestAnimationFrame || // requestAnimationFrame
    window.mozRequestAnimationFrame || // function
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
  draw(); // call draw function
}

注：描画関数を呼び出す行の後には何も実行されないため、実行するすべてのものを描画関数を呼び出す行の前に配置する必要があります。

于 2014-10-29T18:54:53.313 に答える
1

JavaScriptでは、setInterval関数を使用する必要があります。そうしないと、jQueryで次のように実行できます。

$('#challengeOneImageJavascript').animate({left: '=-5'});

ニーズに応じたアダスト値（ ）およびまたは5を介した方向=-=+

Vanilla JavaScriptの場合：

var interval;
var animate = function(id, direction, value, end, speed){
    var div = document.getElementById(id);
    interval = setInterval(function() {
       if (+(div.style) === end) {
          clearInterval(interval);
          return false;
       }
       div.style[direction] += value; // or -= as per your needs
    }, speed);
}

そして、あなたはそれを次のように使うことができます：

animate('challengeOneImageJavascript', 'left', 5, 500, 200);

アニメーションをいつでも停止するには、次のようにします。

clearInterval(interval);

注： これは、アイデアを与えるための非常に簡単な方法です。

于 2012-06-26T18:03:14.920 に答える
1

javascriptタイムアウト関数を使用し、css値を少しずつ変更する必要があります。最も簡単な方法は、しきい値に達するまで毎回設定された量だけインクリメントすることです。これにより、線形アニメーションが得られます。これは、swingほぼSカーブのようなベジェ曲線に従うjQueryのデフォルトのアニメーションと比較して、不格好で素人っぽく見えます。

テストされていないコードは線形アニメーションを実行する必要があります

var lefty = 0;
var animate = function(){
    lefty += 20;
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = lefty +"px";
    if(lefty < 200)
      setTimeout(animate(),100);
}

animate()

nbそのコードブロックには多くの改善が必要ですが、それでうまくいくはずです...

于 2012-06-26T18:10:56.373 に答える
0

cssを介した最も簡単な方法。

https://jsfiddle.net/pablodarde/5hc6x3r4/

translate3dは、GPUで実行されるハードウェアアクセラレーションを使用します。 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

HTML

<div class="movingBox"></div>

CSS

.movingBox {
  width: 100px;
  height: 40px;
  background: #999;
  transform: translate3d(0,0,0);
  transition: all 0.5s;
}

.moving {
  transform: translate3d(200px,0,0);
  background: #f00;
}

JavaScript

const box = document.getElementsByClassName('movingBox')[0];

setTimeout(() => {
    box.className += ' moving';
}, 1000);
于 2017-05-10T13:00:11.807 に答える
0

CustomAnimationは、純粋なjsで記述されたhtml要素をアニメーション化するための小さなライブラリです。このライブラリを使用できます。

于 2017-08-16T06:32:20.927 に答える