고급 Snap.svg

우리는 이전 게시물에서 Snap.svg를 시작하는 방법을 보았습니다. 이 게시물에서는 첫 번째 기사에 언급 된 새로운 기능을 자세히 살펴볼 것입니다. 키 테이크 아웃

<.> advanced snap.svg는 복잡한 마스크, 그라디언트 및 패턴을 만들어 독특하고 역동적 인 그래픽을 만들 수 있습니다. snap.svg는 독립적이고 동기식으로 요소를 애니메이션하는 다양한 방법으로 포괄적 인 애니메이션 기능을 제공합니다. Snap.svg의 이벤트 처리는 클릭, 더블 클릭, 마우스 이동 및 터치 이벤트를 처리하는 메소드와 함께 사용자 상호 작용을 허용합니다. snap.svg는 기존 SVG 코드의 재사용을 지원하여 SVG 코드를 문자열로 주입하거나 기존 파일의 읽기를 허용합니다. Snap.svg에서 DocumentFragments를 사용하여 DOM을 조작 할 때 성능을 향상시켜 큰 SVG 도면의 상당한 성능을 절약 할 수 있습니다.

마스킹 드로잉 표면, 간단한 모양을 만드는 방법을 기억하고 이미지를로드하여 시작하겠습니다.

원은 이미지의 중심을 덮습니다. 그러나 그것은 당신이 직사각형 이미지 만 가질 수 있다는 것은 일종의 동정입니다. 디자이너가 멋진 원형 버튼이나 이미지를 만들었을 수도 있습니다. 물론 몇 가지 솔루션이 있지만 모두 다른 문제가 있습니다. 가장 좋은 시나리오, 디자이너는 외부가 페이지의 배경과 일치하는 이미지를 제공하여 원형으로 보일 수 있습니다. 그러나 탄탄한 배경이 있다고 가정하면 색상을 변경 해야하는 경우 이미지를 편집해야합니다. 투명성을 사용할 수 있지만 PNG와 같은 더 무거운 형식이 필요하거나 GIF의 느슨한 품질이 필요합니다. 몇 년 안에, 아마도 Webp는 모든 브라우저에서 완전히 지원 될 것이며, 이는 수수께끼가 끝날 것입니다. 어느 쪽이든, 이미지에 대해 상호 작용이 필요한 경우 마우스 엔터, 마우스 아웃, 클릭 등과 같은 이벤트에 응답하는 직사각형 모양이 붙어 있습니다. 과거에 오랫동안 플래시를 다루었으므로 SVG에서 가장 실망스러운 것 중 하나는 SVG 1.1에 소개 된 마스크를 사용할 수 없었습니다). 스냅에서 이미지를 포함한 모든 요소에 마스크를 적용하는 것은 매우 쉽습니다 :

