SASS 및 SMIL 옵션이있는 SVG 로더 용 발전기를 만드는 방법

이 기사는 Smil 및 Sass 애니메이션 옵션을 제공하는 SVG 로더 생성기의 생성에 대해 자세히 설명합니다. 학습 경험의 합류에서 태어난이 프로젝트는 사용자 정의 가능한 SVG 로더를 생성하기위한 다양한 도구를 제공합니다.

발전기의 창세기

세 가지 주요 요소는 개발에 영감을주었습니다.

1. Sarah Drasner의 "SVG 애니메이션"

SASS 루프에 대한 저자의 초기 노출은 Sarah Drasner의 저서, 특히 Sass 기능을 사용하여 스 태거 애니메이션을 사용하여 데이터 시각화에 관한 장에서 나왔습니다. 이것은 애니메이션을위한 Sass 루프의 가능성에 대한 관심을 불러 일으켰습니다.

2. 로더 복제 요청

Apple 스타일 로더를 복제하라는 요청은 새로운 지식에 대한 실질적인 응용 프로그램을 제공했습니다. 저자는 애니메이션 지연을 효율적으로 관리하기 위해 SASS 루프를 구현했습니다.

 @for $ i 1 ~ 12 {
  .Loader : nth-of-type (#{$ i}) {
    애니메이션 : 1S $ I * 0.08S UpicacityLoader Infinite;
  }
}
@keyframes exacity 로더 {
 {불투명도 : 0; }
}

이 간결한 SASS 코드는 바닐라 CSS에서 훨씬 더 긴 결과와 동일한 결과를 얻습니다.

 .Loader : nth-of-type (1) {
  애니메이션 : 1S 0.08S UpacityLoader Infinite;
}
.Loader : nth-of-type (2) {
  애니메이션 : 1S 0.16S UpacityLoader Infinite;
}

/ * ... */

.Loader : nth-of-type (12) {
  애니메이션 : 1S 0.96S UpacityLoader Infinite;
}
@keyframes exacity 로더 {
  {불투명도 : 0; }
}

3. 갤러리 아이디어

SASS 루프 숙련도와 로더의 필요성은 로더 생성기의 개념으로 이어져서 온라인 리소스에서 쉽게 구할 수있는 격차를 해결했습니다.

듀얼 애니메이션 출력 : Smil and Sass

Sass Output의 초기 개발 문제로 인해 Smil 애니메이션이 대안으로 포함되었습니다. 그러나 가끔 출력의 발산에도 불구하고 두 옵션 모두 궁극적으로 통합되었습니다.

Smil vs. CSS/SASS : 주요 차이점

개발 과정은 몇 가지 주요 차이점을 강조했습니다.

• 자원 독립성 : SMIL은 CSS 또는 SASS와 달리 SVG 마크 업 내에서 직접 애니메이션합니다.
• 이미지 임베딩 : SVG가 이미지 또는 배경으로 사용될 때 SMIL 애니메이션이 지속됩니다.
• 애니메이션 유동성 : 미소 애니메이션은 종종 더 부드럽게 보이지만 정확한 이유는 불분명합니다.
• 애니메이션 체인 : Smil의 additive="sum" 순차적으로 애니메이션을 추가하는 반면 CSS/SASS는 충돌하는 특성에 대한 마지막 애니메이션 선언의 우선 순위를 정합니다.
• 변환 처리 : 변환은 SMIL의 행동으로 패리티를 달성하기 위해 SASS의 해결 방법을 필요로하며, 사용이 필요했습니다.<g></g> 모양을 캡슐화하는 요소.

기술 스택 : vue.js 및 nuxt.js

이 프로젝트는 구성 요소 기반 아키텍처, 직관적 인 데이터 바인딩 및 HTML 및 SVG 처리의 용이성에 대해 vue.js를 활용합니다. nuxt.js는 자동 라우팅 및 SEO 최적화와 같은 기능을 갖춘 간소화 된 개발 환경을 제공합니다.

예제 로더 사용법

발전기의 유연성은 다양한 통합 방법을 허용합니다.

• 배경 이미지로서 Smil SVG : 생성 된 SVG를 다운로드하여 CSS 배경 이미지로 사용하십시오.
• 직접 HTML 임베딩 : 생성 된 SVG 코드를 HTML에 직접 포함시킵니다.
• SASS 루프 통합 : 생성 된 SASS 루프를 사용하여 인라인 SVG를 애니메이션하십시오.

지속적인 개발 및 향후 향상

향후 계획에는 단순한 단일 요소 SVG 조작을위한 세 번째 스타일 옵션을 추가하고 사용자 정의 애니메이션 매개 변수를 처리하고 코드 선명도 향상에 문제가 해결됩니다. 프로젝트의 오픈 소스 특성은 기여와 피드백을 환영합니다.

단순한 Sass 루프로 시작된이 프로젝트의 여정은 과거의 감가 상각 문제에도 불구하고 Smil 애니메이션의 힘과 다양성을 보여줍니다. 브라우저 지원을 확인해야하지만 (Caniuse와 같은 리소스 사용) 현재 상황은 지속적인 생존력을 나타냅니다. 간결하게 설명하는 자세한 브라우저 지원 테이블은 여기에서 생략됩니다.

위 내용은 SASS 및 SMIL 옵션이있는 SVG 로더 용 발전기를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!