Skip to content

Commit 9f998b0

Browse files
shanssvgeesus
shans
authored and
svgeesus
committed
Improved path transform algorithm, resolved some issues.
1 parent 482be88 commit 9f998b0

2 files changed

Lines changed: 412 additions & 174 deletions

File tree

‎motion-1/Overview.bs‎

Lines changed: 109 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,48 @@ Editor: Shane Stephens, Google, shanestephens@google.com
1111
Abstract: Motion paths allow authors to animate any graphical object along an author specified path.
1212
</pre>
1313

14+
<pre class="anchors">
15+
url: https://svgwg.org/svg2-draft/shapes.html#TermShapeElement; type: dfn; spec: SVG2; text: shape element
16+
</pre>
17+
18+
19+
<style>
20+
/* Style for bikeshed variant of switch/case <dl>s */
21+
div.switch dl > dd > ol.only {
22+
margin-left: 0;
23+
}
24+
25+
div.switch dl > dd > ol.algorithm {
26+
margin-left: -2em;
27+
}
28+
29+
div.switch dl {
30+
padding-left: 2em;
31+
}
32+
33+
div.switch dl > dt {
34+
text-indent: -1.5em;
35+
margin-top: 1em;
36+
}
37+
38+
div.switch dl > dt + dt {
39+
margin-top: 0;
40+
}
41+
42+
div.switch dl > dt > p {
43+
display: inline;
44+
}
45+
46+
div.switch dl > dt:before {
47+
content: '\21AA';
48+
padding: 0 0.5em 0 0;
49+
display: inline-block;
50+
width: 1em;
51+
text-align: right;
52+
line-height: 0.5em;
53+
}
54+
</style>
55+
1456
<h2 id="intro">Introduction</h2>
1557

1658
<em>This section is not normative.</em>
@@ -27,7 +69,7 @@ This specification allows authors to specify an <a>motion path</a>. The object c
2769
</div>
2870
</div>
2971

30-
A motion path may consist of a <<basic-shape>> like <<circle()>>, <<inset()>> or <<polygon()>>. To allow authors to specify curves and sub-paths, this specification adds the <<path()>> function in addition to the existing <<basic-shape>> functions. The <<path()>> function takes an SVG Path string as input [[!SVG11]]. As a third option, authors may reference an SVG <a href="">graphics element</a> by <<url>> which is used as motion path.
72+
A motion path may consist of a <<basic-shape>> like <<circle()>>, <<inset()>> or <<polygon()>>. To allow authors to specify curves and sub-paths, this specification adds the <<path()>> function in addition to the existing <<basic-shape>> functions. The <<path()>> function takes an SVG Path string as input [[!SVG2]]. As a third option, authors may reference an SVG <a>shape element</a> by <<url>> which is used as the motion path.
3173

3274
<h2 id="placement">Module interactions</h2>
3375

@@ -53,7 +95,7 @@ ISSUE: Add more details and examples.
5395
Name: motion-path
5496
Value: <<url>> | [ <<basic-shape>> | <<path()>> ] || <<geometry-box>> | none
5597
Initial: none
56-
Applies to: All elements. In SVG, it applies to <a href="">container elements</a> excluding the <a href="">defs</a> element and all <a href="">graphics elements</a>
98+
Applies to: All elements. In SVG, it applies to <a>container elements</a> excluding the <{defs}> element and all <a>graphics elements</a>
5799
Inherited: no
58100
Percentages: n/a
59101
Computed value: as specified
@@ -88,15 +130,15 @@ Values have the following meanings:
88130
</dd>
89131
<dt><<url>></dt>
90132
<dd>
91-
References an SVG <a href="">graphics element</a> and uses it's geometry as motion path. See SVG 1.1 for more information about the initial position and initial direction [[!SVG11]].
133+
References an SVG <a>shape element</a> and uses its geometry as motion path. See SVG 1.1 for more information about the initial position and initial direction [[!SVG11]].
92134
</dd>
93135
<dt dfn-type=value><dfn>none</dfn></dt>
94136
<dd>No motion path gets created.</dd>
95137
</dl>
96138

97139
A computed value of other than ''none'' results in the creation of a <a spec="css21">stacking context</a> [[!CSS21]] the same way that CSS 'opacity' [[CSS3COLOR]] does for values other than ''1'', unless the element is an SVG element with out an associated CSS layout box.
98140

