从 JavaScript Web Animations API 中读取样式信息,中间状态
Read style information from JavaScript Web Animations API, mid state
给定一个网络动画,比如这里的那个:https://codepen.io/arxpoetica/pen/aXqEwe
如何根据任意给定时间点关键帧之间的状态获取 CSS 或样式信息?
示例代码:
<div class="thing"></div>
<style>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #0a2933;
}
.thing {
height: 100px;
width: 100px;
background-color: orange;
}
</style>
<script>
document.querySelector('.thing').animate([
{ transform: 'rotate(0) scale(1)', backgroundColor: 'orange' },
{ transform: 'rotate(180deg) scale(3)', backgroundColor: 'blue' },
{ transform: 'rotate(360deg) scale(1)', backgroundColor: 'orange' }
], {
duration: 3000,
iterations: Infinity
})
</script>
注意:此 API 仅适用于有限的浏览器/平台。
您可以使用requestAnimationFrame
to achieve the expected result, see
WAAPI 方法 .animate
returns Animation
包含所有你需要的对象:
运行 下面的片段:
var keyframes = [{
transform: 'rotate(0) scale(1)',
backgroundColor: 'orange'
},
{
transform: 'rotate(180deg) scale(3)',
backgroundColor: 'blue'
},
{
transform: 'rotate(360deg) scale(1)',
backgroundColor: 'orange'
}
];
var options = {
duration: 3000,
iterations: Infinity
};
var thing = document.querySelector('.thing');
var A = thing.animate(keyframes, options);
console.clear();
function getState() {
if (A.playState === 'running') {
document.querySelector('section').innerHTML += `<p>
progress: ${getProgress()*100|0}% <br>
transform: ${getComputedStyle(thing).transform} <br>
backgroundColor: ${getComputedStyle(thing).backgroundColor}
</p>`;
//A.startTime = 0;
A.pause();
} else {
A.play();
document.querySelector('section p:last-of-type').remove();
}
}
function getProgress() {
return A.effect ?
A.effect.getComputedTiming().progress :
A.currentTime % options.duration / options.duration
}
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #0a2933;
}
section {
position: absolute;
z-index: 1;
top: 0;
left: 1em;
color: silver
}
.thing {
height: 100px;
width: 100px;
background-color: orange;
}
<!-- polyfill -->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<section>
<p>How do I get CSS or style information based on state between keyframes at any given point and time?</p>
<button onclick="getState()">Click here</button>
</section>
<div class="thing"></div>
另外,WAAPI 有一个很好的 polyfill。
希望对您有所帮助。
给定一个网络动画,比如这里的那个:https://codepen.io/arxpoetica/pen/aXqEwe
如何根据任意给定时间点关键帧之间的状态获取 CSS 或样式信息?
示例代码:
<div class="thing"></div>
<style>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #0a2933;
}
.thing {
height: 100px;
width: 100px;
background-color: orange;
}
</style>
<script>
document.querySelector('.thing').animate([
{ transform: 'rotate(0) scale(1)', backgroundColor: 'orange' },
{ transform: 'rotate(180deg) scale(3)', backgroundColor: 'blue' },
{ transform: 'rotate(360deg) scale(1)', backgroundColor: 'orange' }
], {
duration: 3000,
iterations: Infinity
})
</script>
注意:此 API 仅适用于有限的浏览器/平台。
您可以使用requestAnimationFrame
to achieve the expected result, see
WAAPI 方法 .animate
returns Animation
包含所有你需要的对象:
运行 下面的片段:
var keyframes = [{
transform: 'rotate(0) scale(1)',
backgroundColor: 'orange'
},
{
transform: 'rotate(180deg) scale(3)',
backgroundColor: 'blue'
},
{
transform: 'rotate(360deg) scale(1)',
backgroundColor: 'orange'
}
];
var options = {
duration: 3000,
iterations: Infinity
};
var thing = document.querySelector('.thing');
var A = thing.animate(keyframes, options);
console.clear();
function getState() {
if (A.playState === 'running') {
document.querySelector('section').innerHTML += `<p>
progress: ${getProgress()*100|0}% <br>
transform: ${getComputedStyle(thing).transform} <br>
backgroundColor: ${getComputedStyle(thing).backgroundColor}
</p>`;
//A.startTime = 0;
A.pause();
} else {
A.play();
document.querySelector('section p:last-of-type').remove();
}
}
function getProgress() {
return A.effect ?
A.effect.getComputedTiming().progress :
A.currentTime % options.duration / options.duration
}
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #0a2933;
}
section {
position: absolute;
z-index: 1;
top: 0;
left: 1em;
color: silver
}
.thing {
height: 100px;
width: 100px;
background-color: orange;
}
<!-- polyfill -->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<section>
<p>How do I get CSS or style information based on state between keyframes at any given point and time?</p>
<button onclick="getState()">Click here</button>
</section>
<div class="thing"></div>
另外,WAAPI 有一个很好的 polyfill。
希望对您有所帮助。