मैं वेब पेज पर टेक्स्ट की ड्राइंग को कैसे एनिमेट कर सकता हूं?

Question

मैं एक वेब पेज रखना चाहता हूं जिसमें एक केंद्रित शब्द हो।

मैं चाहता हूं कि यह शब्द एक एनीमेशन के साथ खींचा जाए, जैसे कि पृष्ठ "शब्द" उसी तरह से शब्द लिखता है जो हम करेंगे, अर्थात यह एक बिंदु पर शुरू होता है और समय के साथ लाइनें और घटता खींचता है जैसे कि अंतिम परिणाम एक ग्लिफ़ है।

मुझे परवाह नहीं है अगर यह <canvas>या डोम के साथ किया जाता है , और मुझे परवाह नहीं है कि यह जावास्क्रिप्ट या सीएसएस के साथ किया गया है या नहीं। JQuery का अभाव अच्छा होगा, लेकिन इसकी आवश्यकता नहीं है।

मैं यह कैसे कर सकता हूँ? मैंने बिना किसी भाग्य के थक कर खोजा है ।

Comments

मैंने कुछ सोचा कि वास्तव में "हस्तलिखित" पात्रों को कैसे रखा जाए और अपने विचारों को यहाँ पोस्ट किया: stackoverflow.com/questions/12700731/…

— markE

वहाँ वास्तव में एक कोड्रोप्स लेख ( tympanus में एक डेमो के साथ ) के समान है

— फ्रांसिस्को प्रेसेंशिया

वापस दिनों में, मैं इस एनिमेशन में एनिमेटेड स्प्राइट मास्क का उपयोग कर रहा था। आपको एक मुखौटा को चेतन करने की आवश्यकता है, जिसका अर्थ है कि यह उत्तरोत्तर पाठ प्रकट करता है। एनीमेशन मास्क फ्रेम से बना होगा।

— तिबरियू-आयनू स्टेन

बेशक, आपको घटता पाठ को तोड़ने में सक्षम मधुमक्खी का लाभ होगा। आपको एसवीजी और कुछ एसवीजी संपादक (इलस्ट्रेटर, या जो भी आपके पाठ का एसवीजी बना सकते हैं) का उपयोग करने से पहले यह प्रयोग करना होगा। मुझे नहीं पता कि एसवीजी मास्क का समर्थन करते हैं, लेकिन अगर वे करते हैं, तो यह चेतन के लिए बहुत आसान हो जाएगा।

— तिबेरिउ-आयनो स्टेन

एसवीजी का उपयोग करें और एनीमेशन बनाने के लिए जावास्क्रिप्ट के साथ एसवीजी कोड में हेरफेर करें।

— डेमज़

Answer 1

मैं चाहता हूं कि यह शब्द एक एनीमेशन के साथ खींचा जाए, जैसे कि पृष्ठ "शब्द" उसी तरह से लिखता है जो हम करेंगे

कैनवास संस्करण

यह एकल वर्णों को अधिक आकर्षित करेगा जैसे एक हाथ से लिखेगा। यह एक लंबे डैश-पैटर्न का उपयोग करता है जहां समय / समय पर प्रति चार्ट पर स्वैप किया जाता है। इसका एक गति पैरामीटर भी है।

^{उदाहरण एनीमेशन (नीचे डेमो देखें)}

यथार्थवाद और जैविक महसूस को बढ़ाने के लिए, मैंने यादृच्छिक पत्र-रिक्ति, एक वाई डेल्टा ऑफसेट, पारदर्शिता, एक बहुत ही सूक्ष्म घुमाव और अंत में पहले से ही "हस्तलिखित" फ़ॉन्ट का उपयोग करके जोड़ा। इन्हें "लेखन शैलियों" की एक विस्तृत श्रृंखला प्रदान करने के लिए गतिशील मापदंडों के रूप में लपेटा जा सकता है।

और भी अधिक यथार्थवादी देखो के लिए पथ डेटा की आवश्यकता होगी जो यह डिफ़ॉल्ट रूप से नहीं है। लेकिन यह कोड का एक छोटा और कुशल टुकड़ा है, जो हाथ से लिखे गए व्यवहार का अनुमान लगाता है, और इसे लागू करना आसान है।

