HTML5의 SVG 2D 소개 : 11- 사용자 상호 작용 (애니메이션) 소개 및 응용 프로그램

SVG는 다음과 같은 우수한 사용자 상호 작용을 가지고 있습니다.

1. SVG는 대부분의 DOM2 이벤트에 응답 할 수 있습니다.

2. SVG는 커서를 통해 사용자의 마우스 움직임을 잘 포착 할 수 있습니다.

3. 사용자는 SVG 요소의 Zoomandpan 속성 값을 설정하여 스케일링 및 기타 효과를 쉽게 달성 할 수 있습니다.

4. 사용자는 애니메이션과 이벤트를 쉽게 결합하여 복잡한 효과를 완료 할 수 있습니다.

SVG 요소에 이벤트를 첨부함으로써 스크립팅 언어를 사용하여 대화식 작업을 쉽게 완료 할 수 있습니다. SVG는 Onfocusin, Onfocusou, Onclick, OnMousedown, OnMouseUp, OnMouseMove, OnMouseOut, OnLoad, OnResize, Onscroll 및 기타 이벤트와 같은 대부분의 DOM2 이벤트를 지원합니다. 이 외에도 SVG는 Onroom, Onbegin, OnEnd, OnRepeat 등과 같은 독특한 애니메이션 관련 이벤트를 제공합니다.

모두가 사건에 익숙하기 때문에 나는 그것에 대해 이야기하지 않을 것입니다.

SVG는 텍스트를 사용하여 그래픽을 정의 하며이 문서 구조는 애니메이션을 만드는 데 매우 적합합니다. 그림의 위치, 크기 및 색상을 변경하려면 해당 속성 만 조정하면됩니다. 실제로 SVG는 다양한 이벤트 처리를 위해 특별히 설계된 속성을 보유하고 있으며, 그 중 다수는 애니메이션에 맞게 만들어졌습니다. SVG에는 애니메이션을 구현하는 몇 가지 방법이 있습니다.

1. SVG의 애니메이션 요소를 사용하십시오. 이것은 아래에 강조 표시됩니다.

2. 스크립트를 사용하십시오. DOM 작업을 사용하여 애니메이션을 시작하고 제어하는 ​​것은 이미 성숙한 기술이며, 아래에는 작은 예가 있습니다.

3. Smil (동기화 된 멀티미디어 통합 언어). 관심이 있으시면 http://www.w3.org/tr/2008/rec-smil3-20081201/을 참조하십시오.

<svgviewbox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg"version = "1.1">

<sc> 기본 애니메이션 요소 </desc>

<rect x = "1"y = "1"

fill = "none"stroke = "blue"stroke-width = "2" />

<!-사각형 위치와 크기의 애니메이션->

<rect id = "rectlement"x = "300"y = "100"

fill = "rgb (255,255,0)">

<animate adpributeName = "X"aIgribiteType = "XML"

시작 = "0s"dur = "9s"fill = "freeze"에서 = "300"~ = "0" />

<ANIMATE ADRIBITENAME = "y"attributeType = "XML"

시작 = "0s"dur = "9s"fill = "freeze"에서 = "100"~ = "0" />

<animate adpributeName = "width"attributeType = "XML"

시작 = "0s"dur = "9s"fill = "freeze"에서 = "300"~ = "800" />

<animate adpributeName = "height"aftributeType = "XML"

시작 = "0s"dur = "9s"fill = "freeze"에서 = "100"~ = "300" />

</rect>

<!-새 사용자 좌표 공간을 만듭니다. 따라서 텍스트는 새로운 (0,0)로 시작되며 다음 변환은 새로운 좌표계->입니다.

<g transform = "번역 (100,100)">

<!- ​​다음은 가시성을 애니메이션하기 위해 설정 한 다음 Animatemotion을 사용합니다.

애니메이션 및 animatetransform 다른 유형의 애니메이션 (>)을 수행합니다

<text id = "textlement"x = "0"y = "0"

font-family = "Verdana"font-size = "35.27"Visibility = "Hidden">

살아있어!

