1つは、JSアニメーションの本質です
JavaScriptアニメーションは、本質的に、タグを動かすことです。ラベルを移動するには、高さと幅、左マージン、上マージン、透明度などのラベルプロパティを変更することが重要です。
JavaScriptアニメーションの本質は、ラベルの特定の属性を非常に短い間隔（ミリ秒）で継続的に変更することです。
通常、タイマーを使用してアニメーション効果を得ることができます。
タイマー、setInterval、setTimeout、およびrequestAnimationFrameを選択できます。
例として、div.boxの動きを制御します。
setInterval
let aniFun= function(){
// 动画代码
};
let myset = setInterval(aniFun,30);
let box = document.getElementById("box");
let dis = 0;
let speed = 10 ;
let aniFun= function(){
// 动画代码
dis += speed;
box.style.transform=`translateX(${
dis}px)`;
};
let myset2 = setInterval(aniFun,30);
setTimeout
let aniFun= function(){
// 动画代码
myset2 = setTimeout(aniFun,30);
};
let myset2 = setTimeout(aniFun,30);
let box = document.getElementById("box");
let dis = 0;
let speed = 10 ;
let aniFun= function(){
// 动画代码
dis += speed;
box.style.transform=`translateX(${
dis}px)`;
myset2 = setTimeout(aniFun,30);
};
let myset2 = setTimeout(aniFun,30);
requestAnimationFrame
使用法はsetTimeoutと非常によく似ています。アニメーション関数の最後に、もう一度自分自身を呼び出す必要があります。
let aniFun= function(){
// 动画代码
req = requestAnimationFrame(aniFun);
};
let req = requestAnimationFrame(aniFun);
let box = document.getElementById("box");
let dis = 0;
let speed = 10 ;
let aniFun= function(){
// 动画代码
dis += speed;
box.style.transform=`translateX(${
dis}px)`;
req = requestAnimationFrame(aniFun);
};
let req = requestAnimationFrame(aniFun);
もっとお勧めしrequestAnimationFrameます。
requestAnimationFrameコールバック関数の実行タイミングを決定するのはシステムです。画面のリフレッシュレートが60Hzの場合、コールバック関数は16.7ms（1000/60）ごとに実行されます。リフレッシュレートが75Hzの場合、時間間隔は1000/75 = 13.3msになります。つまり、requestAnimationFrameのペースは、システムのリフレッシュペースに従います。- ページがフォーカスを失うと（別のページに切り替える）、
requestAnimationFrameアニメーションは一時停止してシステムリソースを解決します。
次に、イベントを使用してアニメーションをトリガーします
ボタンをクリックしてdiv.boxをアクティブにします。
<div id="box" class="box"></div>
<button id="btn">点击开始运动</button>
1.基本操作
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let dis = 0;
let speed = 30;
let req ;
let BoxGo = function(){
dis += speed ;
box.style.transform=`translateX(${
dis}px)`;
req = requestAnimationFrame(BoxGo);
};
btn.addEventListener("click",function () {
BoxGo();
});
上記のコードには2つの問題があります。
-
ボタンを連続してクリックすると、ボックスは継続的に加速し続けます。
解決策：ボタンをクリックした後、新しいアニメーションを開始する前に前のアニメーションを停止します。
-
ボックスは停止せずに右に移動し続けます。
解決策は次のとおりです。
2.アニメーションの距離を設定します
距離を超えるとアニメーションが停止します。
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let dis = 0;
let speed = 30 ;
let target = 500 ;
let BoxGo = function(){
dis += speed ;
// 限制运动距离
if( dis >= target){
dis = target ;
cancelAnimationFrame(aniFun);
}else{
console.info(dis);
box.style.transform=`translateX(${
dis}px)`;
aniFun = requestAnimationFrame(BoxGo);
}
};
btn.addEventListener("click",function () {
// 防止重复叠加动画：开始新的动画前，取消之前的动画。
cancelAnimationFrame(aniFun);
BoxGo();
});
3.アニメーション時間を設定します
アニメーション時間を設定し、時間を超えたらアニメーションを停止します。
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let dis = 0;
let speed = 30;
let startTime = 0;
let aniTime = 500 ; // 动画时间为500毫秒。
let BoxGo = function(){
let time = new Date();
let p = time - startTime ;
dis += speed ;
// 限制运动时间 。到了 0.5s 就停止
console.info( p );
if( p >= aniTime ){
cancelAnimationFrame(aniFun);
}else{
box.style.transform=`translateX(${
dis}px)`;
aniFun = requestAnimationFrame(BoxGo);
}
};
btn.addEventListener("click",function () {
// 防止重复叠加动画：开始新的动画前，取消之前的动画。
cancelAnimationFrame(aniFun);
startTime = new Date();
BoxGo();
});
4.アニメーションの時間と距離を設定します
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let speed = 30;
let aniTime = 500 ; // 运动时间 500 毫秒
let aniDis = 1500 ; // 运动距离 500px
let startTime = 0;
let BoxGo = function(){
let time = new Date();
let pastTime = time - startTime ; // 已经运动的时间点
console.info(pastTime);
let past = Math.min(pastTime/aniTime,1) ; // 0-1
// 限制运动时间 。到了 0.5s 就停止
if( pastTime >= aniTime ){
pastTime = 500 ;
cancelAnimationFrame(aniFun);
}else{
box.style.transform=`translateX(${
past*aniDis}px)`;
aniFun = requestAnimationFrame(BoxGo);
}
};
btn.addEventListener("click",function () {
// 防止重复叠加动画：开始新的动画前，取消之前的动画。
cancelAnimationFrame(aniFun);
startTime = new Date();
BoxGo();
});
3、アプリケーション
画像がフェードインおよびフェードアウトします。
<img src="images/pic1.jpg" alt="" id="pic">
let pic = document.getElementById("pic");
let aniTime = 500; // 动画时间
let startTime = new Date();
let aniFun = function(){
let pastTime = new Date() - startTime ;
let past = Math.min( pastTime / aniTime ,1 ) ;
pic.style.opacity = past ;
if( past >= 1){
cancelAnimationFrame(req);
}else{
req = requestAnimationFrame(aniFun);
}
};
let req = requestAnimationFrame(aniFun);
関数にカプセル化：
let fadeAni = function({
duration=500,
targetV=1,
startV=0,
element
}={
}){
let aniTime = duration; // 动画时间
let startTime = new Date();
let aniFun = function(){
let pastTime = new Date() - startTime ;
let past = Math.min( pastTime / aniTime ,1 ) ;
element.style.opacity = (targetV- startV)* past + startV ;
if( past >= 1){
cancelAnimationFrame(req);
}else{
req = requestAnimationFrame(aniFun);
}
};
let req = requestAnimationFrame(aniFun);
};
let pic = document.getElementById("pic");
// 淡入
fadeAni({
duration:1000,
startV:0,
targetV:1,
element:pic
});
let pic = document.getElementById("pic");
// 淡出
fadeAni({
duration:1000,
startV:1,
targetV:0,
element:pic
});