純粋なSVGの車

最近、SVGアニメーションは私にとって大きなインスピレーションとなっています。 彼女の助けを借りて、単純な要素から印象的なものを作ることができます。 たとえば、今日は車に関するデモの作成を終了し、ブログで喜んで書いています。



Habrのルールを破りたくないので、プロセスについて少し説明します。 SVG仕様にはアニメーションに関するセクションがあります。これは、クライアント（ブラウザなど）がアニメーションを実行する方法を説明しています。 理論的には非常に美しくなりますが、自分の手で何かをしようとしないと理解できません。



更新：

ラリーカー 、 レース 、 加速とブレーキ 、 駐車場 、 ヘッドライト付き車への直接リンク。



私は練習のために決めました-ある種のクリパラからベクトルの小さな車を取り、それで遊ぶこと。 言うのは簡単です-平均して1つの画像の重量は約24Kbです。 画像は特別な設定なしでベクターエディターで描画されることがわかります。 その結果、自動車の単純な輪郭（パス要素）は、意図的に過剰な座標シートで構成されていることがわかりました。 デフォルトでは、Inkscapeは座標を相対にし、その結果、多くの数値が負になります。 また、ポイントの後の文字数は4〜5に達する可能性があります。

結論：怠zyでない場合は、適切な画像最適化により、24Kbから約5-7Kb節約できます。



誰かがマッチを保存することは面白くないと言うでしょう。 パス要素のポイント数を減らし、結果のDOMツリーの要素数を減らすことで、ブラウザーの操作が楽になり、ユーザーのコンピューターが解放されることに私は反対します。



最適化されたSVG車を受け取った後、Firefox \ Operaでは輪郭が滑らかになり、Chromiumではノッチが付けられていることに気付きました。 専門家が問題を教えてくれたら、感謝します。



さまざまなブラウザーで動作を確認するプロセスでアニメーション自体を作成した後、次のことがわかりました。

1. Firefoxは、OperaおよびChromiumよりもかなり多くプロセッサをロードします。

2. Operaではスプラインを使用したアニメーションが問題なく機能し、FirefoxとChromiumではかなり気まぐれに動作し、私の場合は両方のブラウザーで機能する組み合わせを見つけることさえできませんでした。



すべてのブラウザで機能する不均一なアニメーションの例がある場合は、リンクに感謝します。