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
