Henry,<br>
<br>
Thanks for the reply.&nbsp; I tried out your example and it looks like there
is only one center of rotation, and the grey view and colored child
views all rotate around it.&nbsp; In my example I have two centers of
rotation, the rotation for the chain and one for the ball.<br>
<br>
Fortunately, I was able to use the xoffset and yoffset to change the
center of rotation.&nbsp; That mixed with more animators seems to have done
the trick.&nbsp; Here is the code, but if you want to see the cool graphic
example, click <a href="http://www.den-4.com/node/103">here</a>.<br>
<br>
&lt;canvas width=&quot;800&quot; height=&quot;800&quot;&gt;<br>
&nbsp;&nbsp;&nbsp; &lt;resource name=&quot;base&quot; src=&quot;images/base.png&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp; &lt;resource name=&quot;chain&quot; src=&quot;images/chain.png&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp; &lt;resource name=&quot;ball&quot; src=&quot;images/ball.png&quot; /&gt;<br>
<br>
&nbsp;&nbsp;&nbsp; &lt;view id=&quot;chain&quot; width=&quot;10&quot; height=&quot;300&quot; x=&quot;${canvas.width / 2 -
this.width / 2}&quot; y=&quot;10&quot; resource=&quot;chain&quot; xoffset=&quot;10&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;attribute name=&quot;rotation&quot; value=&quot;45&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animatorgroup name=&quot;pendulumAnimation&quot; process=&quot;simultaneous&quot; repeat=&quot;Infinity&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animatorgroup name=&quot;swinging&quot; process=&quot;sequential&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;rotation&quot; to=&quot;-90&quot; duration=&quot;1500&quot; relative=&quot;true&quot; motion=&quot;easeboth&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;rotation&quot; to=&quot;90&quot; duration=&quot;1500&quot; relative=&quot;true&quot; motion=&quot;easeboth&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/animatorgroup&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animatorgroup name=&quot;ballx&quot; process=&quot;sequential&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;x&quot; to=&quot;180&quot; duration=&quot;1500&quot; relative=&quot;true&quot; motion=&quot;linear&quot; target=&quot;ball&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;x&quot; to=&quot;-180&quot; duration=&quot;1500&quot; relative=&quot;true&quot; motion=&quot;linear&quot; target=&quot;ball&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/animatorgroup&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animatorgroup name=&quot;bally&quot; process=&quot;sequential&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;y&quot; to=&quot;40&quot; duration=&quot;750&quot; relative=&quot;true&quot; motion=&quot;linear&quot; target=&quot;ball&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;y&quot; to=&quot;-40&quot; duration=&quot;750&quot; relative=&quot;true&quot; motion=&quot;linear&quot; target=&quot;ball&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;y&quot; to=&quot;40&quot; duration=&quot;750&quot; relative=&quot;true&quot; motion=&quot;linear&quot; target=&quot;ball&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator attribute=&quot;y&quot; to=&quot;-40&quot; duration=&quot;750&quot; relative=&quot;true&quot; motion=&quot;linear&quot; target=&quot;ball&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/animatorgroup&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/animatorgroup&gt;<br>
&nbsp;&nbsp;&nbsp; &lt;/view&gt;<br>
<br>
&nbsp;&nbsp;&nbsp; &lt;view id=&quot;ball&quot; width=&quot;100&quot; height=&quot;100&quot; x=&quot;${400 -
chain.rotation *5 }&quot; y=&quot;220&quot;&nbsp; xoffset=&quot;50&quot; yoffset=&quot;50&quot; rotation=&quot;45&quot;
resource=&quot;ball&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;attribute name=&quot;spin&quot; value=&quot;false&quot; type=&quot;boolean&quot; /&gt;<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;handler name=&quot;onclick&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!this.spin) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ballAnimation.setAttribute(&#39;start&#39;, true);<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.spin = true;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ballAnimation.setAttribute(&#39;start&#39;, false);<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.spin = false;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/handler&gt;<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;handler name=&quot;onrotation&quot; reference=&quot;chain&quot; args=&quot;chainRotation&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(ballAnimation.started == false) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ball.setAttribute(&#39;rotation&#39;, chainRotation);<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/handler&gt;<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;animator id=&quot;ballAnimation&quot; attribute=&quot;rotation&quot; to=&quot;180&quot;
duration=&quot;1000&quot; relative=&quot;true&quot; repeat=&quot;Infinity&quot; start=&quot;false&quot;
motion=&quot;linear&quot; /&gt;<br>
&nbsp;&nbsp;&nbsp; &lt;/view&gt;<br>
<br>
&nbsp;&nbsp;&nbsp; &lt;view id=&quot;base&quot; width=&quot;50&quot; height=&quot;20&quot; x=&quot;$once{(canvas.width - this.width) / 2}&quot; y=&quot;0&quot; clip=&quot;true&quot; resource=&quot;base&quot;/&gt;<br>
&lt;/canvas&gt;<br>
<br>
Thanks again!<br>
Anthony Bargnesi<br><br><div class="gmail_quote">On Feb 9, 2008 10:15 AM, Henry Minsky &lt;<a href="mailto:henry.minsky@gmail.com">henry.minsky@gmail.com</a>&gt; wrote:<br><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Here&#39;s a view which uses a negative offset, so it&#39;s center lies at the<br>upper left corner of it&#39;s parent.<br>Rotating the parent makes the child appear to rotate about it&#39;s center.<br><br>&lt;canvas width=&quot;800&quot; height=&quot;600&quot;&gt;<br>
<br> &nbsp;&lt;view id=&quot;bar&quot; x=&quot;200&quot; y=&quot;200&quot; &gt;<br> &nbsp; &nbsp;&lt;view id=&quot;foo&quot; bgcolor=&quot;0xcccccc&quot; x=&quot;-100&quot; y=&quot;-100&quot; &nbsp;height=&quot;200&quot;<br>width=&quot;200&quot;<br>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onclick=&quot;this.parent.animate(&#39;rotation&#39;, 90, 1000, true)&quot; &gt;<br><br> &nbsp; &nbsp; &nbsp;&lt;text&gt;This is &lt;b&gt;&lt;i&gt;some&lt;/i&gt;&lt;/b&gt; text&lt;/text&gt;<br><br> &nbsp; &nbsp;&lt;view bgcolor=&quot;blue&quot; width=&quot;40&quot; height=&quot;40&quot;<br>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x=&quot;59&quot; y=&quot;59&quot;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onclick=&quot;this.animate(&#39;x&#39;, 10, 1000);<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.animate(&#39;y&#39;, 10, 1000)&quot;/&gt;<br><br> &nbsp; &nbsp;&lt;view bgcolor=&quot;red&quot; width=&quot;40&quot; height=&quot;40&quot;<br>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x=&quot;101&quot; y=&quot;59&quot;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onclick=&quot;this.animate(&#39;x&#39;, 150, 1000);<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.animate(&#39;y&#39;, 10, 1000)&quot;/&gt;<br><br> &nbsp; &nbsp;&lt;view bgcolor=&quot;green&quot; width=&quot;40&quot; height=&quot;40&quot;<br>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x=&quot;59&quot; y=&quot;101&quot;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onclick=&quot;this.animate(&#39;x&#39;, 10, 1000);<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.animate(&#39;y&#39;, 150, 1000)&quot;/&gt;<br><br> &nbsp; &nbsp;&lt;view bgcolor=&quot;yellow&quot; width=&quot;40&quot; height=&quot;40&quot;<br>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x=&quot;101&quot; y=&quot;101&quot;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onclick=&quot;this.animate(&#39;x&#39;, 150, 1000);<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.animate(&#39;y&#39;, 150, 1000)&quot;/&gt;<br> &nbsp;&lt;/view&gt;<br> &nbsp;&lt;/view&gt;<br>
&lt;/canvas&gt;<br><div><div></div><div class="Wj3C7c"><br>On Sat, Feb 9, 2008 at 1:48 AM, Anthony Bargnesi &lt;<a href="mailto:abargnesi@gmail.com">abargnesi@gmail.com</a>&gt; wrote:<br>&gt; I have a test app here that swings a pendulum looking contraption. &nbsp;Just<br>
&gt; really trying to play around with different<br>&gt; animations where views have constraints on each other. &nbsp;Here is my code:<br>&gt;<br>&gt; &lt;canvas width=&quot;600&quot; height=&quot;400&quot;&gt;<br>&gt; &nbsp; &nbsp; &nbsp;&lt;view name=&quot;chain&quot; width=&quot;10&quot; height=&quot;300&quot; bgcolor=&quot;#CCCCCC&quot;<br>
&gt; x=&quot;${(canvas.width - this.width) / 2}&quot; y=&quot;0&quot;&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;attribute name=&quot;rotation&quot; value=&quot;45&quot; /&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;animatorgroup name=&quot;pendulumAnimation&quot; process=&quot;sequential&quot;<br>
&gt; repeat=&quot;Infinity&quot;&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;animator attribute=&quot;rotation&quot; to=&quot;-90&quot; duration=&quot;1500&quot;<br>&gt; relative=&quot;true&quot; motion=&quot;easeboth&quot; /&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;animator attribute=&quot;rotation&quot; to=&quot;90&quot; duration=&quot;1500&quot;<br>
&gt; relative=&quot;true&quot; motion=&quot;easeboth&quot; /&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/animatorgroup&gt;<br>&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;view name=&quot;ball&quot; width=&quot;100&quot; height=&quot;100&quot; bgcolor=&quot;red&quot;<br>
&gt; x=&quot;${this.width / 2 + chain.width / 2}&quot; y=&quot;${chain.y + chain.height -<br>&gt; (this.height / 2)}&quot; xoffset=&quot;${this.width}&quot;&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;handler name=&quot;onclick&quot;&gt;<br>
&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ballAnimation.doStart();<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/handler&gt;<br>&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;animator name=&quot;ballAnimation&quot; attribute=&quot;rotation&quot; to=&quot;180&quot;<br>&gt; duration=&quot;1000&quot; relative=&quot;true&quot; repeat=&quot;Infinity&quot; start=&quot;false&quot;<br>
&gt; motion=&quot;linear&quot; /&gt;<br>&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/view&gt;<br>&gt; &nbsp; &nbsp; &lt;/view&gt;<br>&gt;<br>&gt; &nbsp; &nbsp; &lt;view name=&quot;base&quot; width=&quot;50&quot; height=&quot;20&quot; bgcolor=&quot;black&quot;<br>&gt; x=&quot;$once{(canvas.width - this.width) / 2}&quot; y=&quot;0&quot; clip=&quot;true&quot; /&gt;<br>
&gt; &nbsp;&lt;/canvas&gt;<br>&gt;<br>&gt;<br>&gt; I have underlined the critical pieces. &nbsp;My problem here is that when I click<br>&gt; on the &quot;ball&quot; view, the rotation is not happening in the center but rather<br>&gt; in the left corner since the xoffset/yoffset are not set properly. &nbsp;If I set<br>
&gt; them to half of the width (x) and half of the height (y) then the view will<br>&gt; be shifted and it won&#39;t appear like the two views are connected.<br>&gt;<br>&gt; Is there an approach I can take here, since &quot;ball&quot; is a child of &quot;chain&quot;, to<br>
&gt; preserve the xoffset/yoffset values and still line up the &quot;ball&quot; view with<br>&gt; the &quot;chain&quot; view? &nbsp;If it is unclear what is happening, then try it out and<br>&gt; click on the &quot;ball&quot; view (red square).<br>
&gt;<br>&gt; Thanks for any help,<br>&gt; Anthony Bargnesi<br>&gt;<br><br><br><br></div></div><font color="#888888">--<br>Henry Minsky<br>Software Architect<br><a href="mailto:hminsky@laszlosystems.com">hminsky@laszlosystems.com</a><br>
</font></blockquote></div><br>