生活援助はどのようにして作られましたか？

Question

http://livicons.com/

これらのアイコンがどのように作成されたかについて、誰かが私に基本的な説明を与えることができるかどうかは疑問です。私はSVGで、Raphael jsでアニメ化されていますが、キャンバスに描かれたアイコンはどれですか？または、raphael.jsで独立してアニメーション化された実際のsvgファイルのアイコンですか？

私は自分自身のアイコンを使いたいと思っていますし、それらのアイコンに似た独自の方法でアニメーションを付けることができるかどうかを確認してください。誰もこのテクニックに関するアイデアやチュートリアルを持っていますか？私はラファエルjsを読んできましたが、それは主にSVGを描画し、それをアニメーション化するためのものなので、私は100％ではありません。

（それはどのようになどを操作するためにどのアイコンの一部を知っていますか？）私もインスペクターを通読しようとしてきたが、私は本当にそれぞれのアニメーションが何をしているのか理解できない

感謝誰でも！

Answer 1

を私はディー、LivIcons'著者です。ちょうど私のサイトの統計情報Stackoverflowからのトラフィックを見た:)

答えが与えられますが、私はどのようにLivIconsを作成したかを簡単に説明しようとします。

すべての魔法はRaphael js libにあります（Dmitry Baranovskiyに感謝します）。

1. これらのアイコンは必ずしもSVGではなく、IE6-IE8ではVMLです。
2. 最初のステップでは、exのような任意のベクターソフトウェアでアイコンのすべてのシェイプのパスを含むSVGファイルを作成しています。アドビイラストレーター。
3. アニメーションが単純ではない場合（回転、移動、または拡大縮小など）、すべてのフレームに追加のパスを作成する必要があります。したがって、あなたのアニメーションは最初から最後までこれらのフレームを通過します。
4. その後、スクリプトのパスを指定します。
5. Raphaeljsの助けを借りて、Icon - Paper.path（[pathString]）メソッドの初期状態を作成し、Element.animate（...）メソッドでこれらのパスをアニメーション化します。この機能はまた、ホバーまたはクリックイベントを捕らえ、ホバー上で色を変える。

これは非常に短いガイドです。私は4ヶ月間に最初の303のアイコンに取り組んできました。時間と願望があるなら、試してみることもできます。

最高の願い事と幸運！

ディー

Answer 2

彼らは..それについてhere

例読みJavaScriptを使用してSVG（ベクトル）の要素をアニメーション化し、イベントをホバーされています

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;"> 
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc> 
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs> 
    <path fill="#000000" stroke="none" d="M25.59,13.368C25.814,13.598,26,13.52,26,13.197V6.584C26,6.262,25.738,6,25.416,6H18.803C18.481,6,18.403000000000002,6.186,18.633,6.41L21.227,9.004L15.999,14.231L10.774000000000001,9.006L13.369000000000002,6.41C13.598,6.185,13.52,6,13.198,6H6.584C6.262,6,6,6.262,6,6.584V13.198C6,13.519,6.185,13.597000000000001,6.411,13.369L9.007,10.774L14.232,15.998999999999999L9.004999999999999,21.226999999999997L6.41,18.633C6.186,18.402,6,18.48,6,18.803V25.416C6,25.738,6.262,26,6.584,26H13.197C13.518999999999998,26,13.597,25.816,13.367999999999999,25.59L10.771999999999998,22.994L15.998999999999999,17.766L21.226999999999997,22.994L18.632999999999996,25.59C18.402999999999995,25.815,18.480999999999995,26,18.802999999999997,26H25.415999999999997C25.738,26,26,25.738,26,25.416V18.803C26,18.481,25.814,18.403000000000002,25.59,18.633L22.994,21.227L17.766,15.999L22.994,10.772L25.59,13.368Z" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> 
    <rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect> 
</svg>