<속성 속성 세트 = "Visibility"attributeType = "CSS"to = "Visible"

시작 = "3s"dur = "6s"fill = "Freeze" />

<animatemotion path = "m 0 l 100 100"

시작 = "3s"dur = "6s"fill = "Freeze" />

<ANIMATE ADRIBITENAME = "fill"autributeType = "CSS"

From = "RGB (0,0,255)"~ = "RGB (128,0,0)"

시작 = "3s"dur = "6s"fill = "Freeze" />

<animateTransform aftributeName = "transform"attributeType = "XML"

type = "rotate"from = "-30"~ = "0"

시작 = "3s"dur = "6s"fill = "Freeze" />

<animateTransform aftributeName = "transform"attributeType = "XML"

type = "scale"from = "1"~ = "3"추가 = "sum"

시작 = "3s"dur = "6s"fill = "Freeze" />

</text>

</g>

</svg>

이 코드를 HTML 문서의 본문에 넣고 애니메이션의 효과를 알기 위해 실행하십시오.

Xlink : Href

이것은 애니메이션을 실행하는 요소를 가리키면서 매우 친숙해야합니다. 이 요소는 현재 SVG 문서 조각에서 정의되어야합니다. 이 속성이 지정되지 않으면 애니메이션이 부모 요소에 적용됩니다.

AttributeName = <AttributeName>

이 속성은 애니메이션을 적용하기위한 속성을 지정합니다. 이 속성에 네임 스페이스가있는 경우 (잊지 말고 SVG는 본질적으로 XML 문서입니다)이 네임 스페이스도 추가해야합니다. 예를 들어, 다음 예에서 Xlink는 다른 별칭이 제공됩니다. 여기에서 애니메이션이 속성을 지정하면 네임 스페이스가 포함됩니다.

<svg version = "1.1"xmlns = "http://www.w3.org/2000/svg"

xmlns : xlink = "http://www.w3.org/1999/xlink">

<title> 애니메이션의 네임 스페이스 해상도 시연 </title>

<g xmlns : a = "http://www.w3.org/1999/xlink">

<animate adpributeName = "a : href"xlink : href = "#foo"dur = "2s"to = "two.png"fill = "freeze"/>

</g>

<g xmlns : b = "http://www.w3.org/1999/xlink"xmlns : xlink = "http://example.net/bar">

<image xml : id = "foo"b : href = "one.png"x = "35"y = "50"/>

</g>

</svg>

AttributeType = CSS | XML | 자동 (기본값)

이 속성은 속성 값을 가져 오는 네임 스페이스를 지정합니다. 이 값의 의미는 다음과 같습니다.

CSS : 속성을 대신하여 지정된 속성은 CSS 속성입니다.

XML : AttributeName으로 지정된 속성은 XML의 기본 네임 스페이스에 속한 속성입니다 (SVG 문서는 본질적으로 XML 문서 임).

Auto : CSS 속성의 속성으로 지정된 속성을 먼저 찾는 것을 의미합니다. 찾을 수없는 경우 기본 XML 네임 스페이스에서 속성을 찾습니다.

다음 속성은 애니메이션 시간 속성입니다. 애니메이션 실행 타임 라인을 제어합니다. 애니메이션이 반복적으로 실행되는지 여부에 관계없이 애니메이션을 시작하고 종료하는 방법을 포함하여 애니메이션이 끝나는 지 등을 제어합니다.

시작 = 시작-값-목록

이 속성은 애니메이션의 시작 시간을 정의합니다. 세미콜론으로 분리 된 일련의 시간 값 일 수 있습니다. 애니메이션의 시작을 트리거하는 다른 가치 일 수도 있습니다. 예를 들어, 이벤트, 바로 가기 키 등

DUR = CLOCK-VALUE | 미디어 | 무기한

애니메이션의 지속 시간을 정의합니다. 시계 형식으로 표시된 값으로 설정할 수 있습니다. 다음 두 값으로 설정할 수도 있습니다.

미디어 : 애니메이션 시간이 내부 멀티미디어 요소의 지속 시간임을 지정합니다.

