আমি কীভাবে কোনও ওয়েব পৃষ্ঠায় লেখার অঙ্কনটি অ্যানিমেট করতে পারি?

Question

আমি একটি ওয়েব পৃষ্ঠা রাখতে চাই যার একটি কেন্দ্রিক শব্দ রয়েছে।

আমি এই শব্দটি একটি অ্যানিমেশন দিয়ে আঁকতে চাই, যেমন পৃষ্ঠাটি এই শব্দটি "লেখায়" ঠিক তেমনভাবেই হয় যা আমরা বলি, অর্থাত এটি একটি বিন্দুতে শুরু হয় এবং সময়ের সাথে সাথে রেখা এবং আঁকাগুলি আঁকেন যাতে শেষ ফলাফলটি একটি গ্লাইফ হয়।

<canvas>এটি ডিওম দিয়ে বা এটি করা হয়েছে কিনা আমি যত্নশীল না এবং এটি জাভাস্ক্রিপ্ট বা সিএসএস দিয়ে সম্পন্ন হয়েছে কিনা তা আমি বিবেচনা করি না। JQuery এর অনুপস্থিতি চমৎকার হবে, তবে প্রয়োজন নেই।

কিভাবে আমি এটি করতে পারব? আমি কোনও ভাগ্য ছাড়াই নিখুঁতভাবে অনুসন্ধান করেছি ।

Comments

আমি কিভাবে আসলে "হাতে লেখা" অক্ষর মধ্যে কিছু চিন্তাভাবনা দিলেন এবং এখানে আমার চিন্তা পোস্ট stackoverflow.com/questions/12700731/...

— Marke

কোডড্রপসের নিবন্ধে সত্যই একই রকম কিছু রয়েছে ( টাইম্পানাসের একটি ডেমো সহ )

— ফ্রান্সিসকো

দিনগুলিতে, আমি অ্যানিমেটেড স্প্রাইট মুখোশ ব্যবহার করে ফ্ল্যাশে এই অ্যানিমেশনটি করছিলাম। আপনার যা প্রয়োজন তা হ'ল একটি মুখোশটি সঞ্চারিত করা, যার অর্থ এটি ক্রমান্বয়ে পাঠ্যটি প্রকাশ করে। অ্যানিমেশনটি মাস্ক ফ্রেমের তৈরি হত।

— টিবেরিউ-আয়নু স্টান

অবশ্যই, আপনার পাঠ্যগুলিকে বক্ররেখায় ভাঙ্গতে সক্ষম মৌমাছির সুবিধা রয়েছে। আপনার হাতের আগে এসভিজি এবং কিছু এসভিজি সম্পাদক (চিত্রক, বা অন্য যে কোনও কিছুই আপনার পাঠ্যের একটি এসভিজি তৈরি করতে পারে) ব্যবহার করে আপনাকে এটি করতে হবে। আমি জানি না এসভিজিগুলি মাস্কগুলি সমর্থন করে কিনা, তবে তারা যদি তা করে তবে এনিমেট করা আরও সহজ হয়ে যায়।

— টিবেরিউ-আয়নু স্টান

অ্যানিমেশনটি তৈরি করতে জাভাস্ক্রিপ্ট সহ এসভিজি কোড এবং এসভিজি কোডটি ম্যানিপুলেট করুন।

— ডেমজ

Answer 1

আমি এই শব্দটি একটি অ্যানিমেশন দিয়ে আঁকতে চাই, যেমন পৃষ্ঠাটি শব্দটি "লেখায়" ঠিক তেমনভাবেই শব্দটি করে দেয়

ক্যানভাস সংস্করণ

এটি একক অক্ষর আঁকবে যেমন একটি হাত দ্বারা লেখার মতো। এটি একটি দীর্ঘ ড্যাশ-প্যাটার্ন ব্যবহার করে যেখানে প্রতি চার্জ সময়ের সাথে অন / অফ অর্ডার অদলবদল করা হয়। এটির গতির প্যারামিটারও রয়েছে।

^{অ্যানিমেশন উদাহরণ (নীচে ডেমো দেখুন)}

বাস্তববাদ এবং জৈবিক অনুভূতি বাড়ানোর জন্য, আমি এলোমেলো লেটার-স্পেসিং, একটি ডেল্টা অফসেট, স্বচ্ছতা, একটি খুব সূক্ষ্ম ঘূর্ণন এবং অবশেষে একটি ইতিমধ্যে "হস্তাক্ষর" ফন্ট ব্যবহার করেছি। এগুলি "লেখার শৈলীগুলির" বিস্তৃত পরিসীমা সরবরাহের জন্য গতিশীল পরামিতি হিসাবে মোড়ানো যেতে পারে।

আরও বাস্তবের চেহারার জন্য পাথের ডেটা প্রয়োজন হবে যা এটি ডিফল্টরূপে নয়। তবে এটি কোডের একটি সংক্ষিপ্ত এবং দক্ষ অংশ যা হাতের লিখিত আচরণের প্রায় কাছাকাছি, এবং কার্যকর করা সহজ।

কিভাবে এটা কাজ করে

একটি ড্যাশ প্যাটার্ন সংজ্ঞায়িত করে আমরা মার্চিং পিঁপড়া, বিন্দুযুক্ত লাইন এবং আরও কিছু তৈরি করতে পারি। "অফ" বিন্দুর জন্য খুব দীর্ঘ বিন্দুটি সংজ্ঞায়িত করে এবং ধীরে ধীরে "চালু" বিন্দুটি বৃদ্ধি করে এটির সুবিধা গ্রহণ করা, এটি বিন্দুর দৈর্ঘ্য অ্যানিমেটেড করার সময় স্ট্রোক করলে লাইনটি আঁকানোর মায়া দেয়।

অফ ডট যেহেতু দীর্ঘ তাই পুনরাবৃত্তি প্যাটার্নটি দৃশ্যমান হবে না (টাইপফেসটি ব্যবহার করার আকার এবং বৈশিষ্ট্যগুলির সাথে দৈর্ঘ্য পৃথক হবে)। চিঠির পথটির দৈর্ঘ্য হবে তাই আমাদের নিশ্চিত করতে হবে যে আমাদের প্রতিটি বিন্দু কমপক্ষে এই দৈর্ঘ্যটি coveringেকে রাখছে।

