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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait">
<title>Test animation of the "numOctaves" <integer> attribute on the "feTurbulence" element</title>
<script xlink:href="smil-util.js" type="text/javascript"/>
<!-- Our implementation strategy for animating integers with
calcMode="linear" is to use round(), with the slight twist that we
round "to the NEXT value" when the current time puts us exactly midway
between two integer values. (This is so that the result of midpoint
rounding does not depend on whether we're animating up to a higher
value or animating down to a lower value.) Note that one of the quirks
of using round() is that the start and end values of any integer
range only receive half as much time as any intermediary values. This
is as you would expect mathematically, but it's probably unexpected
for most users!
We could try to avoid this round() quirk by coming up with a better
implementation strategy for calcMode="linear", but animation of the
few integer attributes in SVG 1.1 is extremely unlikely (so this
issue is very low priority), and it's actually difficult to find a
better strategy that doesn't have its own undesirable quirks.
One alternative could be to divide the time evenly amoungst each
integer. (I.e. it would be similar to calcMode="discrete", except it
would also visit all the intermediary values, not just the start and
end values). The issue with this approach is that for a simple "to"
animation the animation wouldn't actually seem to change anything until
interpolation reaches the second integer value. This could be avoided
by skipping the initial value and distributing the time between the
other values, but then in the case of a "from-to" animation where the
from value is different to the underlying attribute value, the
animation would seem to skip the first value. Not that the same sort of
problem exists at the other end of the simple duration, where it will
reach the final integer value before the end of the simple duration.
This could be avoided by only setting the final value right at the end
of the simple duration and distributing the time between evenly
between the other values, but then the final value will only be seen if
fill="freeze".
There are many other problems with other implementation strategies. The
more you think about them, add the complexity of 'values', 'by' etc,
and think of cases where they behave strangely (e.g. animating between
just two adjacent integers, up or down, etc.), the more ugly it gets.
It's really not worth it for SVG 1.1. Maybe if you could use SMIL for
'font-size' or something even more likely to be animated it would be.
-->
<!-- Some calcMode="linear" tests animating *up* to higher values. -->
<!-- At 5s the animated value should be 3. -->
<filter id="filter_1" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
<animate attributeName="numOctaves"
calcMode="linear"
begin="0s" dur="6.1s"
to="4"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="0" width="20" height="20" filter="url(#filter_1)"/>
<!-- At exactly 5s the animated value should change to 4. -->
<filter id="filter_2" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
<animate attributeName="numOctaves"
calcMode="linear"
begin="0s" dur="6s"
to="4"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="20" width="20" height="20" filter="url(#filter_2)"/>
<!-- Some calcMode="linear" tests animating *down* to lower values. -->
<!-- At 5s the animated value should be 2. -->
<filter id="filter_3" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
<animate attributeName="numOctaves"
calcMode="linear"
begin="0s" dur="6.1s"
to="1"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="0" y="20" width="20" height="20" filter="url(#filter_3)"/>
<!-- At exactly 5s the animated value should change to 1. -->
<filter id="filter_4" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
<animate attributeName="numOctaves"
calcMode="linear"
begin="0s" dur="6s"
to="1"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="20" y="20" width="20" height="20" filter="url(#filter_4)"/>
<!-- Some 'by' animation tests -->
<!-- At 5s the animated value should be 3. -->
<filter id="filter_5" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
<animate attributeName="numOctaves"
calcMode="linear"
begin="0s" dur="6.1s"
by="3"
fill="freeze"/>
</feTurbulence>
</filter>
<rect y="40" width="20" height="20" filter="url(#filter_5)"/>
<!-- At exactly 5s the animated value should change to 4. -->
<filter id="filter_6" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
<animate attributeName="numOctaves"
calcMode="linear"
begin="0s" dur="6s"
by="3"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="20" y="40" width="20" height="20" filter="url(#filter_6)"/>
<!-- calcMode="paced" tests -->
<!-- At 5s the animated value should be 2. -->
<filter id="filter_7" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
<animate attributeName="numOctaves"
calcMode="paced"
begin="0s" dur="6.1s"
values="4; 3; 1"
fill="freeze"/>
</feTurbulence>
</filter>
<rect y="60" width="20" height="20" filter="url(#filter_7)"/>
<!-- At exactly 5s the animated value should change to 1. -->
<filter id="filter_8" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
<animate attributeName="numOctaves"
calcMode="paced"
begin="0s" dur="6s"
values="4; 3; 1"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="20" y="60" width="20" height="20" filter="url(#filter_8)"/>
<!-- Some calcMode="discrete" tests animating *up* to higher values. -->
<!-- At 5s the animated value should be 1. -->
<filter id="filter_9" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
<animate attributeName="numOctaves"
calcMode="discrete"
begin="0s" dur="10.1s"
from="1"
to="4"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="0" y="80" width="20" height="20" filter="url(#filter_9)"/>
<!-- At exactly 5s the animated value should change to 4. -->
<filter id="filter_10" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
<animate attributeName="numOctaves"
calcMode="discrete"
begin="0s" dur="10s"
from="1"
to="4"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="20" y="80" width="20" height="20" filter="url(#filter_10)"/>
<!-- Some calcMode="discrete" tests animating *down* to lower values. -->
<!-- At 5s the animated value should be 4. -->
<filter id="filter_11" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
<animate attributeName="numOctaves"
calcMode="discrete"
begin="0s" dur="10.1s"
from="4"
to="1"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="0" y="100" width="20" height="20" filter="url(#filter_11)"/>
<!-- At exactly 5s the animated value should change to 1. -->
<filter id="filter_12" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
<animate attributeName="numOctaves"
calcMode="discrete"
begin="0s" dur="10s"
from="4"
to="1"
fill="freeze"/>
</feTurbulence>
</filter>
<rect x="20" y="100" width="20" height="20" filter="url(#filter_12)"/>
<script type="text/javascript">
function doTest() {
setTimeAndSnapshot(5, true);
}
window.addEventListener("MozReftestInvalidate", doTest, false);
</script>
</svg>
|