यह काम किस प्रकार करता है

डैश पैटर्न को परिभाषित करके हम मार्चिंग चींटियों, बिंदीदार रेखाओं और इसके आगे का निर्माण कर सकते हैं। "ऑफ" डॉट के लिए एक बहुत लंबी डॉट को परिभाषित करके और धीरे-धीरे "ऑन" डॉट को बढ़ाकर इसका लाभ उठाते हुए, यह डॉट की लंबाई को एनिमेट करते समय रेखा को खींचने पर भ्रम की स्थिति देगा।

चूंकि ऑफ डॉट इतना लंबा है कि रिपीटिंग पैटर्न दिखाई नहीं देगा (टाइपफेस की लंबाई और विशेषताओं के साथ अलग-अलग होगा)। पत्र के पथ की लंबाई होगी इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि हम प्रत्येक डॉट को कम से कम इस लंबाई को कवर कर रहे हैं।

ऐसे अक्षरों के लिए जिनमें एक से अधिक पथ होते हैं (f.ex. 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>

Comments

क्या मैं केवल इसके लिए पागल हो रहा हूं? ऐसा लगता है कि वास्तविक, कम से कम, पहले उत्तर की तुलना में बेहतर है, और प्रश्नकर्ता के प्रश्न के सबसे करीब है।

— खोई

मैंने अन्य उत्तर का उपयोग करते हुए समाप्त कर दिया, क्योंकि मुझे तुरंत एक त्वरित-एन-गंदे हैक के रूप में इसकी आवश्यकता थी जिसे मैंने अगले दिन उपयोग किया था और फिर कभी भी छुआ नहीं था, लेकिन मैं इसे स्वीकार कर रहा हूं क्योंकि यह उस तरह से करीब है जैसा मैं देख रहा था के लिये।

— strugee

हम इसे कई लाइनों और एक लंबे टेक्स्ट ब्लॉक के लिए कैसे बना सकते हैं?

— साद फ़ारूक़

@ K3N हाँ, यह वास्तव में एक अच्छा स्पर्श था: पी ग्रेट वर्क।

— कीसर

@ AliAl-arnous आप x को विपरीत छोर पर सेट कर सकते हैं, जोड़ने के बजाय चार की चौड़ाई घटा सकते हैं, नकारात्मक नकारात्मक स्थान के साथ बदल सकते हैं और चार्ट के दूसरी तरफ स्पष्ट करने के लिए स्पष्टRRect को बदल सकते हैं।

Answer 2

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>

प्रलेखन और उदाहरण के लिए Github पृष्ठ चेकआउट करें । और कोडपेन

---

पिछला उत्तर

नीचे दिए गए उदाहरण 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 / जावास्क्रिप्ट का उपयोग कर सकते हैं

$('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>

Comments

वाह, यह वाकई दिलचस्प है। मैंने आपका मूल कोड स्निपेट लिया है और डुप्लिकेट CSS गुणों को हटाकर, प्रतिशत-आधारित ऑफ़सेट्स और डेशर्रे मानों का उपयोग करके, और कोड को काम करने के तरीके को और अधिक स्पष्ट करने के लिए स्ट्रोक की चौड़ाई को बदलकर इसे बेहतर बनाया है: jsfiddle.net -Ajedi32/gdc4azLn / 1 यदि आप चाहें तो उन सुधारों को अपने उत्तर में संपादित करने के लिए स्वतंत्र महसूस करें।

— अजादि32

यह इस प्रश्न के लिए एक महाकाव्य समाधान है, एसवीजी कैनवास (+1) से बेहतर है क्योंकि यदि ब्राउज़र इसका समर्थन नहीं करता है तो यह पाठ को दिखाएगा।

— जेफरी थाजिंटोकी

@JefferyThaGintoki आप इसे कैनवास के साथ भी कर सकते हैं, बस कैनवास टैग के बीच पाठ रखें, यदि कैनवास को पाठ का समर्थन नहीं किया गया है (या शरीर के पाठ में अन्य उत्तर शो के रूप में एनिमेटेड gif) दिखाई देगा। यदि ब्राउज़र कैनवास का समर्थन नहीं करता है तो यह शायद svg का भी समर्थन नहीं करेगा।

— टॉर्क्स

मुझे लगता है कि एसवीजी पाठ का उपयोग बहुत अच्छा है, हालांकि मैं सोच रहा हूं कि क्या किसी बिंदु पर भरना संभव है? बस पत्र की रूपरेखा सभी परियोजनाओं, चीयर्स में अच्छी नहीं लगती है! और निश्चित रूप से +1 इस उत्तर के लिए

— randomguy04

@ randomguy04 पहले स्निपेट की जांच करें, मैंने इसे भरने के प्रभाव को जोड़ने के लिए संपादित किया है। यह $(this).css('fill', 'red')एनीमेशन में एक कॉलबैक के रूप में जोड़कर किया जाता है

— अक्षय

Answer 3

केवल सीएसएस:

@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>

Answer 4

कई परीक्षणों के बाद, यहां कुछ नोट दिए गए हैं। यह लक्ष्य उपयोगकर्ताओं के अंतःक्रियाओं की आवश्यकता वाले DOM भारी पृष्ठों पर कम से कम अवरुद्ध तरीके से तेज पाठ डेटा प्रदर्शित करना है ।

एक ही चीज को हासिल करने के कई तरीके हैं। इस उदाहरण पर, अंतर स्पष्ट नहीं हो सकता है, यह वास्तव में जटिल इंटरफेस पर लागू होता है।

सबसे धीमा : innerHTMLऔर इनलाइन स्टाइल। प्रत्येक पुनरावृत्तियों पर DOM का पुन: संयोजन किया जाता है। ट्रेन को सुरक्षित रखने के लिए ब्राउज़र कड़ी मेहनत कर रहा है। यह जल्दी से विफल हो जाएगा, जिससे मेमोरी लीक और जमा हो जाएगी:

setInterval(function(){
  out.innerHTML = `<span style="position:fixed;top:${~~(Math.random() * 220)}px">${Math.random() * 1000}<span>`
},1)

<h1 id="out"></h1>

बेहतर तरीका : उपयोग करना textContent, requestAnimationFrameऔर वेब एनीमेशन एपीआई। यह आसान हो जाता है, यह डोम भारी पृष्ठों पर स्पष्ट है। उपयोगकर्ता इंटरैक्शन रिपैट्स को ब्लॉक नहीं करेगा। इंटरफ़ेस को अच्छी तरह से प्रतिक्रियाशील रखने के लिए कुछ रिपीट्स को छोड़ दिया जा सकता है।

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.textContent = Math.random() * 1000
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
position: fixed}

<h1 id="out"></h1>

उपरोक्त उदाहरण पर, DOM को अभी भी टेक्स्ट ओवरफ्लो के लिए पुनर्गणित किया जा रहा है .. हम डीबगर को हार्ड ब्लिंक करते हुए देख सकते हैं। यह वास्तव में कैस्केडिंग तत्वों पर बात करता है! यह अभी भी जावास्क्रिप्ट और उपयोगकर्ता स्क्रॉलिंग को धीमा कर सकता है।

पूर्ण शक्ति : सीएसएस contentनियम और सीएसएस चर के साथ डेटा को ताज़ा करने के लिए अकेले सीएसएस का उपयोग करना संभव है । पाठ तब चयन करने योग्य नहीं होगा।

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.setAttribute('data-before', Math.random() * 1000)
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
  position: fixed
  
  }
#out:before {
   content: attr(data-before)
 }

<h1 id="out"></h1>

मेरे परीक्षणों में बहुत सुधार हुआ है, जावास्क्रिप्ट इंजन अन्य कार्यों पर जल्दी से छोड़ रहा है। कभी-कभी यह उपरोक्त उदाहरण की तुलना में थोड़ा धीमा शुरू कर सकता है। लेकिन इसके अलावा, यह उपयोगकर्ताओं को स्क्रॉल करने से रोकता नहीं है, और डिबगर भी पसंद कर रहा है, कोई और अधिक जंपिंग नहीं।