khoshnus
v3.0.0
Khoshnus는 도서관 일 뿐이지 만 예술적 방식으로 정적 텍스트로 생명을 불어 넣는 도구이기도합니다. 우아한 SVG 애니메이션을 사용하면 이제 손으로 작성된 것처럼 텍스트를 공개 할 수 있습니다!
Khoshnus는 다음과 같습니다.
Khoshnus를 시작하려면 다음 명령 중 하나를 실행하여 NPM 패키지를 프로젝트에 추가하십시오.
npm install khoshnus
--------------------
yarn add khoshnusReact를 사용하는 경우 이렇게하십시오.
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 >
)
} Khoshnus가 텍스트를 애니메이션하는 데 사용할 khoshnus 의 ID와 함께 빈 SVG 요소를 추가하십시오. 필요에 따라 SVG의 크기를 자유롭게 조정하십시오.
< svg id =" khoshnus " width =" 100% " height =" 100% " viewBox =" 0 0 100 100 " xmlns =" http://www.w3.org/2000/svg " > </ svg >Bare 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 } )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 } ) ;다음과 같은 예술 작품을 생성합니다.
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 >
)
}다음은 다음과 같이 연주 할 수있는 독특한 글꼴입니다.
다음은 Khoshnus를 사용할 수있는 몇 가지 방법입니다.
이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여되므로 개인 및 상업 프로젝트 모두에서 자유롭게 사용, 수정 및 배포 할 수 있습니다.
