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]
