我可以用JavaScript检测CSS关键帧动画中的百分比
Can I detect with JavaScript where we are percentage wise in a CSS Keyframe animation
我在想。我知道我可以通过监听animationstart、animationsiteration和animationsend事件(显然我们缺少浏览器前缀)来检测CSS动画何时开始、完成或重复,例如:
document.getElementById('identifier')
.addEventListener("animationstart", function(){
// do something...
});
但我想知道,是否有可能确定我们在哪里运行CSS动画,例如,当我们处于关键帧动画的50%时,我如何收听以下内容:
<!DOCTYPE html>
<html>
<head>
<style>
#animateDiv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="animateDiv"></div>
<script>
// what do I do here? How do I listen for the 50% event of the keyframes?
document.getElementById('animateDiv').addEventListener('animation at 50%?', function() {
console.log('got it');
})
</script>
</body>
</html>
我不知道你是否可以从CSS动画中获得确切的关键帧,但你可以使用一些数学方法来获得它,就像我们的伙伴Paulie_D建议的那样。
在你的代码中,你的动画长度是4s,所以,动画50%的关键帧在2s:之后
//......
//when the animation starts....
setTimeout(function(){
//Enter your stuff here
}, 2000); //2 seconds delay, considering your animation length = 4s;
您也可以使用(需要jQuery):
$("#animated_element").bind("half_animation", function(){
//Ya stuff here
});
//.........
//When the animation starts...
setTimeout(function()
{
$("#animated_element").trigger("half_animation");
}, 2000);
或者:
$("#animated_element").bind("half_animation", function(){
once = 0;
setTimeout(function()
{
//Ya stuff here....
}, 2000)
});
//........
//When the animation starts
$("#animated_element").trigger("half_animation");
这是我的看法。
- 获取动画持续时间
- 像维尼建议的那样,在上面撒一些数学知识
setTimeout()
代码:
const fn_runAtKeyframe = (DOMElement, keyframe, callback) => {
const animationDuration = window.getComputedStyle(DOMElement).animationDuration;
// animationDuration returns string, e.g. "5s" or "500ms", so need to parseInt()
// if it is in seconds, change it to milliseconds
let animationKeyframe
if (animationDuration.replace(/[0-9]/g, '') === "s") {
animationKeyframe = parseInt(animationDuration) * keyframe * 1000
} else {
animationKeyframe = parseInt(animationDuration) * keyframe
}
const doStuff = (e) => {
setTimeout(() => {
console.log(`Function "${callback.name}" will run at ${keyframe*100}% keyframe`)
callback();
}, animationKeyframe)
}
DOMElement.addEventListener("animationstart", doStuff);
// or use "animationiteration" depending on your usecase
}
运行它,
const animateDiv = document.querySelector("#animateDiv")
const keyframe = 0.5 // at 50% keyframe
const callback = () => {
// do stuff here...
};
fn_runAtKeyframe(animateDiv, keyframe, callback)
就像Vini说你有这个机会,我为自己做的,你可以改变"动画播放状态:";用于任何您想要的功能。
//Animation pause at specific percentage, Example: pauseAnimationAt("myDiv",33,10)
function pauseAnimationAt(l,p,d){
percentage = p/d*1000;
function pauseAnimation(){
setTimeout(function(){ document.getElementById(l).style="animation-play-state: paused"; }, percentage);//l = Element ID, p = percentage when you wanna stopt animation, d = Duration of animation (Yes, you need to know that)
}
document.getElementById(l).addEventListener("animationstart", pauseAnimation());
}
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 使用javascript可以设置css动画的当前百分比
- 在一定百分比上禁用引导进度条的平滑动画过渡
- 制作jQuery高度百分比动画
- 图表.js动画进度进度百分比
- jQuery使用calc作为值(从百分比中减去px)对位置进行动画处理
- 使javascript动画条与动画百分比同步
- 滚动到顶部,动画为百分比
- 函数.动画百分比不起作用
- 边缘动画自定义百分比预加载程序
- jQuery:如何使用一个元素的百分比宽度作为动画另一个元素的值,并确保它的工作,即使在调整窗口的大小
- 在Android Native Browser (4.x)上动画化翻译百分比
- CSS圆圈动画显示百分比
- 如何显示网站加载的百分比,而不是gif或任何动画图像
- 我可以用JavaScript检测CSS关键帧动画中的百分比
- 基于滚动百分比的动画翻译