5

私の最終的な編集については以下をお読みください！

フレーム間でアニメーションをトゥイーンせずに CSS3 アニメーションを使用することは可能ですか?

たとえば、2 つのキャラクター アニメーション スプライトがある画像があります。それらは 50px の等間隔に配置されています。次のアニメーションを使用すると、まだトゥイーンが表示されます (ただし、トゥイーンは非常に高速であるため、ちらつきのように見える場合があります)。

#ball .animated{
        -webkit-animation-name: animate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;}
@-webkit-keyframes animate{
        0%{-webkit-transform: translate3d(0,0,0);}
        49%{-webkit-transform: translate3d(0,0,0);}

        50%{-webkit-transform: translate3d(-50px,0,0);}
        100%{-webkit-transform: translate3d(-50px,0,0);}

したがって、上記に基づいて、スプライト フレームは、期間の最初の 0 ～ 49% の間、画像の最初の部分 (x = 0px) に保持され、その後、画像の 2 番目の部分 (x = -50px) にジャンプする必要があります。 50 ～ 100% の場合。ただし、0 から -50 ピクセルまでのトゥイーンを視覚的に確認するには、1% の差でも十分です。

考え？

編集：

-webkit-animation-timing-function: cubic-bezier(1,0,1,0);

上記は少しまっすぐに見えましたが、しばらくするとちらつきに戻ります。

編集：パーセンテージで小数を使用できることに気づきませんでした。ギャップを 1% から 0.1% に近づけると、はるかに高速なトゥイーンが作成され-webkit-animation-duration:ます。

0%{-webkit-transform: translate3d(0,0,0);}
49.9%{-webkit-transform: translate3d(0,0,0);}

50%{-webkit-transform: translate3d(-50px,0,0);}
100%{-webkit-transform: translate3d(-50px,0,0);}

最終編集!: わかりました。私が見つけた Web キット アニメーションのパーセンテージからは、100 万分の 1 までの小数点以下 (つまり 0.0001) を受け入れることができます。比較的短いアニメーション タイマーでは、瞬時に翻訳されます。ちょっとしたハックだと思いますが、うまくいきます。

例：

@-webkit-keyframes sprite {
 0% {
   -webkit-transform: translate3d(0,0,0);
 }
 50% {
   -webkit-transform: translate3d(0,0,0);
 }
 50.0001%{
   -webkit-transform: translate3d(-50px,0,0);
 }
 100%{
   -webkit-transform: translate3d(-50px,0,0);
 }
}

上記の例は、コンテナー div 内の 100 ピクセル (画像上の各スプライトの幅は 50 ピクセル)の画像でwidth: 50pxありoverflow:hidden、一度に画像から 1 つのスプライトのみを表示します。

注: translate3d を使用しているのは、translateX、translateY、translateZ がまだハードウェア アクセラレーションされていないモバイル ブラウザーでハードウェア アクセラレーションを使用しているためです。

4

3 に答える 3

9

を使用した別の優れた例を次に示しsteps()ます。

これは、スプライトをアニメーション化するためのシンプルかつ強力な方法です。下には古いデュークが手を振っているアニメーションがあります。

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://i.stack.imgur.com/1Ad8o.png");
    margin: 0 auto;      
    animation: wink .8s steps(10, end) infinite;
}
<img src="http://i.stack.imgur.com/1Ad8o.png">
<div class="hi"></div>

cssdeckでプレイできるデモがあります。

于 2012-07-18T06:37:33.167 に答える
1

この質問がされてからしばらく経ちましたが、CSS3 にステップ タイミング機能が追加されたので、それをスプライト アニメーションに使用しました。http://codepen.io/natedsaint/pen/2/7のコードペンの例から:

/* Animation keyframes */
@keyframes walk {
  0% { background-position:0px 0px;}
  16.67% { background-position:-104px 0px;}
  33.33% { background-position:-208px 0px;}
  50% {background-position:-320px 0px;}
  66.66% { background-position:-416px 0px;}
  80.65% { background-position:-520px 0px;}
  100% { background-position:-624px 0px;}
}

#guyBrush {
  animation: walk infinite 1s steps(1,end);
  background-image:url('http://www.nathanstpierre.com/gb_walk.png');
  width:104px;
  height:152px;
  position:absolute;
  top:160px;
  left:360px;
}

これの利点は、アニメーションの継続時間をより低い数値に変更することで速度を変更できることです。これを表示するスライダーを実装しました。

于 2012-06-22T22:54:26.273 に答える
0

CSS アニメーションの一般的な考え方は、アニメーション化することです。位置から位置へジャンプさせたい場合は、JavaScript を介して直接位置を設定し、JavaScript を使用して繰り返しを行うことを検討してください。

ただし、アニメーションを使用したい場合は、いくつかのオプションがあります。1 つは、不透明度を 0 に設定し、2 つのフィラー キーフレームで 1 に戻す方法です。または、代わりに z-index を変更して、移動中にマスキング div の背後にあるアニメーション オブジェクトを非表示にします。z-index はトゥイーンしません。

更新: ステップ関数遷移が仕様に追加され、現在 Chrome に実装されているため、やりたいことが可能になりました。

于 2010-12-21T23:06:58.523 に答える