Javascript Web动画API还是CSS动画关键帧?
我希望我的页面以一个简单的动画开始,介绍我能做什么“嗨,我叫保罗,我做网站”之类的事情 为了实现这一点,我认为使用Javascript Web Animations API将是一个很好的机会,可以立即用香草Javascript演示我的能力。我正在制作一个部分,用框架和WordPress演示我的能力。然而,在开始之后,我注意到发生了一些奇怪的事情,可能是因为我没有正确使用它Javascript Web动画API还是CSS动画关键帧?,javascript,css-animations,web-animations-api,Javascript,Css Animations,Web Animations Api,我希望我的页面以一个简单的动画开始,介绍我能做什么“嗨,我叫保罗,我做网站”之类的事情 为了实现这一点,我认为使用Javascript Web Animations API将是一个很好的机会,可以立即用香草Javascript演示我的能力。我正在制作一个部分,用框架和WordPress演示我的能力。然而,在开始之后,我注意到发生了一些奇怪的事情,可能是因为我没有正确使用它 const fade = (a = 0, b = 1) => { return [ { opacity:
const fade = (a = 0, b = 1) => {
return [
{ opacity: a },
{ opacity: b }
];
}
const glideX = (a = '-10000px', b = '0px') => {
return [
{ marginLeft: a, position: 'absolute' },
{ display: 'block', offset:0.1 },
{ marginLeft: b, position: 'unset' }
];
}
const glideY = (a = '-10000px', b = '0px') => {
return [
{ marginTop: a, position: 'absolute' },
{ display: 'block', offset:0.1 },
{ marginTop: b, position: 'unset' }
];
}
const animateSettings = (dur = 1500, it = 1, fill = 'forwards', ease = 'ease-in-out') => {
return {
duration: 1500,
iterations: 1,
fill: 'forwards',
easing: 'ease-in-out'
};
}
const start = h1.animate( fade(), animateSettings() );
start.onfinish = () => {
myNameIs.style.display = 'block';
const nameIn = myNameIs.animate( glideX(), animateSettings() );
nameIn.onfinish = () => {
const welcomeGo = h1.animate ( glideY( '0px', '10000px' ), animateSettings() )
welcomeGo.onfinish = () => {
console.log('all done');
}
}
}
代码笔:
我希望初始文本Hi淡入。
完成后,我希望我的名字是保罗,从左边进来
当这一切结束时,我想让Hi从页面上掉下来
这是动画的开头三帧,我使用onfinish事件/promise使其工作
然而,一个问题是,最后一个框架似乎也会影响之前框架中的文本
我想问,这是否是我如何使用API的结果,或者这是API中的一个错误,我最好简单地使用CSS关键帧和链接事件侦听器,这些侦听器侦听每个转换以完成,然后应用特定的关键帧类?这两个都是项目中很好的候选对象。但是请注意,Web动画API还没有发布,因此它将在那里中断 我在你的代码中注意到了一些事情 您正在使用边距更改元素的位置。尝试使用该属性,因为它更适合动画,并且不会干扰文档流中的其他元素。我猜这会造成元素之间的干扰。 您希望在上一个动画完成时触发下一个动画,并通过使用“完成”事件来完成该操作。虽然这是动画持续时间为动态时的一个选项,但它似乎与您的情况无关。触发后续动画时,可以使用动画的属性。 你想要实现什么 第一个动画必须立即开始,持续时间为1500毫秒。秒动画必须在第一个动画完成后开始。只需添加1500毫秒的延迟,使其在第一个延迟之后启动。 第三个动画必须在前两个动画完成后开始。这在启动时间的延迟中总计达1500*2毫秒。我想这会让你走得更远 在CSS中,它将如下所示:
.el-one { animation: first-animation 1500ms forwards ease-in-out; }
.el-two { animation: second-animation 1500ms 1500ms forwards ease-in-out; }
.el-three { animation: third-animation 1500ms 3000ms forwards ease-in-out; }
在JS中,您必须创建3种不同的动画设置。您已经有了一个可以控制动画属性的函数,请将其重写为:
const animateSettings = (delay = 0) => ({
delay: delay,
duration: 1500,
iterations: 1,
fill: 'forwards',
easing: 'ease-in-out'
});
const animationOne = elementOne.animate(yourFirstAnimation, animateSettings());
const animationTwo = elementTwo.animate(yourSecondAnimation, animateSettings(1500));
const animationThree = elementThree.animate(yourThirdAnimation, animateSettings(3000));
何时使用Web动画API或CSS关键帧
这取决于动画是否需要计算。如果您无法在CSS中硬编码动画,并且需要计算从点a到点b的距离,请使用Web动画API,或者持续时间、延迟或任何其他属性取决于用户的输入,请使用API
如果您已经知道点a和点b在像素、百分比等方面的位置,那么使用CSS关键帧就更容易了
为什么CSS转换
变换对于具有良好性能的动画至关重要。它们工作得很好,因为当一个元素被转换时,它永远不会从流中消失,而只会操纵元素的视觉表示。这可以防止每次移动元素时都重新绘制整个页面,例如使用边距或顶部和左侧属性时发生的情况
结论
使用transform属性来操作元素,这样会提高性能,并且不会扰乱流程。
延迟属性将为您提供开火的能力
动画一个接一个。
如果需要计算动画,请使用Web动画API,否则只需使用CSS即可。
非常感谢您的深入解释!简单地使用转换解决了我在填充时遇到的问题:转发不工作。起初我本应该考虑使用translate,但这让我不知所措。我喜欢javascript的主要原因是它能够简单地将所有内容放入带有参数的函数中,然后在需要的地方调用它。在这种情况下,我将不得不考虑Safari并制作一个单独的版本。再次感谢你,不客气!祝你的项目好运,祝你度过愉快的一天。