Merge remote branch 'elliot/cookbook-animations-rotating'
* elliot/cookbook-animations-rotating: cookbook: Added recipe for animated rotation of an actor cookbook: Add explanation about including code samples cookbook: Make filename used in video example consistent cookbook: Add example code for animated rotation
This commit is contained in:
commit
142f288986
@ -39,6 +39,15 @@ IMAGE_FILES = \
|
||||
VIDEO_FILES = \
|
||||
videos/animations-fading-out.ogv \
|
||||
videos/animations-fading-in-then-out.ogv \
|
||||
videos/animations-rotating-x-minus-45.ogv \
|
||||
videos/animations-rotating-y-45.ogv \
|
||||
videos/animations-rotating-z-90.ogv \
|
||||
videos/animations-rotating-x-minus-180-with-y-minus-96.ogv \
|
||||
videos/animations-rotating-x-minus-180-with-z-minus-96.ogv \
|
||||
videos/animations-rotating-x-centered.ogv \
|
||||
videos/animations-rotating-y-centered.ogv \
|
||||
videos/animations-rotating-z-centered.ogv \
|
||||
videos/animations-rotating-container-reverses-direction.ogv \
|
||||
$(NULL)
|
||||
|
||||
EXTRA_DIST = \
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE chapter PUBLIC "-//OASIS//DTD DocBook XML V4.2//EN"
|
||||
"http://www.oasis-open.org/docbook/xml/4.2/docbookx.dtd">
|
||||
|
||||
<chapter id="animations">
|
||||
<chapter id="animations" xmlns:xi="http://www.w3.org/2003/XInclude">
|
||||
<title>Animations</title>
|
||||
|
||||
<epigraph>
|
||||
@ -161,7 +161,7 @@ _alpha_ease_in_sextic (ClutterAlpha *alpha,
|
||||
function to it.</para>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section id="animations-introduction-api">
|
||||
<title>Clutter's animation API</title>
|
||||
|
||||
<para>All of the animation approaches in Clutter use the same
|
||||
@ -505,4 +505,510 @@ clutter_state_set_state (transitions, "fade-in");
|
||||
|
||||
</section>
|
||||
|
||||
<section id="animations-rotating">
|
||||
<title>Rotating an actor</title>
|
||||
|
||||
<section>
|
||||
<title>Problem</title>
|
||||
|
||||
<para>You want to animate rotation of an actor. Some example cases
|
||||
where you might want to do this:</para>
|
||||
|
||||
<itemizedlist>
|
||||
<listitem>
|
||||
<para>To rotate an image so it's the right way up for
|
||||
viewing.</para>
|
||||
</listitem>
|
||||
<listitem>
|
||||
<para>To make actors more or less prominent, rotating them
|
||||
towards or away from the view point.</para>
|
||||
</listitem>
|
||||
<listitem>
|
||||
<para>To turn an actor "around" and display different UI
|
||||
elements "behind" it.</para>
|
||||
</listitem>
|
||||
</itemizedlist>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Solution</title>
|
||||
|
||||
<para>Animate one of the <varname>rotation-angle-(x|y|z)</varname>
|
||||
properties of the actor.</para>
|
||||
|
||||
<para>The most "obvious" (and probably most commonly used) rotation is
|
||||
in the <emphasis>z axis</emphasis> (parallel
|
||||
to the 2D surface of the UI). The other rotation axes
|
||||
(<emphasis>x</emphasis> and <emphasis>y</emphasis>)
|
||||
are less obvious, as they rotate the actor in the depth dimension,
|
||||
"away from" or "towards" the view point.</para>
|
||||
|
||||
<para>Examples of each type of rotation are given below. While the
|
||||
examples use <link linkend="animations-introduction-api">implicit
|
||||
animations</link>, it is also possible to use
|
||||
<type>ClutterAnimator</type> and <type>ClutterState</type> to animate
|
||||
rotations: see <link linkend="animations-rotating-example">the
|
||||
full example at the end of this recipe</link> for some
|
||||
<type>ClutterState</type> code.</para>
|
||||
|
||||
<note>
|
||||
<para>I've added an inaccurate (but hopefully useful) metaphor to
|
||||
each rotation axis ("wheel", "letter box", "door"), to make it
|
||||
easier to remember the effect you get from animating in that axis
|
||||
(and when the rotation center is inside the actor).</para>
|
||||
</note>
|
||||
|
||||
<para><emphasis>Rotating on the z axis</emphasis> ("wheel")</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
clutter_actor_animate (actor,
|
||||
CLUTTER_LINEAR, /* easing mode */
|
||||
1000, /* duration in milliseconds */
|
||||
"rotation-angle-z", 90.0, /* target rotation angle in degrees */
|
||||
NULL);
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<para>The above code animating a texture:</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-z-90.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating to 90 degrees on the
|
||||
z axis</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>By default, the center of the rotation is derived from
|
||||
the anchor point of the actor; unless you've changed the anchor
|
||||
point, the default is the top-left corner of the actor. See the
|
||||
Discussion section below for more about setting the rotation center.</para>
|
||||
|
||||
<note>
|
||||
<para>An animated rotation moves an actor <emphasis>to</emphasis>
|
||||
the specified rotation angle; it <emphasis>does not</emphasis>
|
||||
increment or decrement the actor's current rotation angle by
|
||||
the amount specified.</para>
|
||||
</note>
|
||||
|
||||
<para><emphasis>Rotating on the <code>x</code> axis</emphasis>
|
||||
("letter box")</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
clutter_actor_animate (actor,
|
||||
CLUTTER_LINEAR,
|
||||
1000,
|
||||
"rotation-angle-x", -45.0,
|
||||
NULL);
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<para>The above code animating a texture:</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-x-minus-45.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating to -45 degrees on the
|
||||
x axis</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>Notice how the texture rotates away from the view point,
|
||||
and also how perspective effects are applied (as the actor is rotating
|
||||
"into" the depth dimension).</para>
|
||||
|
||||
<para><emphasis>Rotating on the <code>y</code> axis</emphasis>
|
||||
("door")</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
clutter_actor_animate (actor,
|
||||
CLUTTER_LINEAR,
|
||||
1000,
|
||||
"rotation-angle-y", 45.0,
|
||||
NULL);
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<para>The above code animating a texture:</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-y-45.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating to 45 degrees on the
|
||||
y axis</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>Again, the rotation is into the depth dimension, so
|
||||
you get perspective effects.</para>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Discussion</title>
|
||||
|
||||
<para>It can sometimes be difficult to predict exactly
|
||||
how a particular rotation animation will appear when applied.
|
||||
Often the only way to find out is to experiment. However,
|
||||
the sections below outline some of the most common factors which
|
||||
affect animated rotations, with the aim of minimising the
|
||||
experimentation you need to do.</para>
|
||||
|
||||
<section>
|
||||
<title>Setting the rotation center for an animation</title>
|
||||
|
||||
<para>The examples in the previous section used the default
|
||||
center of rotation for each axis. However, it is possible to
|
||||
change the rotation center for an axis, in turn changing
|
||||
the appearance of the animation.</para>
|
||||
|
||||
<note>
|
||||
<para>Rotation center coordinates are relative to the
|
||||
actor's coordinates, not to the coordinates of the actor's
|
||||
container or the stage.</para>
|
||||
</note>
|
||||
|
||||
<section>
|
||||
<title>Setting a rotation center inside an actor</title>
|
||||
|
||||
<para>You can set the center for rotation on the x or y axes
|
||||
like this:</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
/*
|
||||
* only required for y axis rotation;
|
||||
* here set to the mid point of the actor's y axis
|
||||
*/
|
||||
gfloat x_center = clutter_actor_get_height (actor) * 0.5;
|
||||
|
||||
/*
|
||||
* only required for x axis rotation;
|
||||
* here set to the mid point of the actor's x axis
|
||||
*/
|
||||
gfloat y_center = clutter_actor_get_width (actor) * 0.5;
|
||||
|
||||
/*
|
||||
* depth for the rotation center: positive numbers
|
||||
* are closer to the view point, negative ones
|
||||
* are further away
|
||||
*/
|
||||
gfloat z_center = 0.0;
|
||||
|
||||
/* set rotation center */
|
||||
clutter_actor_set_rotation (actor,
|
||||
CLUTTER_X_AXIS, /* or CLUTTER_Y_AXIS */
|
||||
0.0, /* set the rotation to this angle */
|
||||
x_center,
|
||||
y_center,
|
||||
z_center);
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<para>Because z axis rotations are more common, Clutter
|
||||
provides some convenience functions to set the rotation
|
||||
center for this axis:</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
clutter_actor_set_z_rotation_from_gravity (actor,
|
||||
0.0,
|
||||
CLUTTER_GRAVITY_CENTER);
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<para><constant>CLUTTER_GRAVITY_CENTER</constant> makes the
|
||||
center of the actor the rotation center for
|
||||
the z axis. See the <type>ClutterGravity</type> enumeration for
|
||||
acceptable values for this parameter.</para>
|
||||
|
||||
<note>
|
||||
<para>Setting the rotation center for the z axis using gravity
|
||||
is recommended, as Clutter will automatically recompute the
|
||||
rotation center if the actor's size changes. For the x and y
|
||||
axes, you have to do this computation yourself if you
|
||||
want an actor's center of rotation to stay in the same place
|
||||
if it is resized.</para>
|
||||
</note>
|
||||
|
||||
<para>Rotation on the x axis around an actor's center:</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-x-centered.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating around its center
|
||||
on the x axis</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>Rotation on the y axis around an actor's center:</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-y-centered.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating around its center
|
||||
on the y axis</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>Rotation on the z axis around an actor's center:</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-z-centered.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating around its center
|
||||
on the z axis</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Setting the rotation center outside an actor</title>
|
||||
|
||||
<para>Rather than rotating the actor around a point inside
|
||||
itself, the rotation center can be moved to a position
|
||||
outside the actor. (In the case of the z axis,
|
||||
any rotation center setting is outside the actor as its depth
|
||||
is 0.) When animated, the actor will describe an arc around the
|
||||
rotation center, as if it's swinging from an invisible thread.</para>
|
||||
|
||||
<para>The same code as shown above can be used to set the
|
||||
rotation center: just set the rotation center coordinates to
|
||||
negative numbers (outside the actor). However, you can't use the
|
||||
gravity functions if the rotation center falls outside an actor.</para>
|
||||
|
||||
<para>For example, here's a rotation to -180 degrees in the x
|
||||
axis, with the y rotation center set to -96 (the same as the height
|
||||
of the actor):</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-x-minus-180-with-y-minus-96.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating to -180 degrees on
|
||||
the x axis with y rotation center set to -96</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>Similarly, moving the z rotation center (for a rotation
|
||||
in the x or y axis) will cause the actor to swing "into" or "out
|
||||
of" the UI. Its final apparent size may be different, as it could
|
||||
reach a different depth in the UI by the end of the
|
||||
animation.</para>
|
||||
|
||||
<para>For example, here's a rotation to -180 in the x axis,
|
||||
with the z rotation center set to -96 (the same as the height
|
||||
of the actor):</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-x-minus-180-with-z-minus-96.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor rotating to -180 degrees on
|
||||
the x axis with z rotation center set to -96</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
<para>The apparent final size of the actor is reduced, as it
|
||||
has rotated away from the view point.</para>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Direction of rotation</title>
|
||||
|
||||
<para>The apparent direction of an animated rotation depends on
|
||||
two things:</para>
|
||||
|
||||
<orderedlist>
|
||||
<listitem>
|
||||
<para>Whether the angle of rotation is positive or negative.</para>
|
||||
</listitem>
|
||||
<listitem>
|
||||
<para>The rotation of the container(s) the actor is inside.</para>
|
||||
</listitem>
|
||||
</orderedlist>
|
||||
|
||||
<para>In the case of the sign of the rotation, here's what
|
||||
happens for each axis and rotation angle sign (positive or
|
||||
negative).</para>
|
||||
|
||||
<informaltable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Axis</th>
|
||||
<th>Sign of rotation angle</th>
|
||||
<th>Effect on actor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>z</td>
|
||||
<td>+</td>
|
||||
<td>
|
||||
Clockwise spin about the <code>x,y</code> center of
|
||||
rotation.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>z</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
Anti-clockwise spin about the <code>x,y</code>
|
||||
center of rotation.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>x</td>
|
||||
<td>+</td>
|
||||
<td>
|
||||
The top swings away from the view point and the
|
||||
bottom swings towards it. If y rotation center == 0,
|
||||
the top is fixed; if y rotation center == the actor's
|
||||
height, the bottom is fixed.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>x</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
The bottom swings away from the view point and the
|
||||
top swings towards it. If y rotation center == 0,
|
||||
the top is fixed; if y rotation center == the actor's
|
||||
height, the bottom is fixed.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y</td>
|
||||
<td>+</td>
|
||||
<td>
|
||||
The right-hand side swings away from the view point and
|
||||
the left-hand side swings towards it. When x rotation
|
||||
center == 0, the left-hand side if fixed; when x
|
||||
rotation center == the actor's width, the right-hand
|
||||
side is fixed.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
The right-hand side swings towards the view point and
|
||||
the left-hand side swings away from it. When x rotation
|
||||
center == 0, the left-hand side if fixed; when x
|
||||
rotation center == the actor's width, the right-hand
|
||||
side is fixed.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</informaltable>
|
||||
|
||||
<para>If an actor's container is rotated, this may affect the
|
||||
appearance of rotation animations applied to the actor. In
|
||||
particular, if an actor's container has been rotated
|
||||
by 180 degrees in one axis, the direction of that actor's
|
||||
rotation may appear reversed.</para>
|
||||
|
||||
<para>For example, the video below shows an actor being animated
|
||||
to 90 degrees on the z axis, then back to 0 degrees;
|
||||
the actor's container is then rotated by 180 degrees in the y
|
||||
axis; then the same rotation 90 degree rotation is applied
|
||||
to the actor again. Note that the first time the animation
|
||||
is applied, the rotation is clockwise; but the second time (as
|
||||
the actor is effectively "reversed"), it is anti-clockwise.</para>
|
||||
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/animations-rotating-container-reverses-direction.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing how an actor's apparent rotation is
|
||||
affected by the rotation of its parent</para>
|
||||
</alt>
|
||||
</inlinemediaobject>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Apparent vs. actual rotation</title>
|
||||
|
||||
<para>There is a difference between an actor's <emphasis>apparent</emphasis>
|
||||
rotation (how much an actor appears to be rotating, from the
|
||||
perspective of someone looking at the UI) and its
|
||||
<emphasis>actual</emphasis> rotation (how much that actor is
|
||||
really rotating).</para>
|
||||
|
||||
<para>For example, if you rotate an actor and its container
|
||||
simultaneously, each by 90 degrees in the same direction, the
|
||||
actor will appear to have rotated by 180 degrees by the end
|
||||
of the animation. However, calling the
|
||||
<function>clutter_actor_get_rotation()</function> function
|
||||
for that axis on the actor still returns a rotation of 90
|
||||
degrees.</para>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Orientation of rotation axes</title>
|
||||
|
||||
<para>The rotation axes remain fixed in the same place on
|
||||
the actor regardless of its rotation, even though from the viewer's
|
||||
perspective they may appear to move.</para>
|
||||
|
||||
<para>For example, when rotation in the z axis is 0 degrees,
|
||||
the actor's x axis is horizontal (across the UI) from both the
|
||||
actor's and the viewer's perspective. However, if you rotate the
|
||||
actor by 90 degrees in the z axis, the x axis is now vertical from
|
||||
<emphasis>the viewer's</emphasis> perspective, but still horizontal
|
||||
across the actor from <emphasis>the actor's</emphasis>
|
||||
perspective.</para>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Full example</title>
|
||||
|
||||
<example id="animations-rotating-example">
|
||||
<title>Rotating an actor around x, y, and z axes using
|
||||
<type>ClutterState</type></title>
|
||||
<programlisting>
|
||||
<xi:include href="examples/animations-rotating.c" parse="text">
|
||||
<xi:fallback>a code sample should be here... but isn't</xi:fallback>
|
||||
</xi:include>
|
||||
</programlisting>
|
||||
</example>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
</chapter>
|
||||
|
@ -151,7 +151,7 @@ VIDEO_FILES = \
|
||||
<![CDATA[
|
||||
<inlinemediaobject>
|
||||
<videoobject>
|
||||
<videodata fileref="videos/cookbook-animations-fading-in-then-out.ogv"/>
|
||||
<videodata fileref="videos/animations-fading-in-then-out.ogv"/>
|
||||
</videoobject>
|
||||
<alt>
|
||||
<para>Video showing an actor fading in then out using
|
||||
@ -168,6 +168,101 @@ VIDEO_FILES = \
|
||||
</listitem>
|
||||
</itemizedlist>
|
||||
</listitem>
|
||||
<listitem>
|
||||
<para>To include a full code sample in a recipe (which can
|
||||
be compiled into a runnable binary), do the following:</para>
|
||||
|
||||
<itemizedlist>
|
||||
<listitem>
|
||||
<para>Create a C code file in the
|
||||
<filename><clutter source>/doc/cookbook/examples</filename>
|
||||
directory. It should be a standalone C application (with
|
||||
a <function>main()</function> etc.). The filename should be
|
||||
in the format
|
||||
<filename><section>-<recipe>.c</filename>; you
|
||||
can add an optional identifier to the end if you have more
|
||||
than one example for a recipe.</para>
|
||||
|
||||
<para>If you want to load image files into the application
|
||||
(e.g. to demonstrate something with a texture), you can use
|
||||
the <constant>TESTS_DATA_DIR</constant> variable in your C
|
||||
code to reuse images in the Clutter <filename>tests</filename>
|
||||
directory; this will be replaced with
|
||||
<filename><clutter source>/tests/data</filename>
|
||||
during the build. For example:</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
clutter_texture_set_from_file (CLUTTER_TEXTURE (texture),
|
||||
TESTS_DATA_DIR "/redhand.png",
|
||||
&error);
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
</listitem>
|
||||
|
||||
<listitem>
|
||||
<para>Edit <filename>Makefile.am</filename>
|
||||
in the <filename>cookbook/examples</filename> directory
|
||||
so that the build recognises the new code; e.g. if
|
||||
your C source file were called
|
||||
<filename>fooing-barring.c</filename> you would do:</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
noinst_PROGRAMS = \
|
||||
textures-reflection \
|
||||
text-shadow \
|
||||
animations-rotating \
|
||||
fooing-barring \
|
||||
$(NULL)
|
||||
|
||||
fooing_barring_SOURCE = fooing-barring.c
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<note>
|
||||
<para>Note the second line is a new one to tell the
|
||||
build where the source file is for your example.</para>
|
||||
</note>
|
||||
</listitem>
|
||||
|
||||
<listitem>
|
||||
<para>Add a section at the end of your recipe which
|
||||
XIncludes the sample code, e.g.:</para>
|
||||
|
||||
<informalexample>
|
||||
<programlisting>
|
||||
<![CDATA[
|
||||
<section>
|
||||
<title>Full example</title>
|
||||
|
||||
<example id="fooing-barring-example">
|
||||
<title>Fooing with a bar</title>
|
||||
<programlisting>
|
||||
<xi:include href="examples/fooing-barring.c" parse="text">
|
||||
<xi:fallback>a code sample should be here... but isn't</xi:fallback>
|
||||
</xi:include>
|
||||
</programlisting>
|
||||
</example>
|
||||
</section>
|
||||
]]>
|
||||
</programlisting>
|
||||
</informalexample>
|
||||
|
||||
<note>
|
||||
<para>The <code><xi:include></code> element
|
||||
should be aligned to the left-hand margin of the text
|
||||
(no whitespace on the line before it), to prevent any
|
||||
stray whitespace appearing in the program listing.</para>
|
||||
</note>
|
||||
</listitem>
|
||||
|
||||
</itemizedlist>
|
||||
</listitem>
|
||||
</itemizedlist>
|
||||
|
||||
</appendix>
|
||||
|
1
doc/cookbook/examples/.gitignore
vendored
1
doc/cookbook/examples/.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
/text-shadow
|
||||
/textures-reflection
|
||||
/animations-rotating
|
||||
|
@ -5,6 +5,7 @@ NULL =
|
||||
noinst_PROGRAMS = \
|
||||
textures-reflection \
|
||||
text-shadow \
|
||||
animations-rotating \
|
||||
$(NULL)
|
||||
|
||||
INCLUDES = \
|
||||
@ -29,3 +30,5 @@ AM_LDFLAGS = $(CLUTTER_LIBS)
|
||||
textures_reflection_SOURCES = textures-reflection.c
|
||||
|
||||
text_shadow_SOURCES = text-shadow.c
|
||||
|
||||
animations_rotating_SOURCE = animations-rotating.c
|
||||
|
136
doc/cookbook/examples/animations-rotating.c
Normal file
136
doc/cookbook/examples/animations-rotating.c
Normal file
@ -0,0 +1,136 @@
|
||||
#include <clutter/clutter.h>
|
||||
|
||||
#define ROTATION_ANGLE 75.0
|
||||
#define DURATION 2000
|
||||
|
||||
static void
|
||||
_set_next_state (ClutterState *transitions,
|
||||
gpointer user_data)
|
||||
{
|
||||
const gchar *current = clutter_state_get_state (transitions);
|
||||
gchar *next_state = "start";
|
||||
|
||||
if (g_strcmp0 (current, "start") == 0)
|
||||
next_state = "x-cw";
|
||||
else if (g_strcmp0 (current, "x-cw") == 0)
|
||||
next_state = "x-ccw";
|
||||
else if (g_strcmp0 (current, "x-ccw") == 0)
|
||||
next_state = "x-after";
|
||||
else if (g_strcmp0 (current, "x-after") == 0)
|
||||
next_state = "y-cw";
|
||||
else if (g_strcmp0 (current, "y-cw") == 0)
|
||||
next_state = "y-ccw";
|
||||
else if (g_strcmp0 (current, "y-ccw") == 0)
|
||||
next_state = "y-after";
|
||||
else if (g_strcmp0 (current, "y-after") == 0)
|
||||
next_state = "z-cw";
|
||||
else if (g_strcmp0 (current, "z-cw") == 0)
|
||||
next_state = "z-ccw";
|
||||
|
||||
clutter_state_set_state (transitions, next_state);
|
||||
}
|
||||
|
||||
int
|
||||
main (int argc, char *argv[])
|
||||
{
|
||||
ClutterActor *stage;
|
||||
ClutterActor *texture;
|
||||
ClutterState *transitions;
|
||||
GError *error = NULL;
|
||||
gfloat texture_width, texture_height;
|
||||
|
||||
clutter_init (&argc, &argv);
|
||||
|
||||
stage = clutter_stage_get_default ();
|
||||
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
|
||||
|
||||
texture = clutter_texture_new ();
|
||||
clutter_actor_add_constraint (texture,
|
||||
clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.5));
|
||||
clutter_actor_add_constraint (texture,
|
||||
clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.5));
|
||||
clutter_texture_set_sync_size (CLUTTER_TEXTURE (texture), TRUE);
|
||||
clutter_texture_set_from_file (CLUTTER_TEXTURE (texture),
|
||||
TESTS_DATA_DIR "/redhand.png",
|
||||
&error);
|
||||
|
||||
if (error != NULL)
|
||||
{
|
||||
g_error ("Problem loading image into texture - %s", error->message);
|
||||
g_error_free (error);
|
||||
return 1;
|
||||
}
|
||||
|
||||
clutter_actor_get_size (texture, &texture_width, &texture_height);
|
||||
clutter_actor_set_size (stage, texture_width * 2, texture_height * 2);
|
||||
|
||||
/* set all centres of rotation to the centre of the texture */
|
||||
clutter_actor_set_rotation (texture,
|
||||
CLUTTER_X_AXIS,
|
||||
0.0,
|
||||
texture_width * 0.5,
|
||||
texture_height * 0.5,
|
||||
0.0);
|
||||
clutter_actor_set_rotation (texture,
|
||||
CLUTTER_Y_AXIS,
|
||||
0.0,
|
||||
texture_width * 0.5,
|
||||
texture_height * 0.5,
|
||||
0.0);
|
||||
clutter_actor_set_z_rotation_from_gravity (texture, 0.0, CLUTTER_GRAVITY_CENTER);
|
||||
|
||||
clutter_container_add_actor (CLUTTER_CONTAINER (stage), texture);
|
||||
|
||||
/* set up the animations */
|
||||
transitions = clutter_state_new ();
|
||||
|
||||
clutter_state_set (transitions, NULL, "start",
|
||||
texture, "rotation-angle-x", CLUTTER_LINEAR, 0.0,
|
||||
texture, "rotation-angle-y", CLUTTER_LINEAR, 0.0,
|
||||
texture, "rotation-angle-z", CLUTTER_LINEAR, 0.0,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "x-cw",
|
||||
texture, "rotation-angle-x", CLUTTER_LINEAR, ROTATION_ANGLE,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "x-ccw",
|
||||
texture, "rotation-angle-x", CLUTTER_LINEAR, -ROTATION_ANGLE,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "x-after",
|
||||
texture, "rotation-angle-x", CLUTTER_LINEAR, 0.0,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "y-cw",
|
||||
texture, "rotation-angle-y", CLUTTER_LINEAR, ROTATION_ANGLE,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "y-ccw",
|
||||
texture, "rotation-angle-y", CLUTTER_LINEAR, -ROTATION_ANGLE,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "y-after",
|
||||
texture, "rotation-angle-y", CLUTTER_LINEAR, 0.0,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "z-cw",
|
||||
texture, "rotation-angle-z", CLUTTER_LINEAR, ROTATION_ANGLE,
|
||||
NULL);
|
||||
clutter_state_set (transitions, NULL, "z-ccw",
|
||||
texture, "rotation-angle-z", CLUTTER_LINEAR, -ROTATION_ANGLE,
|
||||
NULL);
|
||||
clutter_state_set_duration (transitions, NULL, NULL, DURATION);
|
||||
clutter_state_set_duration (transitions, "start", NULL, DURATION * 0.5);
|
||||
clutter_state_set_duration (transitions, NULL, "start", DURATION * 0.5);
|
||||
clutter_state_set_duration (transitions, NULL, "x-after", DURATION * 0.5);
|
||||
clutter_state_set_duration (transitions, NULL, "y-after", DURATION * 0.5);
|
||||
|
||||
clutter_state_warp_to_state (transitions, "start");
|
||||
|
||||
g_signal_connect (transitions,
|
||||
"completed",
|
||||
G_CALLBACK (_set_next_state),
|
||||
NULL);
|
||||
|
||||
clutter_state_set_state (transitions, "x-cw");
|
||||
|
||||
clutter_actor_show (stage);
|
||||
|
||||
clutter_main ();
|
||||
|
||||
return 0;
|
||||
}
|
Binary file not shown.
BIN
doc/cookbook/videos/animations-rotating-x-centered.ogv
Normal file
BIN
doc/cookbook/videos/animations-rotating-x-centered.ogv
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
doc/cookbook/videos/animations-rotating-x-minus-45.ogv
Normal file
BIN
doc/cookbook/videos/animations-rotating-x-minus-45.ogv
Normal file
Binary file not shown.
BIN
doc/cookbook/videos/animations-rotating-y-45.ogv
Normal file
BIN
doc/cookbook/videos/animations-rotating-y-45.ogv
Normal file
Binary file not shown.
BIN
doc/cookbook/videos/animations-rotating-y-centered.ogv
Normal file
BIN
doc/cookbook/videos/animations-rotating-y-centered.ogv
Normal file
Binary file not shown.
BIN
doc/cookbook/videos/animations-rotating-z-90.ogv
Normal file
BIN
doc/cookbook/videos/animations-rotating-z-90.ogv
Normal file
Binary file not shown.
BIN
doc/cookbook/videos/animations-rotating-z-centered.ogv
Normal file
BIN
doc/cookbook/videos/animations-rotating-z-centered.ogv
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user