99-
A reference that fails to download, is not a reference to an SVG <a href="">graphics element</a> element, or is non-existent is ignored. No motion path and no stacking context are created.
141+
A reference that fails to download, is not a reference to an SVG <a>shape element</a> element, or is non-existent is ignored. No motion path and no stacking context are created.
100142

101143
See the section <a href="#motion-processing">“Motion processing”</a> for how to process a motion path.
102144

@@ -110,7 +152,7 @@ For elements with associated CSS layout box, the <a>used value</a> for <a value
110152
Name: motion-offset
111153
Value: <<length>> | <<percentage>>
112154
Initial: 0
113-
Applies to: All elements. In SVG, it applies to <a href="">container elements</a> excluding the <a href="">defs</a> element and all <a href="">graphics elements</a>
155+
Applies to: All elements. In SVG, it applies to <a>container elements</a> excluding the <{defs}> element and all <a>graphics elements</a>
114156
Inherited: no
115157
Percentages: refer to the total path length
116158
Computed value: as specified
@@ -126,15 +168,6 @@ A distance that describes the position along the specified <a>motion path</a>.
126168
<dd>The distance from the <a>initial position</a> of the shape or path to the position of the element. Percentages are relative to the total path length including all sub-paths.</dd>
127169
</dl>
128170

129-
<div class="issue">
130-
What happens if the position is negative or exceeds the <a>motion path</a> length?
131-
<ul>
132-
<li>Cutting-off values to be between 0% and 100%.</li>
133-
<li>Use negative distance from the end of the path and jump to 0 after that. Continue till the end of the path and continue from the beginning again.</li>
134-
<li>Adjust the time the same way as we adjust radial gradients on negative color stop offsets and position at beginning/end of path.</li>
135-
</ul>
136-
</div>
137-
138171
See the section <a href="#motion-processing">“Motion processing”</a> for how to process a motion position.
139172

140173
<h3 id="motion-rotation">Rotation at point: The 'motion-rotation' property</h3>
@@ -143,7 +176,7 @@ See the section <a href="#motion-processing">“Motion processing”</a> for how
143176
Name: motion-rotation
144177
Value: [ auto | reverse ] && <<angle>>
145178
Initial: auto
146-
Applies to: All elements. In SVG, it applies to <a href="">container elements</a> excluding the <a href="">defs</a> element and all <a href="">graphics elements</a>
179+
Applies to: All elements. In SVG, it applies to <a href="">container elements</a> excluding the <{defs}> element and all <a>graphics elements</a>
147180
Inherited: no
148181
Percentages: n/a
149182
Computed value: as specified
@@ -202,7 +235,7 @@ See the section <a href="#motion-processing">“Motion processing”</a> for how
202235
Name: motion
203236
Value: &lt;'motion-path'> && &lt;'motion-offset'> && &lt;'motion-rotation'>
204237
Initial: see individual properties
205-
Applies to: All elements. In SVG, it applies to <a href="">container elements</a> excluding the <a href="">defs</a> element and all <a href="">graphics elements</a>
238+
Applies to: All elements. In SVG, it applies to <a href="">container elements</a> excluding the <{defs}> element and all <a>graphics elements</a>
206239
Inherited: no
207240
Percentages: see individual properties
208241
Computed value: see individual properties
@@ -214,36 +247,65 @@ This is a shorthand property for setting 'motion-path', 'motion-offset' and 'mot
214247

215248
<h3 id="motion-processing">Motion processing</h3>
216249

