有没有办法让动画计时功能应用于整个动画而不是每个关键帧?

2022-03-10 00:00:00 css css-animations

我对动画有点陌生,如果我错过了一个重要的概念,请原谅。我需要制作一个指向曲线上一点的箭头动画,为了这个帖子,我们假设它是一条三次曲线。箭头沿曲线的线条移动,始终指向曲线下方的几个像素。

我所做的是使用CSS3:

沿曲线的线设置关键帧
 @-webkit-keyframes ftch {
     0% {
         opacity: 0;
         left: -10px;
         bottom: 12px;
     }
     
    25% {
        opacity: 0.25;
        left: 56.5px;
        bottom: -7px;
     }
     
     50% {
        opacity: 0.5;         
        left: 143px;
        bottom: -20px;
     }
     
     75% {
        opacity: 0.75;
        left: 209.5px;
        bottom: -24.5px;
     }
     
     100% {
         opacity: 1;
         left: 266px;
         bottom: -26px;
     }
}
但是,当我使用-webkit-动画-计时-函数:缓入运行此动画时,它会将缓动应用到每个单独的关键帧,这绝对不是我想要的。我希望缓动应用于整个动画。

有没有其他我应该这样做的方式?是否有某些属性可以将缓动应用于整个序列,而不是每个关键帧?


解决方案

您不能对一系列关键帧应用缓动功能,因为您专门告诉对象在特定时间处于特定点。比方说,如果你在一系列关键帧上应用了缓入,那么在25%的时候,对象将在它所需的"检查点"之后,最终加速,直到100%赶上。

如果您的点距离大致相等,则可以应用:

.animatedobject {
  -webkit-animation-timing-function: linear;
}

如果有点机械化,您的动画看起来会越来越差。

更自然的方法是加速、保持速度,然后"刹车":

 @-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
    -webkit-animation-timing-function: ease-in;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
    -webkit-animation-timing-function: linear;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
    -webkit-animation-timing-function: linear;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
    -webkit-animation-timing-function: linear;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
    -webkit-animation-timing-function: ease-out;
 }
}

如果Webkit支持沿路径的动画,您将不需要这些关键帧,并且只将缓动应用于两个关键帧将没有问题。

相关文章