khoshnus下載khoshnus源代碼下載

Khoshnus-精美的精美手寫SVG文本動畫

Khoshnus只是一個圖書館，但它也是您以藝術方式將生命帶入靜態文本的工具。憑藉其優雅的SVG動畫，您的文本現在可以透露好像是手工寫的！

？ ️Khoshnus做什麼？

Khoshnus讓您：

動畫SVG文本具有美麗的手寫效果。
從具有可自定義動畫的唯一字體中選擇。
控制每個字母的時間安排，中風和填充，以進行更個性化的觸摸。
將純文本轉變為優雅的視覺體驗。

？特徵

多種字體樣式：從一系列字體中選擇。
流暢的SVG動畫：中風和填充效果是為栩栩如生的手寫體驗而動畫的。
細粒度控制：調整每個字母的時機和样式 - 使它們以您自己的節奏揭示。
完全可配置：可以自定義文本的每個視覺方面。

快速開始

？安裝

要開始使用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中

在khoshnus的ID中添加一個空的SVG元素，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

只要它們具有不同的ID，就可以在組件/視圖中定義多個SVG，並且您定義了哪些手稿對象引用哪個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 >
  )
}