নিম্নলিখিত svg প্রাণবন্ত সম্ভাব্য উপায়:
এসভিজি এসএমএল অ্যানিমেশনস
এসভিজিকে তার শক্তিশালী নেটিভ মার্কআপ ল্যাঙ্গুয়েজ দ্বারা এসিএমএল বলা যেতে পারে, এটি অ্যাডোব অ্যানিমেট সিসি + ফ্ল্যাশ 2 এসভিজি প্লাগইনের মতো অ্যানিমেশন সরঞ্জাম থেকে সরাসরি রফতানি করা যায়।
এমনকি এসএমআইএল দ্বারা একটি এসভিজি অ্যানিমেটেড করার জন্য এমনকি ব্রাউজারগুলিতে সমর্থন নেই, আপনার কেবল একটি এসএমআইএল পলফিল ব্যবহার করা উচিত।
পলিফিল কোডের একটি বিশেষ জাভাস্ক্রিপ্ট অংশ যা ব্রাউজারটি বুঝতে পারে এমন একটিতে মূল এনকোডিংটি অনুবাদ করে যা কোনও ব্রাউজার থেকে হারিয়ে যাওয়া বৈশিষ্ট্যগুলির জন্য সমর্থন সরবরাহ করে।
এরিক উইলগারদের তৈরি এসএমআইএল পলফিলটি কেবল এটি করে: এটি এসএমআইএলটিকে ওয়েব অ্যানিমেশন এপিআইতে অনুবাদ করে যা মাইক্রোসফ্ট ব্রাউজার সমর্থন করে। এটি এতটাই দক্ষ যে গুগল ক্রোম বিকাশকারীরা নেমিক্যাল এসএমআইএল সমর্থন ছেড়ে দেওয়ার এবং ওয়েব অ্যানিমেশনগুলিতে ফোকাস করার সিদ্ধান্ত নিয়েছে, ক্রিকের এসএমআইএল ফাইলগুলি চালনার জন্য এরিক উইলগার্স পলফিলের কাজটি ছেড়ে।
কেউ এটিকে ক্রোমের দ্বারা এসএমআইএলের অবমূল্যায়ন হিসাবে ভুলভাবে ব্যাখ্যা করেছেন এবং এই পছন্দটির জন্য ডেভগুলি সমালোচনা করেছেন। তবে এটি সত্যিকারের অবমূল্যায়ন ছিল না, কেবল পলিফিল স্তরে এসএমআইএলকে ব্যাখ্যা করার কাজটি স্থানান্তর করা।
প্রকৃতপক্ষে ক্রোম ডেভেলসরা উইলগার্স পলিফিলকে খুব সরকারী ঘোষণায় এসএমআইএলকে অবমূল্যায়ন করার তাদের অভিপ্রায় প্রকাশ করেছে।
সুতরাং আপনি যদি এসএমআইএল-এর মৃত্যুর বিষয়ে ওয়েবের চারপাশে পড়েন তবে চিন্তা করবেন না। এসএমআইএলের "মৃত্যু" অত্যন্ত উত্কৃষ্ট হয়ে পড়েছিল। এটি আরও একটি পুনর্জন্মের মতো।
আইই এবং এজ সহ সমস্ত ব্রাউজারগুলিতে এসএমআইএল ব্যবহার করতে, আপনাকে কেবল আপনার ওয়েব পৃষ্ঠায় এই জাভাস্ক্রিপ্ট পলিফিল যুক্ত করতে হবে:
https://github.com/ericwilligers/svg-animation
জনপ্রিয় ফ্ল্যাশ 2 এসভিজি রফতানিকারকের লেখক টম বায়ার্ন দ্বারা তৈরি পলিফিল ব্যবহার করে এখানে একটি ডেমো পৃষ্ঠা রয়েছে:
পলিফিল ছাড়াই পৃষ্ঠা:
http://www.tbyrne.org/stasing/smil-polyfill/tears.htm
পলিফিল সহ একই পৃষ্ঠা:
http://www.tbyrne.org/stasing/smil-polyfill/tears_polyfill.htm
আপনি যদি উত্সটি দেখেন তবে এটি বেশ স্ব-বর্ণনামূলক।
এছাড়াও পলিফিলের সাথে পারফরম্যান্সগুলি প্রায়শই আসল এসএমআইএল থেকে ভাল হয় কারণ অনেক ব্রাউজারে ওয়েব অ্যানিমেশনগুলি হার্ডওয়্যারকে ত্বরান্বিত করা হয়, তবে এসএমআইএল সাধারণত হয় না।
এসভিজি এসএমএল-এ অ্যানিমেশনগুলি রফতানি করুন
এসভিজি অ্যানিমেশনগুলি তৈরি করার সহজ উপায় হ'ল অ্যাডোব অ্যানিমেট সিসির মতো সরঞ্জামগুলি তাদের আঁকার জন্য এবং ফ্ল্যাশ 2 এসভিজি ( https://github.com/TomByrne/Flash2Svg ) এর মতো প্লাগইনগুলি এসভিজিতে রফতানি করার জন্য। এটির সাহায্যে আপনি এই কার্টুন পর্বের মতো একক এসভিজি ফাইল হিসাবে প্রায় সমস্ত অ্যানিমেশন + শব্দ রফতানি করতে পারেন:
http://www.tbyrne.org/portLive/smil/LoveDota.svg
এসভিজি অ্যানিমেশন জেএস লাইব্রেরি
জাভাস্ক্রিপ্ট উপায় আরও জটিল। সবার আগে আপনাকে জাভাস্ক্রিপ্ট প্রোগ্রামার হওয়া দরকার। তারপরে আপনাকে অনেক লাইব্রেরির মধ্যে নির্বাচন করতে হবে। আরও জনপ্রিয়:
স্ন্যাপএসভিজি
http://snapsvg.io
এই গ্রন্থাগারটি একই লেখকের তৈরি পুরানো এবং জনপ্রিয় রাফেল অ্যানিমেশন লাইব্রেরির উত্তরসূরি। অত্যন্ত স্থিতিশীল, তবে এটি চালুর সময় এটি এসভিজিকে অভ্যন্তরীণ বিন্যাসে রূপান্তরিত করে an মরফিং বিকল্পগুলিও খুব বেসিক, কেবল লিনিয়ার ইন্টারপোলেশন। (দ্রষ্টব্য: অ্যাডোব অ্যানিমেট সিসির জন্য একটি স্ন্যাপ.এসভিজি প্লাগইন রয়েছে, তবে রফতানি হওয়া ফাইলগুলি স্ফোটিত হয় exp কোডের, কেবল ৩ degrees০ ডিগ্রি দিয়ে একটি সরল আয়তক্ষেত্রটি ঘোরানোর জন্য Flash
গ্রিনসক মরফএসভিজি
http://greensock.com/morphSVG
একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত মোর্ফিং গ্রন্থাগার যা সহজেই এসভিজি সঞ্চারিত করতে দেয় এবং তাদের অভ্যন্তরীণ বিন্যাসে রূপান্তরিত করার প্রয়োজন ছাড়াই। ইনসকেপে কেবল 3-4 এসভিজি কীফ্রেমগুলি তৈরি করুন এবং গ্রিনক এসভিজিমার্ফিং লিব স্বয়ংক্রিয়ভাবে ফ্রেমের মধ্যে বিভক্ত হবে এবং মসৃণ প্লেব্যাকের জন্য সমস্ত ইন-মধ্যবর্তী ফ্রেম তৈরি করবে। এখানে একটি উদাহরণ:
http://codepen.io/Emasoft/pen/reOqYE
3D Seen.js
http://seenjs.io/demo-svg-canvas.html
আপনি যদি 3D তে সঞ্চার করতে চান তবে এই লাইব্রেরিটি খুব শক্তিশালী।
Seen.js 3V .obj ফাইলগুলিকে এসভিজিতে রেকর্ড করে এবং খুব সহজে এনিমেট করে।
এসভিজি ইডিটরসগুলি ইমেজ করে
সরঞ্জামগুলির হিসাবে, আপনি তিনটি সফ্টওয়্যার সহ অ্যানিমেশন কীফ্রেমগুলি তৈরি করতে পারেন:
ইনস্কেপ: ওপেন সোর্সটিতে প্রচুর বৈশিষ্ট্য রয়েছে, এটি এসভিজি ওয়ার্কিং গ্রুপে পার্টেকিপেট করে লোকেদের দ্বারা তৈরি একটি উন্নত ভেক্টর সম্পাদনা প্যাকেজ। এসভিজি ফর্ম্যাটের জন্য উল্লেখ। শেখা সহজ নয়।
অ্যাডোব ইলাস্ট্রেটর: বাণিজ্যিক, খুব শক্তিশালী ভেক্টর অঙ্কন সফ্টওয়্যার, এটি অনেকগুলি বৈশিষ্ট্য সরবরাহ করে যা এখনও এসভিজি দ্বারা সমর্থিত নয়, তবে এটির ফর্ম্যাটটির সাথে সবচেয়ে খারাপ সামঞ্জস্যও রয়েছে। চিত্রের জগাখিচুড়ি ঠিক করতে আপনার প্রায়শই রফতানি হওয়া এসভিজি ফাইলটি ম্যানুয়ালি সম্পাদনা করতে হবে। তবে এটি আর্ট স্কুলে খুব জনপ্রিয় এবং সমস্ত গ্রাফিকরা এটি কীভাবে ব্যবহার করবেন তা জানেন।
অ্যাফিনিটি ডিজাইনার: এটি ইলাস্ট্রেটারের মতো একটি বাণিজ্যিক সফ্টওয়্যার, তবে একটি চমত্কার এসভিজি সামঞ্জস্যের সাথে প্রায় ইনসকেপের স্তরে। ইউআই আরও অনেক বন্ধুত্বপূর্ণ, এবং এটি এখন এসভিজি শিল্পীদের মধ্যে খুব জনপ্রিয় হয়ে উঠছে।
এসভিজি অ্যানিমেশন এডিটর
বর্তমানে কেবলমাত্র এসভিজি অ্যানিমেশন সম্পাদক হলেন:
- অ্যাডোব অ্যানিমেট সিসি: এখনকার অবিচ্ছিন্ন ফ্ল্যাশ অ্যানিমেশনগুলি থেকে আধুনিক এসভিজি অ্যানিমেশনগুলিতে স্থানান্তরিত করার জন্য অ্যাডোব দ্বারা প্রাক্তন অ্যাডোব ফ্ল্যাশ প্রো সম্পূর্ণরূপে রচনা করেছিলেন। আপনি একটি কাস্টম জাভাস্ক্রিপ্ট লাইব্রেরির সাথে ফলাফলিত এসভিজি অ্যানিমেশনগুলি রফতানি করতে পারেন বা "ফ্ল্যাশ 2 এসভিজি" এর মতো প্লাগইন ব্যবহার করে এসভিজি + এসএমআইএল সংরক্ষণ করতে বেছে নিতে পারেন। এই শেষ বিকল্পটি খুব কার্যকরী, আমি সর্বদা এটি পুষ্পিত নেটিভ রফতানিকারীর পরিবর্তে ব্যবহার করি।
আপনি এখান থেকে বিনামূল্যে প্লাগইন ডাউনলোড করতে পারেন:
https://github.com/TomByrne/Flash2Svg
অথবা এটি অ্যাডোব প্লাগইনস প্যানেল থেকে ইনস্টল করুন:
https://creative.adobe.com/addons/products/7232
দুর্ভাগ্যক্রমে অ্যাডোব অ্যানিমেট সিসি বাণিজ্যিক। বিনামূল্যে ওপেন সোর্স বিকল্প অ্যানিমেশন অ্যাপ্লিকেশন রয়েছে, তবে আমি তাদের সব চেষ্টা করেছি এবং তারা এখনও আইএমএইচও স্তন্যপান করে। ভবিষ্যতের জন্য আশা করি।
তথ্যসূত্র:
বিষয়টিতে আমার আরও বিস্তৃত ব্লগ পোস্ট: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
কেসটি স্ন্যাপ.এসভিজি সম্পর্কে উল্লেখ করা হয়েছে:
/programming/35727635/adobe-animate-snap-svg-plugin-huge-files