기본적으로 마스크 속성을 요소에 할당하면됩니다. 우리는 실제 마스크로 사용하는 요소를주의해야합니다. 최종 요소의 불투명도는 마스크 요소의 흰색 수준에 비례하기 때문에 이미지에 대한 완전한 불투명도를 원한다면 원을 흰색으로 채워야합니다. 처음에는 이것이 성가신 것처럼 보일지 모르지만 다음 섹션에서 볼 수 있듯이 놀라운 효과에 대한 많은 가능성이 열립니다.
• . 당신은 분명히 다른 모양을 함께 구성하여 복잡한 마스크를 만들 수 있습니다. Snap은 당신을 돕기 위해 약간의 구문 설탕을 제공합니다 :

  <span>var paper = <span>Snap</span>(800, 600),
  </span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
  </span>    bigCircle <span>= s.circle(150, 150, 100);</span>

  paper.mask () 메소드는 종이와 동일하며 실제로 그것으로 원활하게 대체 할 수 있습니다.

  .

  클리핑 클리핑 경로는 페인트를 적용 할 수있는 영역을 제한하므로 현재 활성 클리핑 경로에 의해 제한되는 영역 외부의 도면의 일부 부분은 그려지지 않습니다. 클리핑 경로는 가시 영역 (클리핑 경로 내에서)이있는 마스크로 생각할 수 있으며 알파 값이 1이고 숨겨진 영역은 알파 값이 0입니다. 한 가지 차이점은 마스크로 숨겨진 영역이 이벤트에 반응하는 반면 이벤트에 응답한다는 것입니다. , 잘린 구역은 그렇지 않습니다.

  Snap은 클리핑을위한 바로 가기가 없지만 att

  gradients SVG 1.1을 사용하면 그라디언트를 사용하여 모양을 채 웁니다. 물론, 마스크를 채우기 위해 이러한 모양을 사용하면 마스크의 충전물을 변경하여 최종 도면의 알파 레벨을 지정하고 놀라운 효과를 만들 수있는 가능성을 활용할 수 있습니다. Snap은 그라디언트를 생성하기위한 바로 가기를 제공하며 나중에 다른 요소의 채우기 속성에 할당 할 수 있습니다. 예를 들어 이전 코드를 조금만 수정하면 다음과 같습니다.

  이 코드를 테스트하면 최종 효과가 정확히 예상되는 것이 아닙니다. 위의 소문자 'R'로 표현 된 상대 복사 구배 유형을 사용했기 때문입니다. 상대적 구배는 그룹의 각 요소에 대해 별도로 생성됩니다 (복합 마스크). 전체 그룹의 단일 그라디언트를 선호하는 경우 절대 버전의 명령을 사용할 수 있습니다. 'r ()#fff-#000' 우리는 모든 요소의 채우기 속성에 대한 SVG 그라디언트를 지정하여 동일한 결과를 얻을 수 있습니다.

  이 마지막 예에서, 우리는 더 복잡한 기울기를 보여 주었다. 다른 유형 (절대 선형) 외에이 그라디언트는 (0, 0)에서 (300, 300)으로, 검은 색에서 빨간색에서 25%에서 흰색으로 이동합니다. Gradient () 메소드는 문자열을 허용합니다. 자세한 내용은 Snap의 문서에 설명되어 있습니다 페이지의 모든 SVG 요소에서 기존 그라디언트를 사용할 수도 있습니다.

  패턴 패턴은 다른 SVG 모양, 그라디언트 또는 이미지의 발생을 반복하여 모양을 채울 수 있습니다. Snap은 모든 SNAP 요소에서 패턴을 생성하는 요소를 제공합니다. 패턴을 만들고 요소를 채우는 것은 매우 간단합니다.

  대신, 우리가 그라디언트와 패턴을 결합하고 싶다면 그것은 다른 이야기이며 약간 더 복잡한 이야기입니다! 예를 들어, 빛나는 그라디언트와 위의 것과 유사한 패턴을 결합한 마스크를 만드는 방법을 살펴 보겠습니다.

  <span>var paper = <span>Snap</span>(800, 600),
  </span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
  </span>    bigCircle <span>= s.circle(150, 150, 100);</span>

  우리는 기본적으로 두 레벨 맵을 만들어야합니다. 우리가 구배로 채우는 이미지에 사용 된 최종 맵에는 그라디언트로 채워진 맵 자체가 있습니다. 결과는 상당히 인상적입니다! 이것은 또한 당신이 상상할 수있는 클론 () 메소드를 소개 할 수있는 좋은 기회라는 것이 밝혀졌습니다.

  애니메이션 애니메이션은 Snap.SVG의 최고의 제작 기능 중 하나입니다. 약간 다른 행동으로 애니메이션을 처리하는 방법에는 여러 가지가 있습니다.

  요소 .animate () 우리는 가장 간단한 애니메이션 메소드 인 Element.animate ()로 시작합니다. 이 방법을 사용하면 사용자가 모두 동기화 된 여러 요소 속성을 애니메이션 할 수 있습니다. 물론 속성의 초기 값은 현재 값이며, 최종 값은 ANIMET ()에 대한 첫 번째 인수에 지정됩니다. 변경할 속성 외에도 애니메이션의 지속 시간, 편리함 및 애니메이션이 완료되면 호출되는 콜백을 전달할 수 있습니다. 예제는 모든 것을 더 명확하게 만듭니다 :

  이것은 단순히 마스크의 큰 원이 2 초 동안 더 작은 반경으로 줄어 듭니다.

  set.animate () 당신은 그룹 (세트)에서 독립적으로 요소를 애니메이션 할 수 있습니다. 그러나 전체 세트를 동시에 애니메이션하려면 어떻게해야합니까? 쉬운! set.animate ()를 사용할 수 있습니다. 이는 세트의 모든 요소에 동일한 변환을 적용하여 다양한 애니메이션 간의 동기를 보장하고 모든 변경 사항을 함께 수집하여 성능 향상입니다.

  당신은 또한 세트에서 독립적이지만 동기식으로 각 요소를 애니메이션 할 수 있습니다. set.animate ()는 가변적 인 수의 인수를 수락하여 각 하위 요소에 대한 인수와 함께 배열을 전달할 수 있도록 :

  .

  지금까지 예제 코드를 올바르게 따랐다 고 가정하면 브라우저의 콘솔에서 위의 코드를 실행하면 세 가지 요소가 동기화되지만 독립적으로 어떻게 생성되는지 알 수 있습니다. 위의 코드는 또한 세트 (select () 및 selectall () 메소드의 결과로 세트를 소개 할 수있는 기회와 그에 정의 된 몇 가지 유용한 방법을 소개 할 수있는 기회였습니다. 세트를 생성하는 또 다른 방법은 스냅 생성자 메소드에 요소 배열을 전달하는 것입니다.

  snap.animate () 숫자 속성을 애니메이션 할 수는 있지만 animate ()는 다른 유형에서 작동하지 않습니다. 예를 들어 텍스트 속성을 애니메이션하려고하면 텍스트 요소가 엉망이됩니다. 그러나 그러한 효과를 얻는 또 다른 방법, 즉 SNAP에서 Animate ()를 호출하는 세 번째 방법이 있습니다. 스냅 객체의 애니메이션 메소드를 호출하면 애니메이션의 각 단계에서 실행될 작업을 자세한 내용으로 지정할 수 있습니다. 이것은 복잡한 애니메이션을 함께 그룹화하고 동기화로 실행하는 데 도움이됩니다 (set.animate () 메소드는이 문제를 다루는 올바른 방법이지만 복잡한 비 숫자 특성을 애니메이션하는 데 도움이됩니다. 예를 들어 텍스트 요소를 만들고 애니메이션하겠습니다

  이벤트 취급

  마스크와 이미지의 초기 비교로 돌아가서, 이전 섹션에서 보여준 동일한 효과를 애니메이션 GIF (정렬)로 얻을 수 있습니다. 그러나 사용자 상호 작용에 대한 응답 으로이 동작을 재현하려면 SVG를 사용한 개선이 더욱 관련이 있습니다. 여러 GIF를 사용하여 작동하는 방법을 찾을 수 있지만 유연성을 잃어버린 것 외에도 적은 노력으로 동일한 품질을 얻을 수 없습니다.

  > 클릭 핸들러를 나중에 요소를 사용하여 제거 할 수 있습니다. 유사하게 처리 할 수있는 다른 이벤트 중에서 DBLCLICK, MOUSEDOWN 및 MOUSEUP, MouseMove, Mouseout 및 MouseOver 및 TouchStart 및 Touchend와 같은 여러 모바일 지향적 이벤트가 있습니다. jQuery 또는 D3 인터페이스에 사용 된 독자의 경우, 다른 이벤트를 수동으로 처리하기 위해 () 메소드에서 NO () 메소드가 있습니다. SNAP가 제공하는 핸들러를 넘어서는 사용자 정의 동작이 필요한 경우 모든 요소에 대한 노드 속성을 검색 할 수 있으며, 이는 관련 DOM 요소에 대한 참조가 포함되어 있으며 (jQuery로 랩핑 한 후) 처리기를 추가 할 수 있습니다. 그리고 직접 속성 :

  <span>var paper = <span>Snap</span>(800, 600),
  </span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
  </span>    bigCircle <span>= s.circle(150, 150, 100);</span>

  드래그 앤 드롭 SNAP는 요소를 사용하여 모든 요소, 그룹 또는 세트에 대한 드래그 앤 드롭을 특히 쉽게 활성화시킵니다 .DRAG () 메소드. 사용자 정의 동작이 필요하지 않으면 논쟁없이 호출 할 수 있습니다.

  그러나 특별한 행동이 필요한 경우 Onmove, OndragStart, Ondragend 이벤트에 대한 사용자 정의 콜백 및 컨텍스트를 통과 할 수 있습니다. 다음 제품을 통과하려는 경우 On -Move 콜백을 생략 할 수 없다는 점에 유의하십시오.

  . 드래그 핸들러를 추가하는 것은 클릭 이벤트가 숨기지 않으며, 명시 적으로 방지하지 않는 한 ondragend 후에 해고됩니다. 기존 svg 를로드하십시오 이 위대한 라이브러리의 가장 강력한 요점 중 하나는 기존 SVG 코드의 재사용을 지원한다는 것입니다. 문자열로 "주입"하거나 더 나은 파일을 읽은 다음 변경할 수 있습니다. . 직접 시도해 볼 수 있습니다. 이 멋진 SVG 드로잉을 프로젝트의 루트로 다운로드하여 저장하십시오. 다음으로 페이지에로드하고 Dom Tree에 추가하기 전에도 스타일이나 구조를 변경하고 이벤트 처리기를 추가하십시오.

  bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
  </span>
  img<span>.attr({
  </span>    <span>mask: bigCircle
  </span><span>});</span>

  노트

  : 브라우저의 동일한 오리핀 정책으로 인해 로컬 서버에서 예제를 실행하여로드 방법을 테스트해야합니다. 성능 개선 DOM을 조작 할 때 성능을 향상시키는 한 가지 방법은 DocumentFragments를 사용합니다. 조각은 DOM 노드의 최소 컨테이너입니다. 몇 년 전에 소개 된 후 전체 하위 트리를 저렴하게 조작 한 다음 N 노드가있는 2 개의 메소드 호출로 N 노드가있는 전체 하위 트리를 복제하여 N 대신 2 개의 메소드 호출을 추가 할 수 있습니다. 실제 차이점은 John Resig의 블로그에 대한 자세한 내용으로 설명됩니다.

  SNAP는 두 가지 방법으로 파편을 기본적으로 사용할 수 있습니다.

  snap.parse (SVG)는 단일 인수, SVG 코드가있는 문자열을 취하고이를 구문 분석하고 나중에 모든 드로잉 표면에 추가 될 수있는 조각을 반환합니다.

  .
  snap.fragment (varargs)는 가변 수의 요소 또는 문자열을 가져 와서 제공된 모든 요소를 ​​포함하는 단일 조각을 만듭니다.
  1. 특히 대형 SVG 도면의 경우 조각이 적절하게 사용될 때 큰 성능 절약으로 이어질 수 있습니다.

     결론 이것은 Advanced Snap.svg에 관한 기사를 마무리합니다. 이제 독자들은이 라이브러리로 무엇을 할 수 있는지에 대한 명확한 아이디어와이를 수행하는 방법을 가져야합니다. 조금 더 배우는 데 관심이 있다면 Snap Documentation은 시작하기에 좋은 곳입니다.

     몇 가지 유용한 링크 :
  snap.svg 튜토리얼 snap.svg 문서.
  2. 고급 스냅 svg 에 대한 질문이 자주 묻습니다 SNAP SVG 란 무엇이며 웹 개발에서 중요한 이유는 무엇입니까?
  SNAP SVG는 SVG (Scalable Vector Graphics)로 작업하기 위해 특별히 설계된 강력하고 유연한 JavaScript 라이브러리입니다. SVG는 웹 개발에 없어서는 안될 부분입니다. 표시된 화면의 크기 나 해상도에 관계없이 명확성을 유지하는 고품질의 확장 가능한 그래픽을 만들 수 있습니다. SNAP SVG는 SVG를 조작 및 애니메이션하기위한 강력한 도구 세트를 제공 하여이 기능을 향상시켜 개발자가 웹 사이트의 대화식, 동적 그래픽 및 애니메이션을보다 쉽게 ​​만들 수 있도록합니다.
SNAP SVG는 다른 SVG 라이브러리와 어떻게 다른가? ? SNAP SVG는 포괄적 인 기능 세트와 사용 편의성으로 인해 다른 SVG 라이브러리에서 두드러집니다. 개발자가 SVG를 빠르고 쉽게 만들고 쉽게 만들고 조작하며 애니메이션 할 수있는 간단하고 직관적 인 API를 제공합니다. 또한 Snap SVG는 그라디언트, 패턴, 클리핑, 마스킹 등을 포함한 다양한 SVG 기능을 지원하여 모든 웹 개발자의 툴킷을위한 다용도 도구입니다.

다른 JavaScript 라이브러리와 함께 Snap SVG를 사용할 수 있습니까? 또는 Frameworks?

예, Snap SVG는 다른 JavaScript 라이브러리 및 프레임 워크와 호환되도록 설계되었습니다. 즉, jQuery, React, Angular 등과 같은 도구와 함께 사용할 수있어 각 도구의 강점을 활용하여보다 강력하고 대화식 웹 애플리케이션을 생성 할 수 있습니다. SNAP SVG를 시작하는 방법?

Snap SVG를 시작하려면 먼저 프로젝트에 SNAP SVG 라이브러리를 포함시켜야합니다. Snap SVG 웹 사이트에서 라이브러리를 다운로드하거나 HTML 파일에 포함 시키거나 NPM과 같은 패키지 관리자를 사용하여 설치하여 수행 할 수 있습니다. 도서관이 프로젝트에 포함되면 SVG를 생성하고 조작하기 위해이를 사용하여 시작할 수 있습니다.

SNAP SVG의 일반적인 사용 사례는 무엇입니까?

SNAP SVG는 일반적으로 대화식 생성에 사용됩니다. 웹 사이트의 그래픽 및 애니메이션. 여기에는 대화식 차트 및 그래프, 애니메이션 아이콘, 대화식지도 등이 포함될 수 있습니다. 또한 Snap SVG는 광범위한 SVG 기능을 지원하기 때문에 SVG 필터, 마스크 및 그라디언트를 만드는 것과 같은보다 복잡한 작업에도 사용할 수 있습니다. > 예, Snap SVG는 Chrome, Firefox, Safari 및 Internet Explorer 9 이상을 포함한 모든 최신 브라우저와 호환되도록 설계되었습니다. 즉, 광범위한 장치와 브라우저에 걸쳐 올바르게 표시되는 SVG를 만들 수 있음을 의미합니다. SNAP SVG로 SVG를 애니메이션 할 수 있습니까? SNAP SVG는 여러 가지 방법을 제공합니다. SVG 애니메이션. 여기에는 시간이 지남에 따라 SVG 요소의 속성을 변경하고 경로를 따라 애니메이션 등을 변경하는 방법이 포함됩니다. 또한 Snap SVG는 완화 함수 사용을 지원하여 애니메이션의 속도와 흐름을 제어 할 수 있습니다.

반응 디자인에 Snap SVG를 사용할 수 있습니까?

예, Snap SVG IS는 Snap SVG입니다. 반응 형 디자인을 만드는 훌륭한 도구. SVG는 벡터 기반이므로 품질을 잃지 않고 확장 또는 아래로 확장 할 수 있으므로 반응 형 디자인에 이상적입니다. 또한 SNAP SVG는 SVG를 조작 및 애니메이션하는 방법을 제공하여 다양한 화면 크기와 해상도에 적응하는 동적 인 대화식 디자인을 만들 수 있습니다.

SNAP SVG는 무료로 사용할 수 있습니까?

예, 그렇습니다. SNAP SVG는 오픈 소스 라이브러리입니다. 즉, 자유롭게 사용하고 수정할 수 있습니다. Snap SVG 웹 사이트에서 라이브러리를 다운로드하거나 NPM과 같은 패키지 관리자를 사용하여 설치할 수 있습니다. Snap SVG에 대해 배울 수있는 더 많은 리소스를 찾을 수 있습니까? Snap SVG에 대한 자세한 내용은 Snap SVG 웹 사이트는 라이브러리의 기능 및 기능에 대한 포괄적 인 안내서와 여러 데모 및 예제를 제공합니다. 또한 Sitepoint, Dabbles 및 Github와 같은 사이트에는 Snap Svg를 사용하는 방법에 대한 실용적인 예를 제공하는 Sitepoint, Dabbles 및 Github와 같은 사이트에는 수많은 튜토리얼과 기사가 있습니다.

위 내용은 고급 Snap.svg의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!