1

我已经在这几个小时了，我已经检查了整个网络，我发现了一些有帮助的东西，但我似乎无法得到我想要的结果。

我正在尝试使用 css 动画制作一个简单的游戏。我已将屏幕分成 9 个相等的 div，每行 3 行。我希望您从中心块开始，当您单击另一个 div 中的按钮时，您的“船”会转到该 div 并停留在那里，直到单击另一个按钮.

我已经设法让船移动了，但是，当我尝试向它添加旋转以使其具有实际飞机的“滚动”效果时，它会在设置的旋转度上通过动画俯冲炸弹。我希望游戏沿 z 轴滚动以获得伪 3D 外观。有点像旧的自上而下的垂直滚动射击游戏，除了 3D 风格。

animation-name : cssAnimation;
   animation-duration : 1s;
   animation-iteration-count : 1;
   animation-timing-function : ease;
   animation-fill-mode :;
   -webkit-animation-name : cssAnimation;
   -webkit-animation-duration : 1s;
   -webkit-animation-iteration-count : 1;
   -webkit-animation-timing-function : ease;
   -webkit-animation-fill-mode :;
   -ms-animation-name : cssAnimation;
   -ms-animation-duration : 1s;
   -ms-animation-iteration-count : 1;
   -ms-animation-timing-function : ease;
   -ms-animation-fill-mode :;
}
@-webkit-keyframes cssAnimation {
   0% {
       -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0%);
   }
   75% {
       -webkit-transform: rotate(15deg) scale(1) skew(0deg) translateX(-225%);
   }
   100% {
       -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(-225%);
   }
}

http://jsfiddle.net/ryanhagz/5GAX7/

4

2 回答 2

1 
   @-webkit-keyframes cssAnimation {
       0% {
           -webkit-transform: scale(1) skew(0deg) translateX(0%);
       }
       50% {
           -webkit-transform: scale(1) skew(0deg) translateX(-225%) rotate(0deg) rotate(90deg) rotate(180deg);
       }
  100% {
           -webkit-transform: scale(1) skew(0deg) translateX(-225%);
       }
   }

我尝试编辑您的代码，我希望这将是您进一步前进的线索。

jsfiddle 编辑

也可以在这里查看重启动画

于 2013-07-10T04:37:03.573 回答
1

您需要做的实际上是围绕动画定义中的时间和规则进行更改。首先，如果一个属性在动画中没有发生变化，则不需要声明它，所以定义中可以省略skew和等属性。scale

此外，您拥有的代码应重新安排为：

-webkit-animation: cssAnimation 1s cubic-bezier(.13,.38,.12,.97);
-ms-animation: cssAnimation 1s cubic-bezier(.13,.38,.12,.97);
animation: cssAnimation 1s cubic-bezier(.13,.38,.12,.97);

在代码中，我去掉了未声明的规则 ( fill-mode) 和您拥有默认编号的规则。顺便说一句，这是 1 iteration-count。最后我对它们重新排序，因为没有前缀的应该是最后的。如果您不知道，大多数浏览器解析 CSS 的方式是，它们可以解释的最后一条规则将是它们将遵守的规则。例如，在 Google Chrome 29 中，不带前缀的版本可能会起作用，并且会成为使用的版本，因为它是标准版本，但由于-webkit-之后有 CSS，Chrome 解析器将使用-webkit-. 每当您编写以供应商为前缀的 CSS 时，请记住这一点。

我将函数的时间更改为三次贝塞尔时间，在我看来这使它看起来更好一些。我用来玩计时的网站是由 Lea Verou 制作的，您可以使用它来尝试其他计时。

最后，我将您之前的定义更改为：

@-webkit-keyframes cssAnimation {
    0%   { -webkit-transform: rotate(0deg) translateX(0%);    }
    25%  { -webkit-transform: rotate(-15deg);                 }
    100% { -webkit-transform: rotate(0deg) translateX(-225%); }
}

以上只是-webkit-节省空间的版本，但其他版本只是以适当的前缀作为前缀。我所做的是告诉动画首先旋转船，然后将其发送到目的地并同时将其旋转回来。计时功能使它看起来开始时速度很快，结束时速度更慢。如果您想稍微延迟旋转并让它在此之前开始移动，您只需在它开始旋转之前插入一些平移，这只是在动画定义中插入更多断点的问题。

最终的 CSS 在这个小提琴中。

我希望我的回答有助于解释我所做的一切。玩得开心动画！

于 2013-07-12T23:26:55.077 回答