تنزيل khoshnus - تنزيل رمز المصدر khoshnus

Khoshnus - حرفة جميلة الرسوم المتحركة النصية المكتوبة بخط اليد

Khoshnus هي مجرد مكتبة ، ولكنها أيضًا أداة لجلب الحياة إلى نص ثابت بطريقة فنية. مع الرسوم المتحركة SVG الأنيقة ، يمكن الآن الكشف عن نصك كما لو كان مكتوبًا باليد!

؟ ️ ماذا يفعل خوشنوس؟

يتيح لك Khoshnus:

تحريك نص SVG مع تأثير جميل مكتوح بخط اليد.
اختر من بين الخطوط الفريدة مع الرسوم المتحركة القابلة للتخصيص.
تحكم في توقيت كل حرف ، وسكتة دماغية ، وملء لمسة أكثر تخصيصًا.
تحويل النص العادي إلى تجربة بصرية أنيقة.

؟ سمات

أنماط الخطوط المتعددة : اختر من مجموعة من الخطوط.
الرسوم المتحركة السلس SVG : يتم تحريك تأثيرات السكتة الدماغية والملء لتجربة خط اليد النابضة بالحياة.
التحكم الدقيق في الحبيبات : اضبط التوقيت والأناقة لكل حرف-اجعلها تكشف في وتيرتك الخاصة.
قابلة للتكوين بالكامل : يمكن تخصيص كل جانب مرئي للنص.

بداية سريعة

؟ تثبيت

للبدء مع Khoshnus ، أضف حزمة NPM إلى مشروعك عن طريق تشغيل أي من الأوامر التالية:

npm install khoshnus
--------------------
yarn add khoshnus

TL ؛ د

افعل هذا إذا كنت تستخدم React.

 import { FONT_MATRIX , initialize , write } from "khoshnus"
import 'khoshnus/style.css'

const App = ( ) => {
    useEffect ( ( ) => {
        const manuscript = new Manuscript ( ) ;
        manuscript . setup ( {
            font : FONT_MATRIX [ "Pinyon Script" ] . name ,
            fontSize : "10px" ,
        } ) ;
        const textId = manuscript . write ( "Hello Universe, My Name Is Optimus Prime!" )
        manuscript . erase ( textId , { delayOperation : 15000 } )
    } , [ ] ) ;

    return (
        < div >
            < svg id = "khoshnus" width = "100%" height = "500" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > </ svg >
        </ div >
    )
}

1. قم بتضمين SVG في HTML الخاص بك

أضف عنصر SVG فارغ مع معرف khoshnus الذي سيستخدمه Khoshnus لتحريك النص الخاص بك. لا تتردد في ضبط حجم SVG بناءً على احتياجاتك.

 < svg id =" khoshnus " width =" 100% " height =" 100% " viewBox =" 0 0 100 100 " xmlns =" http://www.w3.org/2000/svg " > </ svg >

2. تهيئة واكتب النص الخاص بك

بمجرد حصولك على ملف HTML العاري ، استيراد الأشياء الأساسية المطلوبة من المكتبة:

 import { initialize , write , FONT_MATRIX } from "khoshnus" ;

import "khoshnus/style.css" ;

ثم ابدأ في استخدام المكتبة:

 // Create the Manuscript instance and setup global configuration.
const manuscript = new Manuscript ( ) ;
manuscript . setup ( {
    font : FONT_MATRIX [ "Pinyon Script" ] . name ,
    fontSize : "10px" ,
} ) ;
// Write the letters into the SVG element.
const textId = manuscript . write ( "Hello Universe, My Name Is Optimus Prime!" )

// Erase the text after the desired waiting period - optional, you can leave it forever ;)
manuscript . erase ( textId , { delayOperation : 15000 } )

3. تخصيص الرسوم المتحركة الخاصة بك

يوفر Khoshnus التحكم الكامل في الرسوم المتحركة الخاصة بك. هل تريد أن يشعر النص أنه مكتوب ببطء أو بسرعة؟ أنت تقرر! إليك لمحة عن كيفية تعديلها:

 initialize ( {
    font : FONT_MATRIX [ "Pinyon Script" ] . name , // Only fonts from FONT_MATRIX are available.
    fontSize : "16px" ,
    start : {
        startStrokeDashoffset : FONT_MATRIX [ "Pinyon Script" ] . strokeDashoffset ,
        startStroke : "black" ,
        startStrokeWidth : 0.0000000001 ,
        startFill : "transparent" ,
    } ,
    end : {
        endStrokeDashoffset : 0 ,
        endStroke : "transparent" ,
        endStrokeWidth : 0.3 ,
        endFill : "black" ,
    } ,
    durations : {
        strokeDashoffsetDuration : 3500 ,
        strokeWidthDuration : 2500 ,
        strokeDuration : 2500 ,
        fillDuration : 4000 ,
    } ,
} ) ;

