1

アニメーションの振り子を作成しようとしています。私は2つのネストされたdivでそれを行うことができました。1つは文字列用で、もう1つは振り子用です。アニメーションは、次のように文字列を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振り子を見つけました。それはあなたが探しているもののようです。

これがあなたのコードを使ったデモです：

.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

また、方向を交互に設定してから1つのスイングをアニメートする方が理にかなっていますか？そうすれば、左から右へ、次に右から左へと再生されます。「ease」のデフォルトのタイミング関数を使用すると、振り子の動きに対して正しい物理学であるように見えるものが得られます。

于 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 に答える