JavaScriptで水平方向のdiv
移動をアニメーション化しようとしています。200px
以下のコードはピクセルをジャンプさせますが、jQueryを使用せずにアニメーション化されたように見せるための方法はありますか?
function () {
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = "200px";
}
JavaScriptで水平方向のdiv
移動をアニメーション化しようとしています。200px
以下のコードはピクセルをジャンプさせますが、jQueryを使用せずにアニメーション化されたように見せるための方法はありますか?
function () {
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = "200px";
}
基本的なアニメーションの設定は次のとおりです。
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まで直線的にスライドします。
これはCSS3-Transitionを介して簡単に行うことができます:
#challengeOneImageJavascript {
-webkit-transition: left .2s;
-moz-transition: left .2s;
-o-transition: left .2s;
transition: left .2s;
}
ただし、IE9以前のバージョンのブラウザではサポートされていません。
私はたくさんの研究をしました、そして私はついにそれを本当にうまくやる方法を学びました。
プログラムを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
}
注:描画関数を呼び出す行の後には何も実行されないため、実行するすべてのものを描画関数を呼び出す行の前に配置する必要があります。
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);
注: これは、アイデアを与えるための非常に簡単な方法です。
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そのコードブロックには多くの改善が必要ですが、それでうまくいくはずです...
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);
CustomAnimationは、純粋なjsで記述されたhtml要素をアニメーション化するための小さなライブラリです。このライブラリを使用できます。