2

このようなプログレッシブ ラインで、このような木の描画効果を作成したいと思います。とのみcss3を使用することをお勧めします。あなたはなにか考えはありますか？svg/canvasjs

より詳しい情報：

私は木をバラバラにカットして、外観を少しずつアニメーション化しようとしましたが、すべてのピースが異なる長さなどを持っているため、遅延と持続時間を同期させることについて多くの詳細があるため、筆記体ではありません。これはすべてsvgなしで作成されています。線のパスをアニメートできるなら今したいです。

4

2 に答える 2

1

はい、CSS 3 を使用したバハマのロゴのこのレンダリングを見てください。

それは彼のプロセスとテクニックを説明しています。また、ソースを表示することもできます。

ここで見つけることができるものは他にもあります

アップデート：

また、このSencha Animator 製品が役立つかもしれません。

于 2013-01-11T08:57:33.330 に答える
1

プレーンな SVG でこれを行うことができます。SVG は、<animate>宣言型アニメーションの要素を提供します。

あなたが望むのは（私が理解しているように）、視聴者の目の前に描かれたかのように見える線です。stroke-dasharrayこの目的でプロパティを使用できます。このプロパティは、ダッシュとギャップの長さを定義する一連の値を使用して、ダッシュ パターンを定義します。戦略は次のようになります。まず、長さ 0 のダッシュと、少なくともパス全体と同じ長さのギャップがあります。これは、何も表示されないことを意味します (またはパスの開始点の最初のポイントのみ)。最後に、少なくともパス全体の長さのダッシュが必要です。最終的な長さ (フル パスの長さ) に達するまで、ダッシュを徐々に長くします。

最も単純なケースは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <!-- This is the path of a spiral -->
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
      stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <!-- This defines the animation: 
         The path is roughly 2305 units long, it will be drawn in 5 seconds -->
    <animate from="0,2305" to="2305,0" dur="5s"
        attributeName="stroke-dasharray" repeatCount="indefinite"/>
  </path>
</svg>

1つと 1 つの値ではなく、複数の値 (values属性を使用)を使用して、より高度なことを行うことができます。fromto

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
   stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" 
      values="0,2305;
              2000,305;
              2305,0"/>
  </path>
</svg>

属性を使用して、正確なタイミング (にリストされている値valuesに到達するタイミング) を指定できます。keyTimes

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
   stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" 
      values="0,2305;
              2000,305;
              2305,0" 
      keyTimes="0;.9;1"/>
  </path>
</svg>

Tinkerbin でこれを実際に見てください。

CSS3 を使用して同様のことを行うことができます。

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <style type="text/css">
    path {
      animation-name:animateDash;
      animation-duration:5s;
      animation-iteration-count:infinite;
    }
    @keyframes animateDash {
      from{stroke-dasharray:0,2305}
      to  {stroke-dasharray:2305,0}
    } 
  </style>
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
    stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>

好きな方法を自分で決めてください。

于 2013-01-11T15:49:30.540 に答える