You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: motion-1/index.bs
+10-11Lines changed: 10 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,6 @@ Group: fxtf
8
8
Link Defaults: css-shapes-1 (type) <basic-shape>, css-transforms-1 (property) transform/transform-origin
9
9
Editor: Dirk Schulze, Adobe Systems Inc., dschulze@adobe.com
10
10
Abstract: Motion paths allow authors to animate any graphical object along an author specified path.
11
-
Use <i> Autolinks: yes
12
11
</pre>
13
12
14
13
<h2 id="intro">Introduction</h2>
@@ -17,7 +16,7 @@ Use <i> Autolinks: yes
17
16
18
17
Authors have possibilities to position objects like elements, boxes or containers relative to each other or absolutely in their own coordinate system. CSS Transforms extend these possibilities with a set of transform functions allowing authors to mutate the object's local coordinate system. With CSS Animations and CSS Transitions, these static placements can change over a given period of time. Both kind of animations are powerful to express transitions in time but not suitable to describe transitions of location of an object over time.
19
18
20
-
This specification allows authors to specify an <i>motion path</i>. The object can be transitioned along this motion path over a given period of time. The time may be static if no animation was specified.
19
+
This specification allows authors to specify an <a>motion path</a>. The object can be transitioned along this motion path over a given period of time. The time may be static if no animation was specified.
21
20
22
21
<div class="example">
23
22
<p>In the following example, a schematic of an air plane is animated along a motion path. The plane faces in the direction of the motion path at each position on the path.
@@ -61,7 +60,7 @@ Media: visual
61
60
Animatable: no
62
61
</pre>
63
62
64
-
Specifies the <i>motion path</i> the element gets positioned at. The exact element's position on the motion path is determined by the 'motion-position' property. A <dfn>motion path</dfn> is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape. Each shape or path must define an <dfn>initial position</dfn> and an <dfn>initial direction</dfn>.
63
+
Specifies the <a>motion path</a> the element gets positioned at. The exact element's position on the motion path is determined by the 'motion-position' property. A <dfn>motion path</dfn> is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape. Each shape or path must define an <dfn>initial position</dfn> and an <dfn>initial direction</dfn>.
65
64
66
65
In this specification a direction (or rotation) of 0 degree is equivalent to the direction of the positive x-axis, so 0 degree points to the right side.
67
66
@@ -100,9 +99,9 @@ A reference that fails to download, is not a reference to an SVG <a href="">grap
100
99
101
100
See the section <a href="#motion-processing">“Motion processing”</a> for how to process a motion path.
102
101
103
-
For SVG elements without associated CSS layout box, the <i>used value</i> for <a value for=mask-clip>content-box</a>, <a value for=mask-clip>padding-box</a>, <a value for=mask-clip>border-box</a> and <a value for=mask-clip>margin-box</a> is <a value for=clip-path>fill-box</a>.
102
+
For SVG elements without associated CSS layout box, the <a>used value</a> for <a value for=mask-clip>content-box</a>, <a value for=mask-clip>padding-box</a>, <a value for=mask-clip>border-box</a> and <a value for=mask-clip>margin-box</a> is <a value for=clip-path>fill-box</a>.
104
103
105
-
For elements with associated CSS layout box, the <i>used value</i> for <a value for=clip-path>fill-box</a>, <a value for=clip-path>stroke-box</a> and <a value for=clip-path>view-box</a> is <a value for=mask-clip>border-box</a>.
104
+
For elements with associated CSS layout box, the <a>used value</a> for <a value for=clip-path>fill-box</a>, <a value for=clip-path>stroke-box</a> and <a value for=clip-path>view-box</a> is <a value for=mask-clip>border-box</a>.
106
105
107
106
<h3 id="motion-position">Position on motion path: The 'motion-position' property</h3>
108
107
@@ -118,18 +117,18 @@ Media: visual
118
117
Animatable: yes
119
118
</pre>
120
119
121
-
A distance that describes the position along the specified <i>motion path</i>.
120
+
A distance that describes the position along the specified <a>motion path</a>.
122
121
123
122
ISSUE: Should the property be renamed to motion-distance instead? After all, the author defines a distance and not a point, even though the result will be an element positioned at the distance on the motion path.
124
123
125
124
<dl dfn-for="motion-position" dfn-type="value">
126
125
<dt><<percentage>></dt>
127
126
<dt><<length>></dt>
128
-
<dd>The distance from the <i>initial position</i> of the shape or path to the position of the element. Percentages are relative to the total path length including all sub-paths.</dd>
127
+
<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>
129
128
</dl>
130
129
131
130
<div class="issue">
132
-
What happens if the position is negative or exceeds the <i>motion path</i> length?
131
+
What happens if the position is negative or exceeds the <a>motion path</a> length?
133
132
<ul>
134
133
<li>Cutting-off values to be between 0% and 100%.</li>
135
134
<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>
@@ -153,16 +152,16 @@ Media: visual
153
152
Animatable: yes
154
153
</pre>
155
154
156
-
Defines the direction of the element while positioning along the <i>motion path</i>.
155
+
Defines the direction of the element while positioning along the <a>motion path</a>.
157
156
158
157
Values have the following meanings:
159
158
160
159
<dl dfn-for="mask-rotation" dfn-type="value">
161
160
<dt><dfn>auto</dfn></dt>
162
-
<dd>Indicates that the object is rotated (over time if 'motion-position' is animated) by the angle of the direction (i.e., directional tangent vector) of the <i>motion path</i>. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''auto''.</dd>
161
+
<dd>Indicates that the object is rotated (over time if 'motion-position' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>motion path</a>. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''auto''.</dd>
163
162
<dt><dfn>reverse</dfn></dt>
164
163
<dd>
165
-
<p>Indicates that the object is rotated (over time if 'motion-position' is animated) by the angle of the direction (i.e., directional tangent vector) of the <i>motion path</i> plus 180 degrees. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''reverse''.
164
+
<p>Indicates that the object is rotated (over time if 'motion-position' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>motion path</a> plus 180 degrees. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''reverse''.
166
165
<p class="note">This is the same as specifying ''auto 180deg''.
0 commit comments