무기한 : 애니메이션 시간을 무한하도록 지정하십시오.

시계 형식은 다음과 같은 법적 가치 형식을 나타냅니다.

: 30 : 03 = 2 시간, 30 분 3 초

: 00 : 10.25 = 50 시간, 10 초 및 2 억 5 천만 초

: 33 = 2 분 33 초

: 10.5 = 10.5 초 = 10 초 및 5 억 초

.2H = 3.2 시간 = 3 시간 12 분

최소 = 45 분

S = 30 초

MS = 5 백만 초

.467 = 12 초 및 467 백만 초

.5S = 5 억 초

: 00.005 = 5 백만 초

end = end-value-list

애니메이션의 종료 시간을 정의합니다. 세미콜론으로 분리 된 일련의 값 일 수 있습니다.

Min = Clock-value | 메디아

max = clock-value | 메디아

애니메이션 지속 시간의 최대 및 최소값을 설정합니다.

다시 시작 = 항상 | 비 활동적 일 때 | 절대

언제든지 시작할 애니메이션을 설정하십시오. 항상 애니메이션은 언제든지 시작할 수 있음을 의미합니다. NOTACTIVE는 이전 재생 끝과 같은 재생이없는 경우에만 다시 시작할 수 있음을 의미합니다. 애니메이션을 다시 시작할 수 없다는 것을 의미하지 않습니다.

repeatCount = 숫자 값 | 무기한

애니메이션이 반복되는 횟수를 설정하십시오. 무한한 반복을 나타냅니다.

Returdur = Clock-value | 무기한

반복의 총 애니메이션 시간을 설정합니다. 무한한 반복을 나타냅니다.

충전 = 동결 | 제거 (기본값)

애니메이션이 완료된 후 요소 상태를 설정합니다. 동결은 애니메이션이 끝난 후에 애니메이션의 마지막 상태에 요소가 유지됨을 의미합니다. 제거는 애니메이션이 끝난 후 애니메이션 전에 요소가 상태로 돌아옵니다. 이는 기본값입니다.

카테고리 3 : 애니메이션 값의 속성을 정의합니다

이러한 속성은 실행되는 속성의 값을 정의합니다. 실제로 키 프레임과 보간을 정의하는 일부 알고리즘.

calcmode = distrete | 선형 (기본값) | PACE | 운형자

애니메이션 보간 방법을 정의하십시오. 개별 : 개별, 보간 없음; 선형 : 선형 보간; 진행 : 단계 크기 보간; 스플라인 : 스플라인 보간. 기본값은 선형 (선형 보간)이지만 속성이 선형 보간을 지원하지 않으면 개별 보간이 사용됩니다.

value = <list>

세미콜론으로 분리 된 애니메이션 키 프레임의 값 목록을 정의합니다. 지원 벡터 값.

keytimes = <list>

세미콜론으로 분리 된 애니메이션 키 프레임의 시간 목록을 정의합니다. 이것은 하나씩 값에 해당합니다. 이 값은 보간 알고리즘의 영향을받습니다. 선형 및 스플라인 보간 인 경우, 핵심 시간의 첫 번째 값은 0이어야하고 마지막 값은 1이어야합니다. 개별 비 중절의 경우 키 타임의 첫 번째 값은 0이어야합니다. 스텝 크기 보간의 경우 키 타임이 필요하지 않습니다. 그리고 애니메이션의 지속 시간이 무기한으로 설정되면 핵심 시간이 무시됩니다.

KeysPlines = <list>

이 속성은 Spline 보간 (Betzel Interpolation) 시대를 정의하며 보간 모드가 스플라인으로 선택된 경우에만 작동합니다. 이 목록의 값은 0에서 1입니다.

에서 = <value>

to = <value>

by = <value>

애니메이션 속성의 시작, 끝 및 단계 값을 정의합니다. 참고 : 값이 이미 관련 값을 공식화 한 경우/~/별로//별로 값을 무시합니다.

때로는 절대 값 대신 관련 값을 설정하는 것이 매우 유용하지만, 부가 속성을 사용하는 증분 값은이 목표를 달성 할 수 있습니다.

