1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 150 70"
preserveAspectRatio="xMidYMid"
version="1.1">
<desc>Animates sorted insert (sins/3) with rectangles.</desc>
<!-- definiramo sceno -->
<defs>
<!-- CSS stil: definiramo barve, debeline črt, fonte, ... -->
<style type="text/css"><![CDATA[
line {
stroke: black;
stroke-width: 0.5;
}
.block {
stroke: black;
stroke-width: 0.5;
fill: none;
}
.dashed {
stroke-dasharray: 2,2;
}
text {
font-family: Verdana, Tahoma, sans-serif;
font-size: 4px;
fill: black;
}
#ri-text, #ri-text-yes, #ri-text-no {
visibility: hidden;
}
]]></style>
<!-- puščica na koncu črte -->
<marker id="arrowhead"
viewBox="0 0 10 10" refX="10" refY="5"
markerUnits="strokeWidth"
markerWidth="5"
markerHeight="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10" stroke="black" stroke-width="1.5" fill="none"/>
</marker>
<!-- obrezovanje (clipping), s katerim je narejena animacija prikazovanja črte, ki se "riše" od leve proti desni -->
<clipPath id="ri-lineClip">
<rect id="ri-lineClip-rect" x="7" width="0" height="50"/>
</clipPath>
</defs>
<g transform="translate(0,10)"><!-- vse skupaj (sceno) pomaknemo 10 pixlov navzdol -->
<line x1="0" x2="150" y1="50" y2="50"/><!-- spodnja črta za podlago -->
<g transform="translate(90,0)">
<g id="r1" transform="translate(0,0)"><!-- uporabi se transform, ker se le-ta lahko animira -->
<rect width="7" height="10" y="40" class="block"/><!-- najmanjši pravokotnik; uporabimo y za "zapolnitev" vertikale, tako da so vsi pravokotniki enako visoki (lažje animiranje) -->
</g>
<g id="r2" transform="translate(10,0)">
<rect width="7" height="20" y="30" class="block"/>
</g>
<g id="r3" transform="translate(20,0)">
<rect width="7" height="30" y="20" class="block"/>
</g>
<g id="r4" transform="translate(30,0)">
<rect width="7" height="40" y="10" class="block"/>
</g>
<g id="r5" transform="translate(40,0)">
<rect width="7" height="50" y="0" class="block"/><!-- največji pravokotnik -->
</g>
</g>
<g id="ri"><!-- skupina za pravokotnik, ki ga vrivamo -->
<rect width="7" height="25" y="25" class="block"/><!-- dejanski pravokotnik / vrivanec -->
<path id="ri-path" d="M 7 37.5 L 75 45" stroke="black" stroke-width="0.5" fill="none" class="dashed" marker-end="url(#arrowhead)" clip-path="url(#ri-lineClip)"/><!-- črta predstavljena z elementom path, ker tega lahko uporabimo tudi spodaj v textPath, npr. elementa line pa ne moremo -->
<!-- besedilo, ki ga "nalimamo" na zgornjo črto/puščico s textPath, ter odgovora "Yes" in "No" v posebnih tspan segmentih, da lahko ločeno kontroliramo njuno prikaznost -->
<text id="ri-text" transform="translate(3,-2)"><textPath xlink:href="#ri-path">Am I bigger than you? <tspan id="ri-text-yes">Yes.</tspan><tspan id="ri-text-no" style="display:none;">No!</tspan></textPath></text>
</g>
</g>
<!-- spodaj je definirana animacija -->
<!-- sklop 1: vrivanec se pripelje na sceno in vpraša prvega pravokotnika, če je večji od njega -->
<animateTransform id="animStart" attributeName="transform" attributeType="XML" type="translate" from="0,0" to="15,0" dur="0.8s" additive="replace" fill="freeze" xlink:href="#ri"/><!-- pripelje vrivanca na sceno-->
<animate id="animLine1" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animStart.endEvent+0.5s"/><!-- prikaže puščico -->
<set id="animVisible1" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine1.endEvent"/><!-- prikaže vprašanje -->
<set id="animVisible2" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animVisible1.endEvent+1.5s"/><!-- prikaže odgovor -->
<!-- sklop 2: skrijemo puščico in napis ter repozicioniramo konec puščice malo višje: na sredino drugega pravokotnika -->
<set id="animHide1" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible2.endEvent+2s"/><!-- skrijemo puščico -->
<set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide1.beginEvent"/><!-- skrijemo vprašanje -->
<set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide1.beginEvent"/><!-- skrijemo odgovor "Yes" -->
<set attributeName="d" attributeType="XML" to="M 7 37.5 L 75 40" dur="0.1s" fill="freeze" xlink:href="#ri-path" begin="animHide1.beginEvent"/><!-- popravimo zadnjo koordinato, da kaže 5 pixlov višje -->
<!-- sklop 3: premaknemo prvi pravokotnik za vrivancem, premaknemo vrivanca malo naprej -->
<animateTransform id="animMove1" attributeName="transform" attributeType="XML" type="translate" from="0,0" to="-75,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r1" begin="animHide1.endEvent"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="15,0" to="25,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animMove1.beginEvent"/>
<!-- sklop 4: vrivanec vpraša drugega pravokotnika -->
<animate id="animLine2" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animMove1.endEvent+0.5s"/><!-- prikaže puščico -->
<set id="animVisible21" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine2.endEvent"/><!-- prikaže vprašanje -->
<set id="animVisible22" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animVisible21.endEvent+1.5s"/><!-- prikaže odgovor -->
<!-- sklop 5: skrijemo puščico in napis ter repozicioniramo konec puščice malo višje: na sredino tretjega pravokotnika, umaknemo "Yes" iz prikaza in namesto njega uvedemo "No" -->
<set id="animHide2" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible22.endEvent+2s"/><!-- skrijemo puščico -->
<set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide2.beginEvent"/><!-- skrijemo vprašanje -->
<set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide2.beginEvent"/><!-- skrijemo odgovor "Yes" -->
<set attributeName="d" attributeType="XML" to="M 7 37.5 L 75 35" dur="0.1s" fill="freeze" xlink:href="#ri-path" begin="animHide2.beginEvent"/><!-- popravimo zadnjo koordinato, da kaže 5 pixlov višje -->
<set attributeName="display" attributeType="CSS" to="none" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide2.beginEvent"/><!-- izvzamemo odgovor "Yes" iz prikazne strukture -->
<set attributeName="display" attributeType="CSS" to="block" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animHide2.beginEvent"/><!-- vključimo odgovor "No" v prikazno strukturo -->
<!-- sklop 6: premaknemo drugi pravokotnik za vrivancem, premaknemo vrivanca malo naprej -->
<animateTransform id="animMove2" attributeName="transform" attributeType="XML" type="translate" from="10,0" to="-65,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r2" begin="animHide2.endEvent"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="25,0" to="35,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animMove2.beginEvent"/>
<!-- sklop 7: vrivanec vpraša tretjega pravokotnika -->
<animate id="animLine3" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animMove2.endEvent+0.5s"/><!-- prikaže puščico -->
<set id="animVisible31" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine3.endEvent"/><!-- prikaže vprašanje -->
<set id="animVisible32" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animVisible31.endEvent+1.5s"/><!-- prikaže odgovor -->
<!-- sklop 8: skrijemo puščico in napis -->
<set id="animHide3" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible32.endEvent+2s"/><!-- skrijemo puščico -->
<set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide3.beginEvent"/><!-- skrijemo vprašanje -->
<set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animHide3.beginEvent"/><!-- skrijemo odgovor "No" -->
<!-- sklop 9: premaknemo pravokotnike skupaj: vse pravokotnike na levi premaknemo v desno -->
<animateTransform id="animMove3" attributeName="transform" attributeType="XML" type="translate" to="100,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animHide3.endEvent"/><!-- vrivanec -->
<animateTransform attributeName="transform" attributeType="XML" type="translate" to="-10,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r1" begin="animMove3.beginEvent"/><!-- prvi (najmanjši) pravokotnik -->
<animateTransform attributeName="transform" attributeType="XML" type="translate" to="0,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r2" begin="animMove3.beginEvent"/><!-- drugi pravokotnik -->
<!-- načeloma manjka še sklop 0, ki resetira stanje v prvotno, če hočemo da je animacija ponovljiva, kar pustimo bralcu za vajo -->
</svg>
|
