2010-02-18 13:51:00 -08:00
|
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
|
|
class="reftest-wait"
|
|
|
|
|
onload="setTimeAndSnapshot(5, true)">
|
|
|
|
|
<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 higer 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 higer 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"
|
2010-08-18 03:20:24 -07:00
|
|
|
from="1"
|
2010-02-18 13:51:00 -08:00
|
|
|
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"
|
2010-08-18 03:20:24 -07:00
|
|
|
from="1"
|
2010-02-18 13:51:00 -08:00
|
|
|
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"
|
2010-08-18 03:20:24 -07:00
|
|
|
from="4"
|
2010-02-18 13:51:00 -08:00
|
|
|
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"
|
2010-08-18 03:20:24 -07:00
|
|
|
from="4"
|
2010-02-18 13:51:00 -08:00
|
|
|
to="1"
|
|
|
|
|
fill="freeze"/>
|
|
|
|
|
</feTurbulence>
|
|
|
|
|
</filter>
|
|
|
|
|
<rect x="20" y="100" width="20" height="20" filter="url(#filter_12)"/>
|
|
|
|
|
|
|
|
|
|
</svg>
|