217-
<dl class="switch">
218-
<dt>If 'motion-path' specifies a valid basic shape, path or references a valid SVG <a href="">graphics element</a>:</dt>
219-
<dd>
220-
<ol>
221-
<li>Let <var>path</var> be the geometry of the specified basic shape, path or SVG <a href="">graphics element</a> reference.</li>
222-
<li>Let <var>totalLength</var> be the total length of <var>path</var> with all sub-paths.</li>
223-
<li>Let <var>distance</var> be the compute value of 'motion-offset':
224-
<dl class="switch">
225-
<dt>If <var>distance</var> is &lt; 0:</dt>
226-
<dd>Set <var>distance</var> to 0.</dd>
227-
<dt>If <var>distance</var> is > <var>totalLength</var>:</dt>
228-
<dd>Set <var>distance</var> to <var>totalLength</var>.</dd>
229-
</dl>
230-
</li>
231-
<li>
232-
<p>Let <var>position</var> be the coordinate pair at the distance <var>distance</var> on <var>path</var>.
233-
<p class="issue">Do we need to say how to get the position in more detail?</p>
234-
</li>
235-
<li>Create the supplemental transformation matrix <var>transform</var> to the local coordinate system of the element.</li>
236-
<li>Translate <var>transform</var> by <var>position</var>.</li>
237-
<li>
238-
<p>Let <var>rotate</var> be the computed value of 'motion-rotation' due to <var>path</var>.
239-
<p class="issue">This should be far more explicit.</p>
240-
</li>
241-
<li>Post-multiply the rotation <var>rotate</var> to <var>transform</var>.</li>
242-
<li>Post-multiply <var>transform</var> to the local coordinate system of the element.</li>
243-
</ol>
244-
</dd>
245-
<dt>Otherwise:</dt>
246-
<dd>Do nothing.</dd>
247-
</dl>
250+
<h4 id="calculating-the-computed-distance-along-a-path">Calculating the computed distance along a path</h4>
251+
252+
Processing the distance along a path operates differently depending upon whether
253+
the path is open or closed:
254+
255+
* All basic CSS shapes are closed.
256+
* Paths (including references to SVG Paths) are closed only if the final command
257+
in the path list is a closepath command ("z" or "Z").
258+
* References to SVG circles, ellipses, images, polygons and rects are closed.
259+
* References to SVG lines and polylines are open.
260+
261+
To determine the <dfn>computed distance</dfn> for a given <var>path</var> and <var>distance</var>:
262+
263+
<div class="switch">
264+
265+
1. Let the <var>total length</var> be the total length of <var>path</var> with all
266+
sub-paths.
267+
268+
2.
269+
: If <var>distance</var> is a length:
270+
:: Let <var>upper bound</var> be equal to the <var>total length</var>.
271+
: Otherwise:
272+
:: Let <var>upper bound</var> be equal to 100%.
273+
274+
3.
275+
: If <var>path</var> is a closed path:
276+
:: Let <a>computed distance</a> be equal to <var>distance</var> modulus <var>upper bound</bar>.
277+
: Otherwise:
278+
:: Let <a>computed distance</a> be equal to <var>distance</var> clamped by 0 and <var>upper bound</var>.
279+
280+
</div>
281+
282+
<h4 id="calculating-path-transform">Calculating the path transform</h4>
283+
284+
<div class="switch">
285+
1. Let <var>path</var> be the geometry of the specified basic shape, path or
286+
SVG <a>shape element</a> reference.
287+
2. Let <var>distance</var> be the computed value of 'motion-offset'.
288+
3.
289+
: If <var>path</var> is a valid path:
290+
::
291+
292+
1. Determine the <a>computed distance</a> by invoking the process for
293+
<a href='#calculating-the-computed-distance-along-a-path' section>
294+
Calculating the computed distance along a path</a> on
295+
<var>path</var> and <var>distance</var>.
296+
2. Let <var>position</var> be the coordinate pair at
297+
<a>computed distance</a> along <var>path</var>.
298+
3. Create the supplemental transformation matrix <var>transform</var>
299+
to the local coordinate system of the element.
300+
4. Translate <var>transform</var> by <var>position</var>.
301+
5. Let <var>rotate</var> be the computed value of 'motion-rotation'.
302+
6. Post-multiply the rotation <var>rotate</var> to <var>transform</var>.
303+
7. Post-multiply <var>transform</var> to the local coordinate system of
304+
the element.
305+
306+
</div>
307+
308+
<p class="issue">Do we need to say how to get the position in more detail?</p>
309+
<p class="issue">There needs to be a process for converting <var>rotate</var> to an angle.</p>
248310

249311
ISSUE: Do we need to specify an origin of the element in motion so that it can be positioned accordingly before the motion? Something like motion-origin? Should we reuse 'transform-origin'? (Probably not since the ''z'' coordinate doesn't make any sense.)

0 commit comments

Comments
 (0)