首页 文章

是否有一种方法可以将-webkit-animtion-timing-function应用于整个动画而不是每个关键帧?

提问于
浏览
23

我对动画有点新意,所以如果我在这里错过了一个巨大的概念,请原谅我 . 我需要设置指向曲线上某个点的箭头的动画,让我们说这是一个立方曲线,为了这篇文章 . 箭头沿着曲线的线移动,始终指向它下方的几个像素 .

所以我做的是,我使用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-animation-timing-function:ease-in运行这个动画时,它会将缓动应用于每个单独的关键帧,这绝对不是我想要的 . 我想将缓动应用于整个动画 .

我应该采取不同的方式吗?是否有一些属性可以将缓动应用于整个序列而不是每个关键帧?

3 回答

  • 2

    您无法在一系列关键帧上应用缓动函数,因为您特意告诉对象在特定时间位于特定点 . 如果您在一系列关键帧上应用了一个缓入,那么在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支持沿着路径的动画,则不需要这些关键帧,并且您可以毫不费力地将缓动应用于仅两个关键帧 .

  • 1

    当您希望将不同的缓动函数应用于动画的不同方面时,您应该通过将内容嵌套在两个div中来分离动画 .

    在这种情况下,您应该创建一个父div以应用运动动画,并创建一个子div来应用不透明度动画 . 不透明度动画应该有一个缓动曲线:线性,并且运动动画应该具有最适合您的缓动函数 . 但是,我会重复Duopixel关于混合缓动曲线和固定检查点的说法 - 在这种情况下,您实际上不需要动画,只需要两个0%:100%动画 - 一个用于父级,一个用于子div .

    做了很多CSS3动画之后,我为Sencha Animator产品写了this guide - 它有一些有用的一般信息,关于如何使用CSS3获得复杂的动画 - 即使你不想使用这个工具 .

  • 17

    一些参考爱你:http://www.w3.org/TR/css3-animations/

    更具体地说:http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-

    您可能希望进行动画堆叠,例如移动到一个位置,然后移动到另一个位置,然后移动到多个关键帧动画中的另一个,而不是仅仅一个 .

相关问题