MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
يرجى الترويج لها إذا قمت بتنفيذ أفكار جديدة أو أنيمي جديد!
تثبيت NPM بدء تشغيل NPM
سيبدأ الخادم بعد ذلك. يمكنك التحقق من ذلك في https: // localhost: 8080.
سوف ينعكس على الفور عندما تربط الصلصة.
يمكن أن يكون هذا لأن حزمة node-canvas لا تدعم ARM64.
حاول إدخال عقدة مثل x86_64.
مثال على التثبيت مع asdf :
ARCH -X86_64 ASDF تثبيت Nodejs <الإصدار>
NPM Run Build
./dist يمكنك نشره كموقع ثابت كما هو.
NPM Run Lint
يكتشف تلقائيًا التغيرات والتغييرات الأخرى في نمط الترميز.
NPM تشغيل الإصلاح
يمكن تصحيح معظمها تلقائيًا.
يوصى بتشغيله قبل إرسال السحب.
تم تصميمه لإنشاء وبردية تلقائيًا باستخدام إجراءات github.
عند الإنشاء ، قم بتعيين ROLLBAR_TOKEN أو GA4_TOKEN في أسرار Github للسماح لجمع الأخطاء وتحليل المستخدم.
src/animations/ ... تحتوي على تطبيقات الرسوم المتحركة الفرديةcomponents/ ... يحتوي على أجزاء واجهة المستخدمconstants/ ... يحتوي على الثوابتeffects/ ... تحتوي على تنفيذ الآثارfilters/ ... يحتوي على تنفيذ المرشحfonts/ ... خط الويبparts/ ... تحتوي على صور للأجزاء المستخدمة في "اختر من الأجزاء"samples/ ... تحتوي على عينات مستخدمة في البرنامج التعليميshaders/ ... يحتوي على تظليل الأجزاء لاستخدامه في تأثيرات الويبutils/ ... يحتوي على وظائف مفيدةwebgleffects/ ... على تنفيذ تأثيرات الويبmegamoji.js ... نقطة الدخولtypes.js ... يحتوي على تعريفات النوع مثل التأثيراتstatic/ ... HTML وما إلى ذلك يحتوي على أشياء يمكن تسليمها كما هي دون أي بناء معينresources/ ... هناك عناصر متنوعة غير مرتبطة بالتطبيق ، مثل الصور المستخدمة في المستندات. يمكنك العثور على القائمة في src/constants/filters.js .
كيان المرشح هو دالة أحادية الحجة.
سيتم تمرير HTMLImageElement ، لذلك يتم تنفيذ معالجة الصور حسب الاقتضاء ويتم إرجاع الصورة النهائية باعتبارها bloburl.
يمكنك العثور على القائمة في src/constants/effects.js .
كيان التأثير هو دالة 5-argument:
keyframectxcellWidthcellHeight بعد ملء الخلفية ، سيتم تمرير ctx قبل تمرير drawImage مباشرة ، لذلك قم بتعيين التحول من اختيارك ، مثل transform filter clip . نظرًا لأن الآثار المتعددة تهدف إلى استخدامها بالاقتران ، تجنب طرق الاتصال التي تتجاوز التأثيرات التي تضاف إليها التأثيرات الأخرى ، مثل setTransform .
أيضًا ، تأكد من ضبط الصورة التي تحتوي على صورة ذات معنى على الأقل في الإطار الأول بحيث تكون الرموز التعبيرية التي تم إنشاؤها مريحة لاستخدامها حتى في بيئة يتم فيها تعطيل الرسوم المتحركة. إذا كنت ترغب في التحقق من كيفية عرض الشاشة في بيئة مع تعطيل الرسوم المتحركة ، فحدد "Fix First Frame" ضمن "Add Effect" ضمن "Mode Mode> Tighting".
canvas الذي يتقاطع أكثر من أربع مرات (مرتين طول وعرض) لما سيتم تقديمه في نهاية المطاف على أنه الرموز التعبيرية.
+---------+
| | <- الهامش ل cellheight / 4 | + ----+ |
| | | | <- منطقة الرسم ل cellheight / 2 | | | | | الجزء الذي سيتم استخدامه في نهاية المطاف في الرموز التعبيرية | + ----+ |
| | <-هوامش في cellheight / 4+------------+
على سبيل المثال ، إذا كنت ترغب في تحريك الرموز التعبيرية ، فما عليك سوى translate cellHeight / 2 (وليس cellHeight )
إذا كنت ترغب في رؤية شكل القماش قبل تقليم الهوامش ، فإن تمكين "لا تقطع الهوامش" في "وضع Craftsman> وضع المطور" ضمن "Add Effects".
===
خلفية المواصفات:
عندما يتم الجمع بين تأثيرات مثلびよんびよん(خاصة تقلص) وتناوب ، قد تكون قادرًا على رؤية أي هوامش خارج النطاق المستخدمة في الأصل كـ رموز تعبيرية. حتى في مثل هذه الحالات ، لجعل الرسوم المتحركة تبدو جميلة ، يتم تقديم الرسوم المتحركة خارج النطاق الذي سيتم استخدامه في نهاية المطاف في الرموز التعبيرية ، ثم يتم قطع الهوامش لاحقًا.
من الصعب أن أفهم ، لذلك آمل أن أفعل شيئًا حيال ذلك ، لكنني لم أفكر في طريقة جيدة.
يمكنك العثور على القائمة في src/constants/animations.js .
كيانات الرسوم المتحركة هي 5 وظائف حجة:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) تقوم الرسوم المتحركة فعليًا بإعداد image القماش التي مرت من خلال استخدام ctx.drawImage أو ما شابه. نظرًا لأن نطاق محاصيل وضع المستخدم يمر offsetH, offsetV, width, height ، وبالتالي فإن تقديم القماش يكون عادةً على النحو التالي (من الممكن أن تجرؤ على عدم القيام بذلك كجزء من التأثير):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;تم تمرير اللوحة التي تنتقل إلى الرسوم المتحركة ، تمامًا مثل التأثيرات ، أكبر أربع مرات من تلك التي يتم إخراجها فعليًا على أنها رموز تعبيرية.
+---------+
| | <- الهامش ل cellheight / 4 | + ----+ |
| | | | <- منطقة الرسم ل cellheight / 2 | | | | | الجزء الذي سيتم استخدامه في نهاية المطاف في الرموز التعبيرية | + ----+ |
| | <-هوامش في cellheight / 4+------------+
على سبيل المثال ، سيبدو تنفيذ الرسوم المتحركة no-no (فقط رسم الرموز التعبيرية بالحجم الطبيعي في وسط الشاشة) هكذا:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;بالمقارنة مع التأثيرات ، فإن طريقة التقديم أكثر مرونة من حيث أنها تتيح لك تنفيذ طرق التقديم بحرية (على سبيل المثال ، يمكن تنفيذ عرض طبقتين لتنفيذ التأثيرات التي لا يمكن تحقيقها مع التحولات البسيطة). ومع ذلك ، لن يكون من الممكن دمجها مع الرسوم المتحركة الأخرى ، لذا يرجى مراعاة مرة واحدة على الأقل ما إذا كنت لا تستطيع تنفيذ نفس التأثير.
أيضًا ، تمامًا كما هو الحال مع التأثيرات ، تأكد من أنه يمكنك استخدام الرموز التعبيرية التي تنشئها بشكل مريح حتى في البيئات التي يتم فيها تعطيل الرسوم المتحركة.
يمكنك العثور على القائمة في src/constants/webgleffects.js .
يمكن تنفيذ التأثيرات التي لا يمكن تنفيذها باستخدام وظائف التحول الأساسية فقط للقماش في WebGL.
كيانات تأثير الويب هي وظائف ذات أربع سنوات:
keyframecellWidthcellHeightقم بتحميل التظليل وأرجعه بالمعلمات المناسبة.
// 例
import { webglLoadEffectShader , webglSetVec2 } from '../utils/webgl' ;
import fooShader from '../shaders/foo' ;
function webglZoom ( keyframe , _w , _h , args ) {
const program = webglLoadEffectShader ( fooShader ) ;
webglSetVec2 ( program , 'center' , keyframe , 0.5 ) ;
return program ;
} يمكن العثور على التظليل في src/shaders (يمكنك إضافتها).
إذا كنت ترغب في إضافتها ، فهناك وظيفة Wrapper تسمى webglEffectShader ، لذا يرجى إلقاء رمز GLSL الخام فيه.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; يمكن العثور على وظائف شائعة الاستخدام (مثل أرقام العشارية الزائفة) في src/shaders/utils .
كالعادة ، يتم تقديم الصور بحجم 4x.
أيضًا ، كالعادة ، يرجى توخي الحذر لضمان أن الرموز التعبيرية التي تم إنشاؤها مريحة لاستخدامها حتى في البيئات التي يتم فيها تعطيل الرسوم المتحركة.
كن حذرًا لأنه سيتم تحميله ببطء.
لا يتم تضمين الخطوط التالية:
يرجى التحقق من ترخيص الخط بعناية (يمكن إعادة توزيعه؟ هل يمكن تعديله (WOFF)؟) ، ثم وضع الخط الذي تم تحويله إلى WOFF في src/fonts .
من حيث المبدأ ، لا تستخدم الخطوط المرخصة بموجب ترخيص SIL Open Font أي تراخيص تحتوي على "مع اسم الخط المحجوز ..." (لأنه من المتاعب لتغيير اسم الخط عند صنعه).
لجعل woff ، أستخدم هذا: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
Node Sfnt2woff.js hoge.ttf hoge.woff
بمجرد إضافة الخط ، قم بتحديث الملفان.
src/constants/fonts.tsLICENSE.markdownبدلاً من إحضار اسم المؤلف عند كتابة الترخيص ، يرجى البحث عن الاسم الرسمي ونسخه قدر الإمكان.
