ดาวน์โหลด khoshnus - ดาวน์โหลดซอร์สโค้ด khoshnus

Khoshnus - งานสร้างภาพเคลื่อนไหวข้อความ SVG ที่เขียนด้วยลายมือที่สวยงาม

Khoshnus เป็นเพียงห้องสมุด แต่มันก็เป็นเครื่องมือของคุณสำหรับการนำชีวิตไปสู่ข้อความแบบคงที่อย่างศิลปะ ด้วยภาพเคลื่อนไหว SVG ที่สง่างามข้อความของคุณสามารถเปิดเผยได้ราวกับเขียนด้วยมือ!

️ Khoshnus ทำอะไร?

Khoshnus ให้คุณ:

ข้อความ SVG ที่เคลื่อนไหวด้วยเอฟเฟกต์ที่สวยงามและเขียนด้วยลายมือ
เลือกจากแบบอักษรที่ไม่ซ้ำกันพร้อมแอนิเมชั่นที่ปรับแต่งได้
ควบคุมเวลาของตัวอักษรแต่ละครั้งจังหวะและเติมเต็มสำหรับการสัมผัสที่เป็นส่วนตัวมากขึ้น
แปลงข้อความธรรมดาให้เป็นประสบการณ์ภาพที่สง่างาม

- คุณสมบัติ

รูปแบบตัวอักษรหลายรูปแบบ : เลือกจากอาร์เรย์ของแบบอักษร
ภาพเคลื่อนไหว SVG Smooth : Stroke and Fill Effects เป็นภาพเคลื่อนไหวสำหรับประสบการณ์การเขียนด้วยลายมือที่เหมือนจริง
การควบคุมที่ละเอียด : ปรับเวลาและสไตล์สำหรับตัวอักษรแต่ละตัว-ทำให้พวกเขาเปิดเผยด้วยความเร็วของคุณเอง
สามารถกำหนดค่าได้อย่างสมบูรณ์ : ทุกแง่มุมภาพของข้อความสามารถปรับแต่งได้

เริ่มต้นอย่างรวดเร็ว

- การติดตั้ง

ในการเริ่มต้นด้วย Khoshnus ให้เพิ่มแพ็คเกจ NPM ลงในโครงการของคุณโดยเรียกใช้คำสั่งใดคำสั่งต่อไปนี้:

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

tl; dr

ทำสิ่งนี้ถ้าคุณใช้ 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 ที่ว่างเปล่าด้วย ID ของ 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

SVG หลายตัว

เป็นไปได้ที่จะกำหนด SVG หลายตัวในส่วนประกอบ/มุมมองของคุณตราบใดที่พวกเขามี ID ที่แตกต่างกันและคุณกำหนดว่าการอ้างอิงวัตถุต้นฉบับใดที่องค์ประกอบ 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 >
  )
}