首先，同样的代码左边有240个画笔监视器，右边有60个画笔监视器，但是动画中粒子的移动速度是不同的。
原因是基于帧的动画显示效果根据机器的帧速率而变化。
动画移动相同的距离，但在240 画笔显示器上每秒移动240 次，在60 画笔显示器上每秒移动60 次。这使得动画在高刷新显示器上移动得更快。
解决办法是更换基于时间的JS动画库。
下面是再现meethigher/animation-and-frames: 动画和帧的示例。
框架动画.html
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题框动画/标题
风格
* {
边距： 0;
填充： 0；
}
#粒子-js {
绝对位置：
宽度： 100%；
高度： 100%；
背景颜色： #000;
}
#粒子-js画布{
位置：是固定的。
顶部： 0;
右： 0;
底部： 0;
左： 0；
}
/风格
/头
身体
div id=\’粒子-js\’/div
脚本src=\’https://cdn.jsdelivr.net/articles.js/2.0.0/articles.min.js\’/script
脚本
让lastTime=Performance.now();
粒子JS（‘粒子-js’，{
\’粒子\’: {
\’号码\’: {
\’值\’ : 180,
\’密度\’: {
“启用”: 为真，
‘价值区域’: 800
}
},
\’颜色\’: {
\’值\’: \’#ffffff\’
},
\’形状\’: {
\’输入\’: \’日元\’,
\’中风\’: {
‘宽度’: 0,
\’颜色\’: \’#000000\’
},
\’多边形\’: {
\’nb_sides\’: 5
},
\’图像\’: {
\’src\’: \’img/github.svg\’,
\’宽度\’ : 100,
‘高度’: 100
}
},
\’不透明度\’: {
“价值”: 0.5，
‘随机’:假，
\’动画\’: {
‘启用’:假，
‘速度’: 1，
\’不透明度_最小值\’: 0.1,
“同步”: 假
}
},
\’尺寸\’: {
“价值”: 2，
“随机”: 正确，
\’动画\’: {
‘启用’:假，
‘速度’: 40，
\’尺寸最小值\’: 0.1,
“同步”: 假
}
},
\’line_linked\’: {
‘启用’:假，
“距离”: 150，
\’颜色\’: \’#ffffff\’,
“不透明度”: 0.4，
\’宽度\’: 1
},
\’移动\’: {
“启用”: 为真，
‘速度’: 2，
\’方向\’: \’右下\’,
‘随机’:假，
‘直’:假，
\’out_mode\’: \’输出\’,
\’景点\’: {
‘启用’:假，
\’旋转X\’: 600，
‘旋转Y’: 1200
}
}
},
\’互动\’: {
\’detect_on\’: \’画布\’,
\’事件\’: {
\’悬停\’: {
‘启用’:假，
\’模式\’: \’排斥\’
},
\’onclick\’: {
“启用”: 为真，
\’模式\’ : \’推\’
},
“调整大小”: true
},
\’模式\’: {
\’抢\’: {
‘距离’: 400，
\’line_linked\’: {
“不透明度”: 1
}
},
\’泡沫\’: {
‘距离’: 400，
‘尺寸’: 40，
\’期间\’: 2,
“不透明度”: 8，
‘速度’: 3
},
\’排斥\’: {
《距离》: 200
},
\’推\’: {
\’粒子_nb\’: 4
},
\’删除\’: {
\’粒子_nb\’: 2
}
}
},
\’retina_detect\’: 正确，
\’config_demo\’: {
\’隐藏卡\’: 假，
\’背景颜色\’: \’#b61924\’,
\’背景图片\’:\’\’,
\’后台位置\’: \’50% 50%\’,
\’background_repeat\’: \’不重复\’,
\’background_size\’: \’封面\’
},
//strong制基于帧的动画是基于时间的，但测试表明它是资源密集型的，运行一段时间后会冻结计算机。改变计划是不合适的。
//\’回调\’: {
//onParticlesUpdate: 函数() {
//const currentTime=Performance.now();
//const deltaTime=(当前时间- 最后时间)/1000 //时间（秒）
//最后时间=当前时间；
//
//const SpeedFactor=deltaTime * 60 //标准化为60 FPS。
//pJSDom[0].pJS.articles.move.speed=6 *speedFactor;
//}
//}
});
//重写绘图函数以包含自定义更新逻辑
constoriginalDraw=pJSDom[0].pJS.fn.articlesDraw;
pJSDom[0].pJS.fn.articlesDraw=函数() {
if (pJSDom[0].pJS.callback pJSDom[0].pJS.callback.onParticlesUpdate) {
pJSDom[0].pJS.callback.onParticlesUpdate();
}
原始Draw.call(pJSDom[0].pJS);
};
/剧本
/身体
/html
时间动画.html
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题时间动画/标题
风格
* {
边距： 0;
填充： 0；
}
#t粒子{
绝对位置：
宽度： 100%；
高度： 100%；
背景颜色： #000;
}
/风格
/头
身体
div id=\’tsarticles\’/div
!–tsarticles库介绍–
脚本src=\’https://cdn.jsdelivr.net/npm/tsarticles@2/tsarticles.bundle.min.js\’/script
脚本
//初始化tsarticle
tsParticles.load(\’tsarticles\’, {
\’fpsLimit\’: 60, //限制帧速率为60 FPS
\’粒子\’: {
\’号码\’: {
“价值”: 180，
\’密度\’: {
“启用”: 为真，
‘价值区域’: 800
}
},
\’颜色\’: {
\’值\’: \’#ffffff\’
},
\’形状\’: {
\’输入\’: \’日元\’,
\’中风\’: {
‘宽度’: 0,
\’颜色\’: \’#000000\’
},
\’多边形\’: {
\’nb_sides\’: 5
},
\’图像\’: {
\’src\’: \’img/github.svg\’,
\’宽度\’ : 100,
‘高度’: 100
}
},
\’不透明度\’: {
“价值”: 0.5，
‘随机’:假，
\’动画\’: {
‘启用’:假，
‘速度’: 1，
\’不透明度_最小值\’: 0.1,
“同步”: 假
}
},
\’尺寸\’: {
“价值”: 2，
“随机”: 正确，
\’动画\’: {
‘启用’:假，
‘速度’: 40，
\’尺寸最小值\’: 0.1,
“同步”: 假
}
},
\’line_linked\’: {
‘启用’:假，
“距离”: 150，
\’颜色\’: \’#ffffff\’,
“不透明度”: 0.4，
\’宽度\’: 1
},
\’移动\’: {
“启用”: 为真，
‘速度’: 2，
\’方向\’: \’右下\’,
‘随机’:假，
‘直’:假，
\’out_mode\’: \’输出\’,
\’景点\’: {
‘启用’:假，
\’旋转X\’: 600，
‘旋转Y’: 1200
}
}
},
\’互动\’: {
\’detect_on\’: \’画布\’,
\’事件\’: {
\’悬停\’: {
“启用”: 假，
\’模式\’: \’排斥\’
},
\’onclick\’: {
“启用”: 为真，
\’模式\’ : \’推\’
},
\’调整大小\’: true
},
\’模式\’: {
\’抢\’: {
‘距离’: 400，
\’line_linked\’: {
“不透明度”: 1
}
},
\’泡沫\’: {
‘距离’: 400，
‘尺寸’: 40，
\’期间\’: 2,
“不透明度”: 8，
‘速度’: 3
},
\’排斥\’: {
《距离》: 200
},
\’推\’: {
\’粒子_nb\’: 4
},
\’删除\’: {
\’粒子_nb\’: 2
}
}
},
\’retina_detect\’: 正确，
\’config_demo\’: {
\’隐藏卡\’: 假，
\’背景颜色\’: \’#b61924\’,
\’背景图片\’:\’\’,
\’后台位置\’: \’50% 50%\’,
\’background_repeat\’: \’不重复\’,
\’background_size\’: \’封面\’
}
});
/剧本
/身体
/html
以上关于#animation和帧率的相关内容摘自网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91635.html
