Question

我试图制作一个动画摆。我设法用两个嵌套的div来做，一个用于字符串，一个用于钟摆。动画是通过将弦旋转45度完成的，如下所示：

.string{
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -webkit-transform-origin:50% 0%;
}

@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(0deg); }
  25%  { -webkit-transform: rotate(45deg); }
  50%  { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}

它工作正常，但速度的印象不是很好。

现在我希望钟摆的速度从0deg降低到45deg，从45deg转到0deg时会增加。

我怎么能实现这个目标？

Answer 1

这是构建自定义缓动效果的好工具：Ceaser

但是，因为你使用相同的动画来回做，我认为你可以用：

.string{
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -webkit-transform-origin:50% 0%;
  -webkit-animation-timing-function:ease-in-out; /* or make your custom easing */
}

@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(0deg); }
  40%  { -webkit-transform: rotate(45deg); }
  70%  { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}

因此需要40％的时间才能上升，只有30％的时间会下降：）

Answer 2

您需要的是：

.string{
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-transform-origin:50% 0%;
    -webkit-animation-timing-function:ease-in-out;
}

@-webkit-keyframes rotate {
    0%   { -webkit-transform: rotate(45deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

这将创建一个平滑的动画，从两侧45度。您可以使用动画持续时间增加或减少频率。

Answer 3

您要查找的媒体资源是-webkit-animation-timing-function。尝试使用不同的值来查看它如何影响动画的速度。

请参阅：http://w3schools.com/cssref/css3_pr_animation-timing-function.asp

将方向设置为交替然后为单个挥杆设置动画也不会更有意义吗？这样它会从左到右，然后从右到左。使用'轻松'的默认定时功能，你可以获得摆动摆动的正确物理效果。

Answer 4

我通过Googling CSS3 Pendulum找到了这个资源。这似乎是你在寻找的。

以下是使用您的代码的demo：

.string{
  -webkit-transform-origin:50% 0%;
  -webkit-animation: rotate 2s infinite ease-in-out;
}

@-webkit-keyframes rotate {
  0% {
        -webkit-transform: rotate(-45deg);
    }

    50% {
        -webkit-transform: rotate(45deg);
    }

    100% {
        -webkit-transform: rotate(-45deg);
    }
}
}

Answer 5

其实我自己创造了一个钟摆效果版本。 http://codepen.io/khanhhua/full/jbOLJb/

从技术上讲，实现将涉及变换，变换原点，动画定时功能和更多计算。我在SCSS中执行了以下代码（您可以在the pen above中看到）。

有关详细信息，请参阅in my blog，其中向您展示了数学和物理背后的更多信息。

希望这会有所帮助！

[class*=pendulum] {
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 32px;
  left: 112px;
  border: 2px solid #white;
  border-radius: 50%;
  background-color: #5c9bf3;
  box-shadow: 0px 0px 5px 0px white;
  animation: swing 1s infinite ease-in-out alternate;
}
[class*=pendulum]:after {
  content: "";
  display: block;
  width: 1px;
  margin-left: 16px;
  background: white;
  animation: tracing 1s infinite ease-in-out alternate;
}

.pendulum-1 {
  bottom: 0px;
  transform-origin: center -512px;
  transform-origin: center -512px;
  animation-duration: 1.13542s;
  z-index: -1;
}
.pendulum-1:after {
  height: 512px;
  margin-top: -512px;
  animation-timing-function: step(0, 4);
  animation-delay: 300ms;
  animation-duration: 0.56771s;
}

PS：如果您正在寻找一些面试问题的答案，请务必提及来源。你可能永远不会知道我是面试官。

动画摆动效果

5 个答案: