আমি ইলাস্ট্রেটারে কয়েকটি দৃষ্টান্ত তৈরি করেছি এবং আমি যে ওয়েবসাইটটিতে কাজ করছি তার জন্য এটি সঞ্চার করার পরিকল্পনা করছি, আমি ফ্ল্যাশ সহ ক্রিয়েট.জেএস এর টুলকিট শুনেছি , তবে এটি যাওয়ার সর্বোত্তম উপায় বা অন্য কোনও আছে " ভাল "এটা করার উপায়?
আমি যে ধরণের অ্যানিমেশনগুলির জন্য লক্ষ্য রাখছি তার একটি উদাহরণ এখানে রয়েছে: http://kontramax.com/wp-content/uploads/envato/demo/ आगामी_ पावसा_ম্যাচিন / ডার্ক /
উত্তর:
ওয়েবে জিনিসগুলি সঞ্চার করার জন্য অনেকগুলি উপায় রয়েছে। অ্যানিমেশন তৈরির আরও অনেক উপায় রয়েছে তারপরে ওয়েব অ্যানিমেশনগুলিতে রফতানি করুন।
শ্রম বিভাজনের স্পষ্ট কারণ এবং গ্রাফিকাল সম্পাদক ব্যবহারের জন্য আফটারএফেক্টস বা অ্যানিমেট সিসি (যা চিত্রক এবং ফটোশপ ফাইল উভয়ই আমদানি করতে পারে) এর মতো কিছুতে অ্যানিমেশনগুলি ডিজাইনের বিশাল সুবিধা রয়েছে।
এই কথার সাথে, আপনার সর্বদা, শেষের দিকে, নিম্নলিখিতগুলির একটিটি সংকলন করা উচিত :
সীমিত যোগাযোগের ক্ষমতা:
আরও সম্পূর্ণ ইন্টারেক্টিভ:
এখন, আমি প্রতিটি আরও একটু বিস্তারিতভাবে যাব।
যখন অ্যানিমেশনগুলিতে খুব বেশি ইন্টারঅ্যাকশন প্রয়োজন হয় না, গতিশীল আকারের প্রয়োজন হয় না এবং তুলনামূলকভাবে ছোট হয় তখন একটি জিআইএফ যাওয়ার ভাল উপায়। ভাল তৈরি জিআইএফগুলি কোনও কার্যকারিতা উদ্বেগ ছাড়াই আপনার সংযুক্ত চিত্রের মতোই বিশদ হতে পারে। এমনকি এটির উপরে স্বচ্ছ ওভারলে (বা এটির একটি অংশ) ব্যবহার করে সামান্য মিথস্ক্রিয়াও সম্ভব।
পার্শ্ব নোট: এখন ইমগুর দ্বারা তৈরি একটি .gifvফর্ম্যাট রয়েছে যা ফ্লাইতে জিআইএফ ফাইলগুলিকে ওয়েবএম বা এমপি 4 ভিডিও ফর্ম্যাটে রূপান্তর করে। এটি শেষ ফাইলের আকার হ্রাস করে কর্মক্ষমতা বৃদ্ধি করে। আপনি একই কাজ বিবেচনা করতে পারেন।
একটি মসৃণ তবে অত্যন্ত স্টাইলযুক্ত অ্যানিমেশনটি রাখার আরেকটি উপায় হ'ল স্প্রাইট ব্যবহার করা। গুগল লোগো অ্যানিমেশনের মতো জিনিসের জন্য এই পদ্ধতির ব্যবহার করে । আর একটি দুর্দান্ত উদাহরণ আলেকজান্ডার এনজেলের পুরানো ওয়েবসাইট যা এই পদ্ধতির সাহায্যে অসুস্থ টাইপোগ্রাফি অ্যানিমেশন ছিল। এটি অনুকূল হয় যখন কোনও জিআইএফ খুব বেশি পরিমাণে হয় তবে আপনার খুব বেশি ইন্টারঅ্যাকশন প্রয়োজন হয় না।
আমি একটি খুব আকর্ষণীয় জাভাস্ক্রিপ্ট অ্যানিমেশনটিও দেখেছি যা গুগল ব্যবহৃত স্প্রাইট বা জিআইএফ এর অনুরূপ (উপরে বামে ক্রোম চিত্রটি রাখে - এটি ক্রোমে থাকা প্রয়োজন) তবে পরিবর্তে একটি অ্যানিমেটেড মাস্ক ব্যবহার করে। আমি অনুমান করছি যে তারা মোট পদ্ধতির ফাইলের আকার সীমাবদ্ধ করতে এই পদ্ধতিটি ব্যবহার করেছিল।
সাম্প্রতিক বছরগুলিতে আমরা ভিডিও সম্পর্কিত দুর্দান্ত ক্ষমতা অর্জন করেছি। <video>উপাদান Let us আমরা যেভাবে ভাব বিনিময় করেন ও ব্যবহার ভিডিও আগে কখনো পছন্দ কাস্টমাইজ আছে। এখন আমরা সহজেই পূর্ণ-স্ক্রিনের পটভূমি ভিডিও ব্যবহার করতে পারি এবং স্ক্রোলের ফ্রেমে বাই ফ্রেমের মতো জিনিসগুলি করতে পারি । আমি আরও লক্ষ্য করেছি যে ফেসবুক কিছু বিশেষ অ্যানিমেশনের জন্য ভিডিও ব্যবহার করে যখন বিশেষ ইভেন্টগুলির চারপাশে তাদের ফিডে ব্যবহারকারীদের স্বাগত জানায়। সুবিধাগুলি হ'ল এটি একটি সুন্দর ছোট ফাইল আকারে সংকুচিত করা যেতে পারে এবং আরও বিস্তৃত অ্যানিমেশন করতে পারে (ভিডিও সম্পাদনা সফ্টওয়্যার যা কিছু করতে পারে)। যেমন, যদি কেউ অসুস্থ ভিডিও তৈরি করতে পারেন তবে এটি ওয়েবপৃষ্ঠায় একটি দুর্দান্ত সংযোজন হিসাবে রূপান্তর করা মোটামুটি সহজ।
স্পষ্টতই, ভিডিওগুলি ওয়েবে বেশিরভাগ অ্যানিমেশনগুলির জন্য ভাল নয় (যেমন বোতাম ট্রানজিশন ইত্যাদি), তাই এগুলি সর্বত্র ব্যবহার করবেন না।
এই সমস্ত বলা হচ্ছে, আপনি যদি অ্যানিমেশনটি গতিশীলভাবে তৈরি করতে চান, যখন আপনি 3 ডি পরিবেশ তৈরি করতে চান যখন সত্যিকারের মৌলিক মিথস্ক্রিয়ার চেয়ে বেশি প্রয়োজন হয়, এবং অন্যান্য অনেক ক্ষেত্রে, একটি জিআইএফ, স্প্রাইট বা ভিডিও সহজভাবে হয় না কাটো এটা. এটি ঠিক হয়ে গেলে, আরও বেশ কয়েকটি বিকল্প রয়েছে, যার মধ্যে সেরাটি আপনার অ্যানিমেশন এবং প্রয়োজনের উপর নির্ভর করে।
আমার কাছে পরিসংখ্যান নেই তবে বেশিরভাগ ওয়েব অ্যানিমেশনগুলিতে আমি ক্যানভাস ব্যবহার করতে দেখেছি । ক্যানভাস এর কার্যকারিতা এবং সৃষ্টিতে নমনীয়তার কারণে ব্যবহার করা দুর্দান্ত। এটি একে অপরের শীর্ষে থাকা জিনিসগুলি - যেমন একটি বাস্তব ক্যানভাসের মতো রঙ করে - এই কারণে এটি কেবল একটি ব্রাউজার (ডিওএম) উপাদান ব্যবহার করে। কী আঁকা হয়েছে এবং কোথায় জাভাস্ক্রিপ্ট দিয়ে ট্র্যাক রেখে আমরা কিছু চমত্কার অ্যানিমেশন এবং এমনকি গেম তৈরি করতে পারি।
যাইহোক, ক্যানভাস ব্যবহারের প্রাথমিক অপূর্ণতা এটির স্কেল করতে তুলনামূলক অসুবিধা। প্রায়শই, অবশ্যই অ্যানিমেশনটির উপর নির্ভর করে, অন্য উপায়গুলি ব্যবহার করার চেয়ে প্রতিক্রিয়াশীল ক্যানভাস অ্যানিমেশন তৈরি করা আরও বেশি কঠিন। আরেকটি নেতিবাচক দিকটি হ'ল ক্যানভাসে প্রচুর সামগ্রী থাকা খুব এসইও বান্ধব নয় কারণ ক্যানভাস উপাদানগুলি ক্রলযোগ্য নয় (প্রযোজ্য ক্ষেত্রে বিষয়বস্তুটির কিছু দৃশ্যমান লুকানো এইচটিএমএল রেখে আপনি এটি ঘিরে কাজ করতে পারেন)। একই নোটে, ব্যবহারকারীদের জন্য পাঠ্য নির্বাচনের মতো জিনিসগুলি ক্যানভাসের সাথে (বিশেষত ক্রিয়েটজেএসের মতো লাইব্রেরি ব্যবহার না করে) কঠিন।
ক্যানভাসের একটি প্রধান ব্যবহার হ'ল গুগলের ডুডল , যা প্রায়শই ক্যানভাসে করা হয়। যখন তাদের একটি গেম বা ইন্টারেক্টিভ অ্যানিমেশন থাকে, তারা যতবার খুশি ততবারই ক্যানভাস ব্যবহার করে। কোনও ইন্টারঅ্যাকশন না থাকলে তারা জিআইএফ বা স্প্রাইট ব্যবহার করবে।
ক্যানভাসের সাথে আরও সহজভাবে কাজ করতে সাহায্য করার জন্য অনেক দুর্দান্ত গ্রন্থাগার রয়েছে, যদিও এটি করা দরকার যা নির্ভর করে এটি অবশ্যই প্রয়োজন হয় না। কেবল ক্যানভাসের জন্য তৈরি করাগুলির মধ্যে হ'ল ক্রিয়েটজেএস (যা আপনি অ্যানিমেট সিসি থেকে রফতানি করতে পারেন), পিক্সি.জেএস , পেপারজেএস , কিনেটিকজেএস এবং ফ্যাব্রিকজেএস ( সেগুলি সম্পর্কে আমার ধারণা অনুসারে স্থাপন করা হয়েছে)। লোটি (পূর্বে বডিমোভিন) নামে একটি আফটার ইফেক্ট প্লাগইন ক্যানভাসে (বা এসভিজি [1] ) রফতানিও করতে পারে এবং অ্যানিমেশন ইঞ্জিনের একটি বিল্ড রয়েছে।
অবশ্যই, আপনি সহজে ক্যানভাসের সাথে জিএসএপির মতো বৃহত্তর অ্যানিমেশন লাইব্রেরিগুলিও জোড়া করতে পারেন। উদাহরণস্বরূপ আপনি সংযুক্ত উদাহরণ হিসাবে বিস্তারিত কিছু করার জন্য আমি কিছু ধরণের কাঠামো ব্যবহার করার পরামর্শ দিই, তবে অনেক কিছুর জন্য সেগুলি সত্যই প্রয়োজনীয় নয়, কেবল দরকারী - বিশেষত যদি আপনি ইতিমধ্যে তাদের মধ্যে কোনওটি কীভাবে ব্যবহার করতে জানেন তবে।
সহজেই প্রতিক্রিয়াশীল উপায়ে ওয়েবে জিনিসগুলিকে অ্যানিমেটেড করার আরেকটি অবিশ্বাস্যভাবে শক্তিশালী উপায় হ'ল এসভিজি ( স্কেলেবল ভেক্টর গ্রাফিক্স ) ব্যবহার করা। তারা তাদের উদ্দেশ্য পূরণ করে - স্কেলযোগ্য ভেক্টর হওয়ায় - ভাল। অনেকে প্রথমে এসভিজি ব্যবহার করে বিভ্রান্তি বোধ করে তবে এসভিজির সমন্বয় ব্যবস্থা এবং রূপান্তরগুলির মতো বেশিরভাগ জিনিসে তাদের ব্যাখ্যা করার জন্য দুর্দান্ত নিবন্ধ রয়েছে।
এসভিজি সম্পর্কিত অনেক মনোরম বিষয়গুলির মধ্যে একটি হ'ল এটি জাভাস্ক্রিপ্ট, খাঁটি সিএসএস ( :hoverরাজ্য transform, transitionগুলি, এবং animationএস সহ) বা এসএমআইএল অ্যানিমেশনগুলির সাথে অ্যানিমেটেড হতে পারে (এসভিজি দিয়ে জিনিসগুলিকে সঞ্চারিত করার "দেশীয়" উপায় - তবে আইই না এটি একেবারেই সমর্থন করে না এবং এটি ধীরে ধীরে হ্রাস করা হয় )। আমি সিএসএসে প্রথমে সিএসএস এবং তারপরে জাভাস্ক্রিপ্ট ব্যবহার করার চেষ্টা করার পরামর্শ দিই it's এসভিজি উপাদানগুলিকে মরফিংয়ের জন্য, জিএসএপির মরফএসভিজি প্লাগইনের মতো একটি সরঞ্জাম ব্যবহার করা ব্যবহারিকভাবে প্রয়োজনীয় তবে যদি আপনি কেবলমাত্র আংশিক সমর্থন দিয়ে ঠিক থাকেন না, তবে এসএমএল গ্রহণযোগ্য হতে পারে be
যেহেতু এসভিজি উপাদানগুলি যে কোনও আকারে থাকতে পারে, সেগুলি কিছু শীতল প্রভাব তৈরি করতে ব্যবহৃত হতে পারে । সারা ড্রাসনার এসভিজি অ্যানিমেশনগুলির বিষয়ে কিছু কার্যকর পারফরম্যান্স মানদণ্ড তৈরি করেছেন যা দেখায় যে এসভিজি অ্যানিমেট করার কোন উপায়গুলি সর্বোত্তম পারফরম্যান্স ওয়াইস ।
অ্যানিমেশনটির উপর নির্ভর করে (এবং ব্রাউজার সমর্থনের প্রয়োজন), স্ন্যাপ.এসভিজি বা জিএসএপি এর মতো একটি লাইব্রেরি দরকারী হতে পারে তবে প্রায়শই সিএসএস এবং প্রয়োজনে সামান্য কাস্টম জেএস প্রয়োজন হয়। বলা হচ্ছে যে, লটারি (পূর্বে বডিমোভিন) নামে একটি আফটার ইফেক্ট প্লাগইন এবং ফ্ল্যাশ 2 এসভিজি নামে একটি ফ্ল্যাশ এক্সটেনশন এসভিজি অ্যানিমেশন তৈরিতে সত্যই সহায়ক হতে পারে।
আরও বিশদের জন্য, এসভিজি উপাদানগুলি অ্যানিমেট করার জন্য এই সম্পর্কিত পোস্টটি একবার দেখুন ।
PS কোনও <object>ট্যাগে এসভিজি ব্যবহার করা বা ইন্টারএমএটিভ হলে সরাসরি কোনও <svg>এক্সএমএল উপাদানটিতে এম্বেড করা ভাল এবং ব্যাকগ্রাউন্ড চিত্র হিসাবে এটি যদি ইন্টারেক্টিভ না হয় তবে এটি করার অন্যান্য উপায়ও রয়েছে best
আমার অভিজ্ঞতায় সিএসএস অ্যানিমেশন এবং ট্রানজিশনগুলি প্রাথমিকভাবে ইউআই উপাদান এবং অন্যান্য বেসিক ট্রানজিশন এবং অ্যানিমেশনের জন্য ব্যবহার করা উচিত। তারপরেও, কখনও কখনও ইউএস অ্যানিমেশন / ট্রানজিশনের জন্য একটি জেএস অ্যানিমেশন লাইব্রেরি যেমন জিএসএপি বা ভেলোসিটি.জেএস ব্যবহার করা উপযুক্ত। এটি আপনার পছন্দসই আচরণ এবং সিএসএসে করা সুবিধাজনক কিনা তা নির্ভর করে।
আমরা খাঁটি সিএসএসের সাহায্যে পাগল জিনিস তৈরি করতে পারি , তবে সিএসএস ব্যবহার করে উদাহরণ হিসাবে যেমন আপনি সরবরাহ করেন তার মতো জটিল জটিল চিত্রগুলি তৈরি করা সাধারণত কঠিন, এমনকি চিত্রগুলি সংযোজন করার পরেও। কমপ্লেক্স সিএসএস অ্যানিমেশনগুলি প্রায়শই তাদের জাভাস্ক্রিপ্ট অংশগুলির চেয়েও বজায় রাখা আরও কঠিন। অন্য দিকটি হ'ল সিএসএস অ্যানিমেশনগুলি জাভাস্ক্রিপ্টের সাথে পরিবর্তন করা শক্ত এবং জাভাস্ক্রিপ্টের সাথে মিশ্রিত হওয়ার সময় এটি খুব ভাল খেলবে না।
বলা হচ্ছে যে, ট্রানজিশন এবং অ্যানিমেশনগুলি ব্যবহার করে সাধারণ মিথস্ক্রিয়ায় সাধারণত সিএসএস ব্যবহার করা উচিত; আপনি এটি ডিফল্ট করা উচিত। সিএসএস ব্যবহার করে কীভাবে অ্যানিমেট করবেন তা শিখতে, ওয়েব অ্যানিমেশনের সাথে আমার পরিচিতিটি দেখুন ।
আপনি আনাইমট সিএসএসের মতো লাইব্রেরিতে সহায়ক অ্যানিমেশন এবং নমনীয় ফাংশনগুলিও পেতে পারেন যা আপনি নিজের প্রকল্পগুলি থেকে টানতে এবং যুক্ত করতে পারেন। আপনার প্রায় কখনও পুরো লাইব্রেরির প্রয়োজন হবে না, কেবল যে অংশগুলি চান সেগুলি নিন।
DOM ভিত্তিক জাভাস্ক্রিপ্ট অ্যানিমেশনগুলি মোটামুটি সোজা এগিয়ে রয়েছে। JQuery এর মতো ভয়ানক অ্যানিমেশন লাইব্রেরির কারণে তাদের খারাপ প্রতিক্রিয়া রয়েছে animate()তবে বিশেষত ওয়েব অ্যানিমেশন এপিআই (নীচে আলোচিত) বা জিএসএপি , ভেলোসিটি.জেএস বা মো.জেএস এর মতো বিশেষায়িত অ্যানিমেশন লাইব্রেরি ব্যবহার করার সময় তারা উচ্চতর পারফরম্যান্স হতে পারে ( জিএসএপি এমনকি বিশেষত jQuery এর প্রতিস্থাপনের জন্য একটি বিশেষ প্লাগইন রয়েছে.animate )। এই ধরনের একটি লাইব্রেরি ব্যবহার করে, তারা প্রায়শই আরও নিবিড় অ্যানিমেশনের জন্য অন্যান্য ধরণের অ্যানিমেশনগুলিকে ছাড়িয়ে যেতে পারে যেমন সম্পূর্ণ উপাদানগুলিকে অ্যানিমেট করা।
আপনাকে যদি ডিওএম ভিত্তিক অ্যানিমেশনটি ব্যবহার করতে হবে তার প্রধান কারণ হ'ল যদি আপনার ইতিমধ্যে তৈরি ডোম উপাদানগুলির সাথে জড়িত অনেক ব্যবহারকারী অ্যানিমেশন বা জটিল টাইমলাইন থাকে। ইতিমধ্যে নির্দিষ্ট কারণগুলির জন্য প্রায়শই বার DOM এর মাধ্যমে ক্যানভাসের মতো কিছু ব্যবহার করার চেষ্টা করা এবং ব্যবহার করা ভাল।
জিএসএপির মতো গ্রন্থাগারগুলি আসুন অ্যানিমেশন ম্যাট্রিক্সের ট্র্যাক রেখে হোভারে অ্যানিমেশনটি ধীর করার মতো পাগল জিনিসগুলি করি । এইভাবে, ডিওএম ভিত্তিক অ্যানিমেশনগুলি ভালভাবে সম্পন্ন করার পরে অন্য কোনও ফর্মের চেয়ে কাস্টমাইজড এবং ইন্টারেক্টিভ হতে পারে। একমাত্র নীচের দিকটি হ'ল কখনও কখনও এটি কীভাবে তৈরি হয় এবং কী করা দরকার তার উপর নির্ভর করে এটি ভাল সম্পাদন করে না।
ওয়েবজিএল প্রাথমিকভাবে 3 ডি ওয়ার্ক তৈরির একটি উপায়। এটিতে দুর্দান্ত কিছু প্রকল্প রয়েছে যা আপনার চেক করা উচিত। এটি অবশ্যই প্রতিটি ওয়েব পৃষ্ঠায় ব্যবহার করা উচিত নয়, তবে এটি উল্লেখ করা গুরুত্বপূর্ণ।
এটি ডিওএম উপাদানগুলিকে 3 ডি (এবং 2 ডি) পরিবেশ তৈরি করতে অ্যানিমেট করে যা এটির সম্ভাব্যতার কারণে দুর্দান্ত। একটি লাইব্রেরি ব্যবহার করার সময়, ওয়েবজিএল ক্যানভাস ব্যবহার করতে পিছনে পড়ে তবে তারপরেও মোবাইলে দুর্দান্ত সমর্থন নেই এবং পারফরম্যান্স ভারী হতে পারে। সাধারণত যখন আপনার ওয়েবজিএল ব্যবহার করা প্রয়োজন বা না করা উচিত তখন এটি বেশ পরিষ্কার।
আমার অভিজ্ঞতা থেকে, কোনও ওয়েবজিএল লাইব্রেরি ব্যবহার করা ব্যবহারিকভাবে প্রয়োজনীয়। ধন্যবাদ কিছু ভাল আছে। ThreeJS দ্বারা পর্যন্ত সবচেয়ে সাধারণ আমি অনুসরণ দেখা করেছি PixiJS । এ -ফ্রেমের মতো একটি ওয়েবজিএল কাঠামো এটিকে বাছাই করতে এবং বুনিয়াদি জিনিসগুলি বেশ সহজ তৈরি করতে পারে।
ওয়েব অ্যানিমেশন এপিআই প্রমিত কিভাবে অ্যানিমেশন বাস্তবায়িত এবং পারফরম্যান্সের উন্নতি সঙ্গে যুক্ত করা ব্রাউজার জুড়ে রক্ষণাবেক্ষণ করা হয় চেষ্টা করা হয়। এটি এসভিজি সহ ডিওএম উপাদানগুলির সাথে ব্যবহার করা বোঝায়। এটি কীভাবে একটি সিএসএস অ্যানিমেশনগুলি কাঠামোগত করা হয় (একটি জেএস চেহারা আকারে) তবে একটি টাইমলাইন এবং উন্নত পারফরম্যান্সের মতো ক্ষমতা যুক্ত করে।
এটি কম্পোজিটার থ্রেডে অ্যানিমেশন রেখে কর্মক্ষমতা উন্নত করে (আরও তথ্যের জন্য বিষয়টিতে এই দুর্দান্ত পোস্টটি পরীক্ষা করে দেখুন )। এটি কীভাবে ব্যবহার করতে হয় তার একটি পরিচিতির জন্য, মজিলা ডক্স বা এই সূচক পোস্টটি দেখুন ।
আপনি জিজ্ঞাসা করতে পারেন, " এটি জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরিগুলিকে প্রতিস্থাপন করবে? " উত্তরটি " আশাকরি কিছু "। নেটিভ ব্রাউজার অ্যানিমেশন ইঞ্জিনগুলির উন্নতি করা প্রত্যেকের পক্ষে এটি উপকারী এবং এগুলি যেমন কিছু কম শক্তিশালী অ্যানিমেশন লাইব্রেরি অকেজো হয়ে যায়। এটি বলার সাথে সাথে আরও শক্তিশালী অ্যানিমেশন লাইব্রেরিতে জিএসএপি যেমন উল্লেখ করেছে তার মতো অতিরিক্ত সুবিধাগুলি থাকবে । একবার আপনার ডাব্লুএপিআইপি সমর্থিত একটি গ্রন্থাগার প্রয়োজন কিনা তা এখনও আপনার প্রয়োজনীয়তার দ্বারা নির্ধারিত হয়।
WAAPI এর বর্তমানে ভাল সমর্থন নেই তবে আজ উত্পাদনে একটি পলিফিল ব্যবহার করা যেতে পারে । দেখে মনে হচ্ছে এটি আরও ভাল হওয়া এবং আরও সমর্থন পাওয়ার জন্য অবিরত থাকবে।
অ-পারফরম্যান্ট বৈশিষ্ট্যগুলি ব্যবহার করা বা পুনর্বিবেচনা / পুনরায় রঙের কারণগুলি এড়িয়ে চলুন ।
পৃষ্ঠাগুলিতে একগুচ্ছ উপাদানগুলির অ্যানিমেট করা এড়িয়ে চলুন কারণ সেগুলি আরও নিবিড় এবং পরে পরিবর্তিত হতে পারে এমন ব্যথাও হতে পারে।
সিএসএস ব্যবহার করার transitionসময় , যখনই সম্ভব একটি অ্যানিমেশন ব্যবহার করুন (কারণের মধ্যে)। তারা আরও ভাল পারফর্ম করে এবং তাদের সাথে কাজ করা সহজ হয়।
will-changeআপনি প্রাণবন্ত করতে চলেছেন এমন বড় উপাদানগুলিতে সম্পত্তিটি বুদ্ধিমানের সাথে ব্যবহার করুন যাতে ব্রাউজারটি সময়ের আগে জানতে পারে। এটি সম্পর্কে আরও বিশদ এবং পরামর্শের জন্য বিষয়টিতে এই সাইটপয়েন্ট নিবন্ধের মতো কিছু পড়ুন ।
জাভাস্ক্রিপ্টে সময় করার সময় এড়িয়ে চলুন setIntervalএবং বেছে নিন requestAnimationFrame(জিএসএপির মতো ভাল অ্যানিমেশন লাইব্রেরি যদি আপনি তাদের টাইমলাইন ব্যবহার করেন তবে আপনার জন্য এটি করুন)।
আপনি যখন পারবেন, ওয়েব অ্যানিমেশনগুলি API ব্যবহার করুন কারণ এতে জাভাস্ক্রিপ্টের অন্যান্য পদ্ধতির সাথে অ্যানিমেট করার ক্ষমতা রয়েছে।
চূড়ান্ত পণ্যটিতে আপনার কখনই ফ্ল্যাশ চালানো উচিত নয় । জাভাস্ক্রিপ্ট অ্যানিমেশনগুলি আরও ভাল পারফর্ম করে, আরও গতিশীল হয়, আরও সহজে সম্পাদিত হয়, কোনও ডাউনলোডের প্রয়োজন হয় না, আরও প্ল্যাটফর্ম জুড়ে কাজ করে (ফ্ল্যাশ বেশিরভাগ ট্যাবলেট / ফোনে কাজ করে না) এবং প্রচুর পুরানো ফ্ল্যাশগুলির চেয়ে প্রতিক্রিয়াশীল। এগুলি খুব অ্যাক্সেসযোগ্য নয় এবং এসইও বান্ধব নয়।
বলা হচ্ছে যে, অ্যানিমেট সিসি (ফ্ল্যাশটির একটি পুনর্নির্মাণ) অ্যানিমেশনগুলি তৈরি করার একটি দরকারী উপায় এবং ক্রিয়েট.জেএস ব্যবহার করে ক্যানভাসে রফতানি করতে পারে ।
অ্যানিমেশন তৈরি করতে আপনি সাধারণত একাধিক পদ্ধতি ব্যবহার করতে পারেন। সেরাটি আপনি যা করতে চান তার উপর নির্ভর করে এবং কখনও কখনও এর থেকে সুস্পষ্টতর আরও ভাল পদ্ধতি থাকে না। প্রায়শই আমি একই প্রকল্পে নিজেকে একাধিক ব্যবহার করতে দেখি। গুরুত্বপূর্ণ বিষয়টি হল সমালোচনামূলকভাবে চিন্তা করা , আপনি কীভাবে অ্যানিমেশনটি আচরণ করতে চান তা ঠিক বুঝতে এবং তার ভিত্তিতে পদ্ধতিটি স্থির করে নেওয়া। আপনি প্রত্যেকটিতে কিছুটা কাজ করলে এটিও সহায়তা করে।
[1] - লটি দেশী অ্যান্ড্রয়েড, আইওএস এবং রিএ্যাক্ট নেটিভগুলিতেও রফতানি করতে পারে ।
আমার অভিজ্ঞতায়, স্ট্যাটিক অ্যানিমেশনগুলি (যখন অ্যানিমেশনগুলি ব্যবহারকারীর সাথে কোনও মিথষ্ক্রিয়া করার উদ্দেশ্যে নয়) করতে গিয়ে আমি দেখতে পেলাম যে আমার জন্য সবচেয়ে ভাল কাজ করেছে তা ইফেক্টের পরে চিত্রগুলি অ্যানিমেশন করছে এবং তারপরে একটি চূড়ান্ত ফলাফলটি একটি জিআইএফ ফাইলটিতে রফতানি করে। এটি অ্যানিমেশনটিকে একেবারে ব্রাউজার-বান্ধব করে তোলে এবং যে কোনও ডিভাইসে অভিন্ন দৃষ্টিভঙ্গির গ্যারান্টি দেয়।
তবে, আপনি যদি এমন কোনও বিষয় সন্ধান করছেন যা কোনও ব্যবহারকারীর সাথে যোগাযোগ করতে পারে তবে আমি বিশ্বাস করি যে ক্যানভাস আসলেই যাওয়ার উপায় এবং এর জন্য ক্রিয়েটজেএস ইজেজেএস লাইব্রেরির সাথে কাজের জন্য উপযুক্ত বলে মনে হয় না।
যাইহোক, আপনার উদাহরণ অনুসারে, আপনি কেবল এটি একটি অ্যানিমেটেড জিআইএফ ফাইল দিয়ে করতে পারেন এবং ঠিক একই ফলাফল পেতে পারেন।
আপনি যদি আফটার ইফেক্টের সাথে কাজ করেন তবে আপনি বডিমোভিন প্লাগ-ইন ব্যবহার করতে পারেন । এটি আপনার কাজকে মোবাইল এবং ওয়েব ব্যবহারের জন্য রেন্ডার করে। আপনার কাছে .json এবং lottie.js ফাইল থাকবে যা আপনি আপনার HTML এ ব্যবহার করতে পারেন। তবে প্রথমে আপনাকে ফাইলগুলিতে লিখনের অনুমতি দিন এবং সাধারণ সেটিংসে নেটওয়ার্ক অ্যাক্সেস করতে হবে crip আপনি যখন কাজটি শেষ করেছেন তখন উইন্ডো , এক্সটেনশনগুলিতে যান এবং বডিমোভিন সন্ধান করুন । আপনার রচনাটি নির্বাচন করুন, সংরক্ষণের জন্য অবস্থান নির্ধারণ করুন এবং রেন্ডার ক্লিক করুন। আপনার .json এবং lottie.js ফাইলগুলি আপনার এইচটিএমএলে রাখুন এবং আপনার কাজ শেষ হয়েছে। আমি মনে করি জিআইএফ সর্বোত্তম সমাধান নয় কারণ এটি লোড করার জন্য আরও বেশি সময় প্রয়োজন।
আপনি এটি এখানে ডাউনলোড করতে পারেন: http://aescriptts.com/bodymovin কেবল আপনার দাম যুক্ত করুন, বা যদি আপনি এটি বিনামূল্যে চান তবে আপনি কেবল $ 0.00 রাখতে পারেন ...
এখানে একটি বডিমোভিন ব্যবহার করার জন্য এবং ভিজ্যুয়াল স্টুডিওতে আপনার অ্যানিমেশনটি আপনার ওয়েবসাইটে সেট করার টিউটোরিয়াল রয়েছে: youtube.com/watch?v=YmPsCD5jRDw&t=282s
আপনি যদি এইচটিএমএল এবং সিএসএসের বেসিকগুলি জানেন তবে আপনার পক্ষে এটি সহজ হওয়া উচিত। এই টিউটোরিয়ালটি আমাকে সহায়তা করেছিল, আমি আশা করি এটি আপনাকে সাহায্য করবে।