একাধিক পাথ (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

আমরা কীভাবে এটি একাধিক লাইন এবং একটি দীর্ঘ পাঠ্য ব্লকের জন্য তৈরি করতে পারি?

— সাদ ফারুক

@ কে 3 এন হ্যাঁ, এটি আসলে একটি দুর্দান্ত স্পর্শ ছিল: পি দুর্দান্ত কাজ।

— কীজার

@ AliAl-arnous আপনি বিপরীত প্রান্তে x সেট করতে পারেন, যোগ করার পরিবর্তে চরের প্রস্থ বিয়োগ করতে পারেন, অবহেলিত নেতিবাচক স্থানের সাথে রূপান্তর করতে পারেন এবং চরের অপর প্রান্তে সাফ করার জন্য ClearRect পরিবর্তন করতে পারেন।

Answer 2

2019 সম্পাদনা করুন

---

আমি একটি জাভাস্ক্রিপ্ট লাইব্রেরি তৈরি করেছি যা বাস্তবসম্মত অ্যানিমেশন তৈরি করতে পারে। এটি ব্যবহার করা সহজ এবং একটি বিশেষ জেএসওএন ফাইল প্রয়োজন যা ফন্ট হিসাবে কাজ করে।

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>

ডকুমেন্টেশন এবং উদাহরণগুলির জন্য গিথুব পৃষ্ঠাটি চেকআউট করুন । এবং কোডেন

---

পূর্ববর্তী উত্তর

নীচের উদাহরণটি স্ন্যাপ.জেএস ব্যবহার করে গতিশীল 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>

পূর্ববর্তী উত্তর

---

আপনি এসভিজি ব্যবহার করে এরকম কিছু করতে পারেন 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>

এবং আইই সাপোর্টের জন্য আপনি 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

বাহ, এটা সত্যিই আকর্ষণীয়। আমি আপনার আসল কোড স্নিপেট নিয়েছি এবং ডুপ্লিকেট সিএসএস বৈশিষ্ট্যগুলি অপসারণ করে, শতাংশ-ভিত্তিক অফসেট এবং দশারির মানগুলি ব্যবহার করে এবং কোডটি কীভাবে কাজ করছে তা আরও সুস্পষ্ট করতে স্ট্রোকের প্রস্থকে পরিবর্তন করে এটির কিছুটা উন্নতি করেছি: jsfiddle.net/Aeded3232/gdc4azLn / 1 আপনি যদি চান তবে আপনার উত্তরটিতে এই উন্নতিগুলির যে কোনও একটি সম্পাদনা করতে নির্দ্বিধায় মনে করুন।

— Ajedi32

এটি এই প্রশ্নের একটি মহাকাব্য সমাধান, এসভিজি ক্যানভাসের চেয়ে ভাল (+1) যতক্ষণ না ব্রাউজার সমর্থন না করে তা পরিবর্তে পাঠ্যটি প্রদর্শন করবে।

— জেফারি থিগিনটোকি

@ জেফারিথাগিন্টোকি আপনি ক্যানভাসের সাহায্যেও এটি করতে পারেন, ক্যানভাস ট্যাগগুলির মধ্যে কেবল পাঠ্যটি রাখুন, যদি ক্যানভাসটি পাঠ্য সমর্থন করে না (বা বডি টেক্সটে অন্যান্য উত্তর শোয়ের মতো অ্যানিমেটেড জিএফ) প্রদর্শিত হবে। যদি ব্রাউজার ক্যানভাস সমর্থন করে না তবে সম্ভবত এসভিজি সমর্থন করবে না।

— টরক্স 4'15

আমার মনে হয় এসভিজি পাঠ্যের ব্যবহার দুর্দান্ত, তবে আমি ভাবছি, কোনও পর্যায়ে ফিলটি যুক্ত করা কি সম্ভব? চিঠিগুলির বাহ্যরেখা সমস্ত প্রকল্পে সুন্দর দেখাচ্ছে না, চিয়ার্স! এবং অবশ্যই এই উত্তরটির জন্য +1

— এলোমেলো গায়িকা 04

@ 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

অনেক পরীক্ষা অনুসরণ, এখানে কিছু নোট। লক্ষ্যটি হ'ল কমপক্ষে ব্লক করা উপায়ে দ্রুত পাঠ্য ডেটা প্রদর্শন করা, ডিওএম ভারী পৃষ্ঠায় ব্যবহারকারীদের ইন্টারঅ্যাকশন প্রয়োজন requ

একই জিনিস অর্জন করার জন্য অবশ্যই অনেকগুলি উপায় রয়েছে। এই উদাহরণে, পার্থক্যগুলি সুস্পষ্ট নাও হতে পারে, এটি সত্যই জটিল ইন্টারফেসের জন্য প্রযোজ্য।

সবচেয়ে ধীরে : innerHTMLএবং ইনলাইন স্টাইলিং। প্রতিটি পুনরাবৃত্তিতে ডিওএম পুনরায় গণনা করা হয়। ব্রাউজারটি ট্রেন রাখতে কঠোর পরিশ্রম করছে। এটি দ্রুত ব্যর্থ হবে, মেমরি ফাঁস এবং হিমশীতল সৃষ্টি করে:

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>

উপরের উদাহরণে, ডিওএমটি এখনও পাঠ্য ওভারফ্লোর জন্য পুনরায় গণনা করা হচ্ছে .. আমরা ডিবাগারটি খুব শক্তভাবে জ্বলতে দেখতে পাচ্ছি। এটি ক্যাসকেডিং উপাদানগুলির পক্ষে সত্যই গুরুত্বপূর্ণ! এটি এখনও জাভাস্ক্রিপ্ট এবং ব্যবহারকারীর স্ক্রোলিংকে ধীর করতে পারে।

সম্পূর্ণ শক্তি : CSS contentনিয়ম এবং CSS ভেরিয়েবলগুলির সাহায্যে ডেটা রিফ্রেশ করার জন্য একা সিএসএস ব্যবহার করা সম্ভব । পাঠ্যটি তখন নির্বাচনযোগ্য হবে না।

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>

আমার পরীক্ষাগুলি দুর্দান্ত উন্নতি দেখিয়েছে, জাভাস্ক্রিপ্ট ইঞ্জিনটি অন্য কাজগুলিতে দ্রুত এড়িয়ে চলেছে। কখনও কখনও এটি উপরের উদাহরণের চেয়ে কিছুটা ধীর শুরু হতে পারে। তবে এর পাশেই, এটি ব্যবহারকারীদের স্ক্রোলগুলিতে বাধা দেয় না এবং ডিবাগারটিও পছন্দ করছে, আর কোনও জাম্পিং নেই।