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