1

羽を除いて、空気中に浮かぶ泡を模倣する効果を Safari で作成するのに問題があります。要点を理解するために、いくつかのコードを省略しました。制作中のURLはこちらです。

アニメーション オブジェクトの Webkit スタイルは次のとおりです。

@-webkit-keyframes f1 {
  100% {
    -webkit-transform: translateX(-25px) translateY(-350px); 
  } 
}

.feather {
  /* other styling omitted */
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
}

そして、一連のオブジェクトを作成するためのJavaScript。

animateFeathers = function() {
    var $feather = $('<img>'),
    $feather.addClass('feather animated');
    $feather.attr('src','img/feather.png');
    $feather.css('-webkit-animation-name','f1');
    $featherContainer.append($feather);

    setTimeout(function() {
        $feather.remove();
    }, 9000);

    // random time to create next feather
    var rTimeout = Math.random() * maxTime + minTime;
    setTimeout(animateFeathers, rTimeout);
}

Chrome または Firefox でリンクにアクセスすると、意図した効果が得られます。ただし、Safari (これもモバイルまたはデスクトップ) では、フェザーがスタックし、7 秒ごとにグループ内でのみアニメーション化されます。DOM に挿入されたらすぐにアニメーションを開始してもらいたいです。これに関するアイデアはありますか？

4

1 に答える 1

0

Safari でパフォーマンスを発揮できなかったので、キャンバスを使用することに頼らなければなりませんでした。かなりの数時間かかりましたが、うまくいきました：

http://poetreatapp.com/

于 2013-03-26T02:41:26.600 に答える