✍ تحديد المواقع والتأخير

يكمن سحر Khoshnus في قدرته على توفير تحديد المواقع والتأخير. هذا مثال:

 write ( "Your Text Here" , {
    writeConfiguration : {
        eachLetterDelay : 250 , // Delay of each letter after the previous one.
        delayOperation : 0 // Delay of the write operation - useful when you want wait time between written snippets.
    } ,
    textConfiguration : {
        x : "50%" , // X position of the text.
        y : "50%" , // Y position of the text.
        textAnchor : "middle" , // Anchor of the text.
        dominantBaseline : "middle" , // Baseline of the text - where it should align.
        fontSize : "12px" // Font size - appearance could possibly depend on the parent element.
    }
} ) ;

مثال متقدم

تحقق من المقتطف التالي:

 const manuscript = new Manuscript ( ) ;
manuscript . setup ( {
    font : FONT_MATRIX [ "Pinyon Script" ] . name ,
    fontSize : "10px" ,
} ) ;
const textId0 = manuscript . write ( "Do not lament my absence," , {
    textElementAttributes : { y : "10%" , } ,
    writeConfiguration : { eachLetterDelay : 100 }
} )
const textId1 = manuscript . write ( "for in my spark," , {
    textElementAttributes : { y : "25%" } ,
    writeConfiguration : {
        delayOperation : 3000 ,
        eachLetterDelay : 100
    }
} )
const textId2 = manuscript . write ( "I know that this is not the end," , {
    textElementAttributes : { y : "37.5%" } ,
    writeConfiguration : {
        delayOperation : 5500 ,
        eachLetterDelay : 100 ,
    }
} )
const textId3 = manuscript . write ( "but merely," , {
    textElementAttributes : { y : "55%" } ,
    writeConfiguration : {
        delayOperation : 9500 ,
        eachLetterDelay : 100 ,
    }
} )
const textId4 = manuscript . write ( "a new beginning." , {
    textElementAttributes : { y : "67.5%" , } ,
    writeConfiguration : {
        delayOperation : 11500 ,
        eachLetterDelay : 100 ,
    }
} )
const textId5 = manuscript . write ( "- Optimus Prime" , {
    textElementAttributes : {
        x : "80%" ,
        y : "90%" ,
    } , writeConfiguration : {
        delayOperation : 14000 ,
        eachLetterDelay : 100 ,
    }
} )
manuscript . erase ( textId0 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId1 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId2 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId3 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId4 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId5 , { delayOperation : 20000 } ) ;

يولد القطعة الفنية التالية:

screen.recording.2024-11-08.at.12.25.10.mp4

SVGs متعددة

من الممكن تحديد SVGs المتعددة في المكون/العرض طالما أن لديهم معرفات مختلفة وتحدد المراجع التي يعرضها كائن المخطوطات التي عنصر SVG. يظهر مقتطف React.js التالي عنصرين SVG يتم الرجوع إليهما ، كل منهما بواسطة كائن مخطوطات مقابل:

 const App = ( ) => {
  useEffect ( ( ) => {
    const manuscript1 = new Manuscript ( {
      svgId : "khoshnus-1" ,
      font : FONT_MATRIX [ "Pinyon Script" ] . name ,
      fontSize : "10px" ,
    } ) ;
    const text1 = manuscript1 . write ( "Do not lament my absence," , {
      textElementAttributes : {
        y : "10%" ,
      } , writeConfiguration : { eachLetterDelay : 100 }
    } )
    manuscript1 . erase ( text1 )
    
    const manuscript2 = new Manuscript ( {
      svgId : "khoshnus-2" ,
      font : FONT_MATRIX [ "Pinyon Script" ] . name ,
      fontSize : "10px" ,
    } ) ;
    const text2 = manuscript2 . write ( "For in my spark," , {
      textElementAttributes : {
        y : "10%" ,
      } , writeConfiguration : { eachLetterDelay : 100 }
    } )
    manuscript2 . erase ( text2 )
  } , [ ] ) ;

  return (
    < div >
      < svg id = "khoshnus-1" width = "100%" height = "300" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > </ svg >
      < svg id = "khoshnus-2" width = "100%" height = "300" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > </ svg >
      </ div >
  )
}