it-swarm.asia

كيف يمكنني تحريك رسم النص على صفحة ويب؟

أرغب في الحصول على صفحة ويب بها كلمة واحدة مركزية.

أريد أن تُرسم هذه الكلمة برسوم متحركة ، بحيث "تكتب" الكلمة الكلمة بالطريقة نفسها التي نرغب بها ، أي أنها تبدأ من نقطة واحدة وترسم الخطوط والمنحنيات بمرور الوقت بحيث تكون النتيجة النهائية عبارة عن حرف رسومي.

لا يهمني إذا تم ذلك باستخدام <canvas> أو DOM ، ولا يهمني ما إذا كان يتم ذلك باستخدام JavaScript أو CSS. سيكون غياب jQuery لطيفًا ، لكن ليس مطلوبًا.

كيف يمكنني أن أفعل هذا؟ لقد بحثت بشكل شامل مع عدم وجود حظ.

223
strugee

أريد أن يتم رسم هذه الكلمة برسوم متحركة ، بحيث "تكتب" الكلمة الكلمة بالطريقة نفسها التي نرغب بها

نسخة قماش

سيؤدي هذا إلى رسم أحرف مفردة أشبه بالكتابة من جانب واحد. يستخدم نمط شرطة طويل حيث يتم تبديل أمر التشغيل/الإيقاف بمرور الوقت لكل حرف. كما أن لديها معلمة السرعة.

Snapshot
مثال للرسوم المتحركة (انظر العرض التوضيحي أدناه)

لزيادة الواقعية والشعور العضوي ، أضفت تباعدًا عشوائيًا للأحرف ، وإزاحة دلتا y ، وشفافية ، وتناوبًا دقيقًا للغاية ، وأخيرا باستخدام خط "مكتوب بخط اليد" بالفعل. يمكن تغليفها كمعلمات ديناميكية لتوفير مجموعة واسعة من "أنماط الكتابة".

لإلقاء نظرة أكثر واقعية ، ستكون بيانات المسار مطلوبة والتي لا تكون افتراضيًا. ولكن هذا جزء من الشفرة قصير وفعال ويقارب السلوك المكتوب بخط اليد ، ويسهل تنفيذه.

كيف تعمل

من خلال تحديد نمط اندفاعة يمكننا إنشاء مسيرات النمل وخطوط منقط وما إلى ذلك. الاستفادة من هذا عن طريق تحديد نقطة طويلة جدًا للنقطة "off" وزيادة النقطة "on" تدريجياً ، سوف يعطي هذا الوهم رسم الخط عند ضربه أثناء تنشيط طول النقطة.

نظرًا لأن نقطة الإيقاف طويلة جدًا ، فلن يكون نمط التكرار مرئيًا (سيختلف الطول مع حجم وخصائص المحرف المستخدم). سيكون طول مسار الرسالة لذلك نحتاج إلى التأكد من أننا نغطي كل نقطة على الأقل هذا الطول.

بالنسبة للحروف التي تتكون من أكثر من مسار واحد (على سبيل المثال ، O ، R ، P ، إلخ) كما هو الحال مع المخطط التفصيلي ، واحد بالنسبة للجزء المجوف ، ستظهر الخطوط في وقت واحد. لا يمكننا فعل الكثير حيال ذلك باستخدام هذه التقنية لأنها تتطلب الوصول إلى كل مقطع مسار ليتم تقويته بشكل منفصل.

التوافق

بالنسبة للمتصفحات التي لا تدعم عنصر canvas ، يمكن وضع طريقة بديلة لإظهار النص بين العلامات ، على سبيل المثال نص مصمم:

<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>
254
user1693593

تحرير 2019


لقد أنشأت مكتبة جافا سكريبت يمكنها إنشاء رسوم متحركة واقعية. إنه سهل الاستخدام ويتطلب ملف 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>

تحقق منصفحة جيثبللوثائق والأمثلة. و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's 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>
209
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