1

我正在尝试创建一个动画钟摆。我设法用两个嵌套的 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增加。45deg0deg

我怎么能做到这一点？

4

5 回答 5

2

有一个用于构建自定义缓动效果的好工具：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% :)

于 2012-10-16T15:54:05.740 回答
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 度开始的平滑动画。您可以使用动画持续时间增加或减少频率。

于 2013-08-27T15:51:30.740 回答
1

我通过谷歌搜索CSS3 Pendulum找到了这个资源。这似乎是您正在寻找的东西。

这是使用您的代码的演示：

.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);
    }
}
}
于 2012-10-16T15:52:57.617 回答
0

您正在寻找的物业是-webkit-animation-timing-function。尝试使用不同的值来查看它如何影响动画的速度。

见：http ://w3schools.com/cssref/css3_pr_animation-timing-function.asp

将方向设置为交替然后为单个摆动设置动画不是更有意义吗？这样它会从左到右然后从右到左播放。使用“轻松”的默认计时功能，您将获得摆动钟摆运动的正确物理学。

于 2012-10-16T15:44:05.783 回答
0

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

从技术上讲，实现将涉及变换、变换原点、动画定时功能和更多计算。我在 SCSS 中做了以下代码（你可以在上面的笔中看到）。

有关更多详细信息，您可以阅读我的博客，该博客向您展示了更多关于背后的数学和物理学的信息。

希望这会有所帮助！

[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：如果您正在寻找某些面试问题的答案，请务必提及来源。你可能永远不知道我是面试官。

于 2015-10-06T10:27:44.603 回答