我对动画有点新意,所以如果我在这里错过了一个巨大的概念,请原谅我 . 我需要设置指向曲线上某个点的箭头的动画,让我们说这是一个立方曲线,为了这篇文章 . 箭头沿着曲线的线移动,始终指向它下方的几个像素 .
所以我做的是,我使用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 回答
您无法在一系列关键帧上应用缓动函数,因为您特意告诉对象在特定时间位于特定点 . 如果您在一系列关键帧上应用了一个缓入,那么在25%时,对象将在它后面需要“检查点”,最终加速直到达到100% .
如果您的积分或多或少等距,您可以申请:
如果有点机器人,你的动画看起来会更不好看 .
更自然的方法是加速,保持速度,然后“刹车”:
如果webkit支持沿着路径的动画,则不需要这些关键帧,并且您可以毫不费力地将缓动应用于仅两个关键帧 .
当您希望将不同的缓动函数应用于动画的不同方面时,您应该通过将内容嵌套在两个div中来分离动画 .
在这种情况下,您应该创建一个父div以应用运动动画,并创建一个子div来应用不透明度动画 . 不透明度动画应该有一个缓动曲线:线性,并且运动动画应该具有最适合您的缓动函数 . 但是,我会重复Duopixel关于混合缓动曲线和固定检查点的说法 - 在这种情况下,您实际上不需要动画,只需要两个0%:100%动画 - 一个用于父级,一个用于子div .
做了很多CSS3动画之后,我为Sencha Animator产品写了this guide - 它有一些有用的一般信息,关于如何使用CSS3获得复杂的动画 - 即使你不想使用这个工具 .
一些参考爱你:http://www.w3.org/TR/css3-animations/
更具体地说:http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-
您可能希望进行动画堆叠,例如移动到一个位置,然后移动到另一个位置,然后移动到多个关键帧动画中的另一个,而不是仅仅一个 .