첨가제 = 교체 (기본값) | 합집합

이 속성은 애니메이션이 점진적인지 여부를 제어합니다. 합계는 애니메이션에 더 큰 관련 속성 값 또는 기타 낮은 우선 순위 애니메이션이 있음을 의미합니다. 대체는 기본값으로, 애니메이션이 관련 속성 값 또는 기타 낮은 우선 순위 애니메이션을 덮어 쓸 것임을 나타냅니다. 작은 예를 참조하십시오.

<렉술 ...>

<animate actributeName = "width"from = "0px"to = "10px"dur = "10s"

첨가제 = "sum"/>

</rect>

이 예제는 사각형 폭을 증가시키는 애니메이션 효과를 보여줍니다.

때로는 반복되는 애니메이션 결과가 중첩되어있는 경우에도 매우 유용하며 축적 속성을 사용하면이 목표를 달성 할 수 있습니다.

축적 = 없음 (기본값) | 합집합

이 속성은 애니메이션 효과가 누적되는지 여부를 제어합니다. 중복 애니메이션이 축적되지 않음을 나타내는 기본값은 없습니다. 합계는 반복 된 애니메이션 효과가 축적되었음을 의미합니다. 단일 사상 애니메이션의 경우이 속성에는 의미가 없습니다. 작은 예를 참조하십시오.

<렉술 ...>

<animate actributeName = "width"from = "0px"to = "10px"dur = "10s"

추가 = "sum"accumulation = "sum"repeatCount = "5"/>

</rect>

이 예는 사각형의 길이가 각 반복에서 증가 함을 보여줍니다.

SVG는 다음과 같은 애니메이션 요소를 제공합니다.

이것은 가장 기본적인 애니메이션 요소로, 관련 속성에 대한 다른 시점의 값을 직접 제공 할 수 있습니다.

이것은 애니메이션 요소의 약어이며 특히 애니메이션 속성 (예 : 가시성) 일 때 모든 속성 유형을 지원합니다. 세트 요소는 비수분하지 않으며 관련 속성은 유효하지 않습니다. 지정된 애니메이션 엔드 값 유형은 속성의 값 유형을 준수해야합니다.

루진 애니메이션 요소. 이 요소의 속성의 대부분은 위와 동일하며 다음과 같은 차이점 만 있습니다.

calcmode = distrete | 선형 | PACE | 운형자

이 속성의 기본값은 다르고이 요소의 기본값은 진행됩니다.

경로 = <path-data>

움직이는 애니메이션 요소의 경로는 경로 요소의 d 속성의 값 형식과 동일합니다.

kyypoints = <list-of-numbers>

이 속성의 값은 세미콜론에 의해 주어진 일련의 부동 소수점 값이며 각 값의 값 범위는 0 ~ 1입니다. 이 값은 해당 시점이 keytimes 속성으로 지정되는 거리를 나타냅니다. 여기의 특정 거리는 브라우저 자체에 의해 결정됩니다.

회전 = <번호> 자동 | 자동 반대

이 속성은 요소가 움직일 때 회전하는 각도를 지정합니다. 기본값은 0이고, 숫자는 회전 각도를 나타내고, 자동은 도로 힘의 방향으로 회전하는 동물 몸체를 나타냅니다. 자동 반대는 조향이 움직임 방향과 반대되는 방향을 나타냅니다.

또한, 값으로부터의 애니메이션 요소의 값은 좌표 쌍으로 구성됩니다. x 값과 y 값은 쉼표 또는 공간으로 분리되며, 각 좌표 쌍은 = 33, 15와 같은 세미콜론으로 분리되며, 이는 시작점 x 좌표가 33이고 y 좌표는 15임을 의미합니다.

모션 경로를 지정하는 두 가지 방법이 있습니다. 하나는 경로 속성에 값을 직접 할당하는 것입니다. 다른 하나는 MPATH 요소를 animatemotionDe의 자식 요소로 사용하는 경로를 지정하는 것입니다. 두 가지 메소드를 모두 사용하면 MPATH 요소가 우선 순위가 높습니다. 두 방법 모두 값보다 우선 순위가 높습니다.

