khoshnus
v3.0.0
Хошнус - это просто библиотека, но это также ваш инструмент для художественного приведения в статический текст. С его элегантной анимацией SVG ваш текст теперь можно раскрыть, как будто написано вручную!
Хошнус позволяет тебе:
Чтобы начать с Хошнуса, добавьте пакет NPM в свой проект, выполнив одну из следующих команд:
npm install khoshnus
--------------------
yarn add khoshnusСделайте это, если вы используете 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 >
)
} Добавьте пустой элемент SVG с идентификатором khoshnus , который Хошнус будет использовать для анимации вашего текста. Не стесняйтесь корректировать размер SVG на основе ваших потребностей.
< svg id =" khoshnus " width =" 100% " height =" 100% " viewBox =" 0 0 100 100 " xmlns =" http://www.w3.org/2000/svg " > </ svg >После того, как у вас есть ваш 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 } )Хошнус предлагает полный контроль над вашей анимацией. Хотите, чтобы текст чувствовал, что он написан медленно или быстро? Вы решите! Вот представление о том, как вы можете настроить его:
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 ,
} ,
} ) ;Магия Хошнуса заключается в его способности обеспечивать позиционирование и контроль задержки. Вот пример:
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 } ) ;Он генерирует следующее произведение искусства:
Можно определить несколько 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 >
)
}Вот некоторые из уникальных шрифтов, с которыми вы можете играть:
Вот лишь несколько способов использовать Хошнус:
Этот проект лицензирован по лицензии MIT, что означает, что вы можете использовать, изменять и распространять его как в личных, так и в коммерческих проектах.
