如何使用requestAnimationFrame与承诺
如何使用requestAnimationFrame与承诺
提问于 2020-12-04 13:00:34
我想用承诺来使用requestAnimationFrame，所以我可以这样使用它
opacityToggle("layername",0).then(i=>"do some stuff after animation ends")但不知道该怎么做。这是我的代码：
function opacityToggle(layerName, opacity) {
if (!layerName) return;
var requestID;
var s = 0;
return animate().then(i => i)
function animate() {
requestID = requestAnimationFrame(animate);
if (s < 1) {
s += 0.01
s = +s.toFixed(2)
console.log('s', layerName, s, opacity);
map.setPaintProperty(layerName, 'fill-opacity', s);
} else {
cancelAnimationFrame(requestID);
return new Promise(resolve => resolve)
}
}
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-04 13:19:22
虽然@Terry有一个简单的解决方案，可以将所有内容包装在承诺构造函数中，但是，如果您只对requestAnimationFrame调用本身进行宣传，您就可以获得承诺的真正力量：
async function opacityToggle(layerName, opacity) { /*
^^^^^ */
if (!layerName) return;
var s = 0;
while (s < 1) {
// ^^^^^
s += 0.01
s = +s.toFixed(2)
console.log('s', layerName, s, opacity);
map.setPaintProperty(layerName, 'fill-opacity', s);
await new Promise(resolve => {
// ^^^^^
requestAnimationFrame(resolve);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
}
}如果您不能使用async/await和/或想用递归方法来完成它，它将是
function opacityToggle(layerName, opacity) {
if (!layerName) return Promise.resolve();
var s = 0;
return animate();
function animate() {
if (s < 1) {
s += 0.01
s = +s.toFixed(2)
console.log('s', layerName, s, opacity);
map.setPaintProperty(layerName, 'fill-opacity', s);
return new Promise(resolve => {
// ^^^^^^
requestAnimationFrame(resolve);
}).then(animate);
// ^^^^^^^^^^^^^^
} else {
return Promise.resolve();
}
}
}Stack Overflow用户
发布于 2020-12-04 13:04:41
您的opacityToggle函数的返回语句稍微复杂化了一些。您只需返回承诺并将所有RAF逻辑封装在其中。这应足以：
function opacityToggle(layerName, opacity) {
if (!layerName) return;
var requestID;
var s = 0;
return new Promise(resolve => {
// Animation steps
function animate() {
if (s < 1) {
s += 0.01
s = +s.toFixed(2)
console.log('s', layerName, s, opacity);
map.setPaintProperty(layerName, 'fill-opacity', s);
requestID = requestAnimationFrame(animate);
} else {
// If animation is complete, then we resolve the promise
cancelAnimationFrame(requestID);
resolve();
}
}
// Start animation
requestID = requestAnimationFrame(animate);
});
}在你的问题中，不清楚你想用什么价值来解决你的承诺。如果您想这样做的话，可以简单地以resolve(yourResolvedValueHere)的形式提供它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65144038
复制相关文章
相似问题
腾讯云开发者