작은 예를 참조하십시오.

<? xml 버전 = "1.0"standalone = "no"?>

<! doctype svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svgviewbox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg"version = "1.1"

xmlns : xlink = "http://www.w3.org/1999/xlink">

<rect x = "1"y = "1"

fill = "none"stroke = "blue"stroke-width = "2" />

<Path ID = "Path1"D = "M100,250 C 100,50 400,50 400,250"

fill = "none"stroke = "blue"stroke-width = "7.06"/>

<circle cx = "100"cy = "250"r = "17.64"fill = "blue"/>

<circle cx = "250"cy = "100"r = "17.64"fill = "blue"/>

<circle cx = "400"cy = "250"r = "17.64"fill = "blue"/>

<경로 d = "m-25, -12.5 l25, -12.5 l 0, -87.5 z"

Fill = "Yellow"Stroke = "Red"Stroke-width = "7.06">

<animAtMotion dur = "6S"repeatCount = "indefinite"rotate = "auto">

<mpath xlink : href = "#path1"/>

</animatemotion>

</path>

</svg>

색상 애니메이션 요소. 이것은 구식 요소이며 기본적으로 모든 기능은 애니메이션으로 대체 될 수 있으므로 사용하지 마십시오.

애니메이션 요소를 변환합니다. 몇 가지 특별한 속성을 살펴보십시오.

유형 = 번역 | 스케일 | 회전 | skewx | 꼬치

이 속성은 변환의 유형을 지정하고 번역은 기본값입니다.

변환의 매개 변수에 해당하는 값은 위에서 언급 한 변환과 일치합니다. 값은 세미콜론 구분 된 값 세트입니다.

애니메이션 효과를 지원하는 요소 및 속성

기본적으로 모든 그래픽 요소 (Path, RECK, ELLIPSE, TEXT, IMAGE ...) 및 컨테이너 요소 (SVG, G, DEFS, 사용, 스위치, Clippath, 마스크 ...) 지원 애니메이션. 기본적으로 대부분의 속성은 애니메이션 효과를 지원합니다. 자세한 지침은 공식 문서를 참조하십시오.

SVG 애니메이션은 스크립트를 사용하여 완료 할 수도 있습니다. DOM의 자세한 내용은 나중에 소개됩니다. 다음은 간단한 예입니다.

<? xml 버전 = "1.0"standalone = "no"?>

<! doctype svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svg viewbox = "0 0 400 200"

xmlns = "http://www.w3.org/2000/svg"

onload = "startAnimation (evt)"버전 = "1.1">

<script type = "application/ecmascript"> <! [cdata [cdata [

var timeValue = 0;

var timer_increment = 50;

var max_time = 5000;

var text_element;

함수 startanimation (evt) {

Text_Element = evt.target.ownerDocument.getElementById ( "TextLement");

showandgrowelement ();

}

함수 showandgrowelement () {

timeValue = timeValue + timer_increment;

if (timeValue> max_time)

반품;

// 텍스트 문자열이 20 배 더 클 때까지 점차적으로 스케일

scalefactor = (timeValue * 20.) / max_time;

text_element.setattribute ( "transform", "scale (" + scalefactor + ")");

// 문자열을 더 불투명하게 만듭니다

불투명도 = 타임 값/max_time;

text_element.setattribute ( "불투명", 불투명도);

// ShowandGrowElement를 다시 호출합니다.

settimeout ( "showandgrowelement ()", timer_increment)

}

Window.ShowandgrowElement = ShowandgrowElement

]]]> </스크립트>

<rect x = "1"y = "1"

fill = "none"stroke = "blue"stroke-width = "2"/>

<g transform = "translate (50,150)"fill = "red"font-size = "7">

<text id = "textlement"> svg </text>

</g>

</svg>

스크립트 인덱스 : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

개발 센터 : https://developer.mozilla.org/en/svg

인기있는 참조 : http://www.chinasvg.com/

공식 문서 : http://www.w3.org/tr/svg11/

SVG 애니메이션 기술 : http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx