매우 멋지고 창의적으로 분할된 SVG 텍스트 애니메이션 특수 효과

간략한 튜토리얼

segment.js를 기반으로 한 매우 창의적인 세그먼트화 SVG 텍스트 애니메이션 특수 효과입니다. 이 텍스트 애니메이션 특수 효과는 애니메이션 SVG의 스트로크 경로를 사용하여 다양한 텍스트 애니메이션 효과를 만들어 내는데 그 효과는 매우 인상적입니다.

이 SVG 텍스트 애니메이션 특수 효과의 첫 번째 DEMO에 있는 마지막 몇 가지 예에서는 웹 그래픽 애니메이션 제작을 위해 Oleg Solomka가 작성한 JavaScript 라이브러리 플러그인인 mo.js 플러그인을 사용합니다. mo.js를 통해 더욱 충격적인 텍스트 애니메이션 효과를 만들 수 있습니다.

특수효과에 사용된 폰트는 절묘한 소문자 폰트로 매우 창의적인 WEB 폰트 세트입니다.

사용 방법

이 SVG 텍스트 애니메이션 효과를 사용하려면 SVG 경로에 애니메이션을 적용하는 데 사용되는 세그먼트.js와 사용되는 d3-ease를 페이지에 도입해야 합니다. 이징 애니메이션 전환 효과를 만듭니다.

<script src="js/segment.js"></script>
<script src="js/d3-ease.v0.6.js"></script>                  
<script src="js/letters.js"></script>

HTML 구조

컨테이너를 사용하여 애니메이션이 필요한 텍스트를 래핑할 수 있습니다.

<div class="my-text">my text</div>

플러그인 초기화

그런 다음 JavaScript에서 이 요소를 가져오고 매개변수를 구성하여 텍스트에 애니메이션을 적용할 수 있습니다. 모든 매개변수 옵션(개별 지연 제외)은 다음 값으로 설정할 수 있습니다.

• 단일 값: 모든 문자에 허용됩니다.

• 배열: 배열의 첫 번째 요소는 첫 번째 문자로 수신되고 두 번째 요소는 두 번째 문자로 수신되는 식입니다.

다음은 구성 매개변수 사용 예입니다.

// Selecting the container element
var el = document.querySelector('.my-text');
 
// All the possible options (these are the default values)
// Remember that every option (except individualDelays) can be defined as single value or array
var options = {
    size: 100,         // Font size, defined by the height of the letters (pixels)
    weight: 1,         // Font weight (pixels)
    rounded: false,    // Rounded letter endings
    color: '#5F6062',  // Font color
    duration: 1,       // Duration of the animation of each letter (seconds)
    delay: [0, 0.05],  // Delay animation among letters (seconds)
    fade: 0.5,         // Fade effect duration (seconds)
    easing: d3_ease.easeCubicInOut.ease,   // Easing function
    individualDelays: false,              
     // If false (default), every letter delay increase gradually, showing letters from left to right always. 
     If you want to show letters in a disorderly way, set it to true, and define different delays for the desired letters.
};
 
// Initializing the text (Letters parameters: container-element, options)
var myText = new Letters(el, options);

위 구성을 통해 텍스트 표시 및 애니메이션 옵션을 정의했으며 플러그인은 다음과 같습니다. 컨테이너 SVG 텍스트에서 생성됩니다. 기본적으로 텍스트는 숨겨져 있습니다. 텍스트 애니메이션을 실행하는 방법은 아래 방법을 참조하세요.

// Show letters with the default options defined
myText.show();
 
// Hide letters with the default options defined
myText.hide();
 
// Toggle letters with the default options defined
myText.toggle();
 
// An example with all the possible options for triggers
// Parameters (JSON): duration, delay, fade, easing, individualDelays, callback
var newOptions = {
    duration: 2,
    delay: 0.2,
    fade: 1,
    easing: d3_ease.easeCircleInOut.ease,
    individualDelays: false,
    callback: function(){
        myText.hide();
    }
};
// These new options will override the options defined in the initialization
myText.show(newOptions);
 
// Show letters instantly, without any animation at all
// There is a hideInstantly and toggleInstantly function, too
myText.showInstantly();  // Shortcut for myText.show(0, 0, 0);

각 SVG 문자에는 문자-(a, b, c, ...) 및 문자-(1, 2, 3, ...)와 같은 문자 클래스가 할당됩니다. 이러한 클래스를 통해 여백 값 설정이나 위치 지정 방법 등 문자 스타일을 사용자 정의할 수 있습니다.

/* Setting margin among all letters */
.letter {
  margin: 0 10px;
}
 
/* Setting background to letter m */
.letter-m {
  background-color: lightsalmon;
}

위 내용은 멋진 크리에이티브 세그먼트 SVG 텍스트 애니메이션 특수 효과의 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!