web-dev-qa-db-ja.com

Webページ上のテキストの描画をアニメートするにはどうすればよいですか。

中央に1つのWordを持つWebページが欲しいのですが。

このWordをアニメーションで描画して、ページがWordと同じ方法でWordに「書き込む」ようにします。つまり、1つのポイントから開始し、最終結果がグリフになるように線と曲線を描画します。

これが<canvas>またはDOMのどちらで行われているかは関係ありません。また、JavaScriptまたはCSSのどちらで行われているかも関係ありません。 jQueryがないのはいいことですが、必須ではありません。

これどうやってするの？私は徹底的にを検索したが運が悪かった。

javascriptcsscanvashtml5-canvascss-shapes
223
strugee

このWordをアニメーションで描画して、ページがWordと同じ方法でWordを「書き込む」ようにします。

キャンバスバージョン

これは、手で書くように一文字を描きます。オン/オフの順序が1文字ごとに時間の経過とともに入れ替わる長いダッシュパターンを使用します。速度パラメータもあります。

Snapshot
アニメーションの例（下記のデモを参照）

リアリズムとオーガニック感を増すために、ランダムな文字間隔、yデルタオフセット、透明度、非常に微妙な回転、そして最後に既に「手書き」フォントを使用しました。これらを動的なパラメータとしてまとめて、幅広い「ライティングスタイル」を提供することができます。

さらに現実的な外観を得るには、パスデータが必要になりますが、これはデフォルトではありません。しかし、これは手書きの動作に近い、実装が容易な短くて効率的なコードです。

使い方

ダッシュパターンを定義することによって、マーチングアリ、点線などを作成できます。 「オフ」のドットに非常に長いドットを定義し、「オン」のドットを徐々に増やすことでこれを利用すると、ドットの長さをアニメートしながらストロークしたときに線を引くように見えます。

オフドットは非常に長いので、繰り返しパターンは見えません（長さは使用されている書体のサイズと特性によって異なります）。文字の通り道には長さがあるので、少なくともこの長さを網羅していることを確認する必要があります。

1つがアウトライン用、1つが中空部用であるため、複数のパス（例：O、R、Pなど）で構成される文字の場合、線は同時に描画されます。この方法では、各パスセグメントへのアクセスを別々にストロークする必要があるため、これについてはほとんどできません。

互換性

キャンバス要素をサポートしていないブラウザでは、テキストを表示する別の方法をタグの間に置くことができます。例えば、スタイル付きテキストです。

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

デモ

これは、生き生きとしたアニメーションのストロークオン（依存関係なし）を生成します - 

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();
canvas {background:url(http://i.imgur.com/5RIXWIE.png)}
<canvas width=630></canvas>
255
user1693593

2019を編集

リアルなアニメーションを作成できるJavaScriptライブラリを作成しました。使い方は簡単で、フォントとして機能する特別なJSONファイルが必要です。

var vara = new Vara("#container", "https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
  text: "Hello World!!",
  fontSize: 48,
  y:10
}, {
  text: "Realistic Animations",
  fontSize: 34,
  color:"#f44336"
}], {
  strokeWidth: 2,
  textAlign:"center"
});
#container {
  padding: 30px;
}
<script src="https://rawcdn.githack.com/akzhy/Vara/16e30acca2872212e28735cfdbaba696a355c780/src/vara.min.js"></script>
<div id="container"></div>

ドキュメントと例については、Githubページをご覧ください。そしてCodepen

前回の回答

次の例ではsnap.jsを使用してtspan要素を動的に作成してから、それぞれのstroke-dashoffsetをアニメートします。

var s = Snap('svg');
var text = 'Some Long Text'
var len = text.length;
var array = [];
for (var x = 0; x < len; x++) {
  var t = text[x]
  array.Push(t);
}
var txt = s.text(50, 50, array)
$('tspan').css({
  'font-size': 50,
  fill: 'none',
  stroke: 'red',
  "stroke-width":2,
  'stroke-dasharray': 300,
  'stroke-dashoffset': 300
})

$('tspan').each(function(index) {
  $(this).stop(true, true).delay(300 * index).animate({
    'stroke-dashoffset': 0,
  }, 300, function() {
    $(this).css('fill', 'red')
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
</svg>

前回の回答

Svgのstroke-dasharrayを使ってこのようなことをすることができます

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
  -moz-animation: draw 8s forwards;
  -o-animation: draw 8s forwards;
  -ms-animation: draw 8s forwards;
  animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>

keyframesアニメーションがなければ、このようなことができます。

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="5" font-size="50"  stroke-dasharray="1000"
  stroke-dashoffset="1000">Some text
  <animate attributeName="stroke-dashoffset"
    from="1000"
    to="0" 
    dur="8s"
      fill="freeze">
          
      </animate> </text>
</svg>

そしてIEサポートのためにはjquery/javascriptを使うことができます。

$('text').animate({
    'stroke-dashoffset':'0'
},8000)
text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50" 
 >Some text
  </text>
</svg>
211
Akshay

CSSのみ

@keyframes fadein_left {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

#start:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0%;
  opacity: 0.7;
  height: 25px;
  background: #fff;
  animation: fadein_left 3s;
}
<div id="start">
  some text some text some text some text some text
</div>
2
zloctb