Hi, Is it possible to animate a clipped image in Sliverlight 1.0. For example scale a circular image clip using keyframes in XAML or do I need to use more complex coding methods? e.g. Could I animate: <Image Canvas.Left="30" Canvas.Top="230" Source="Images/myImage.jpg" Width="119" Height="115"> <Image.Clip> <EllipseGeometry RadiusX="55" RadiusY="55" Center="58,57"/> </Image.Clip> </Image> Scale it in keyframes 0.25 to .5 to 0.75 of original scale. If so how do I create the transform and reference to keyframes correctly? Regards stevej Post Edited By Moderator (mjp [DASP]) : 5/5/2008 8:41:03 PM GMT
Hi thanks for the info, I am oK with scaling an image per se , however I was having a little trouble doing the same with an image clip. The problem was how to correctly denote the transform origin in such a case. I have basically clipped an image (basically square) of a golf ball lying on the ground to show only the round golf ball and then to scale the image of the golf ball so it is centred on origin (0.5,0.5). It works OK now and I had to fidddle a bit to find out where to set the transfrom origin. Regrds steve
Hi , I have tried a different way. I am still a little unclear as to what should be animated in the story board - the image itself or the scale transform. Regards stevj
No I am coding xaml by hand. It seems there are a number of different ways of doing scale transforms. I have it working now. I scaled down the original image (0.2)to fit how I wanted it in the canvas Then i scale it back up to 0.75via the storyboard referencing ballscale as opposed to the image so I avoid using UI references but your way is most probably better and your help is appreciated - so thanks. <!--ballscale--> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ballscale" Storyboard.TargetProperty="ScaleX" BeginTime="0:0:0.3"> <LinearDoubleKeyFrame Value ="0.2" KeyTime="0:0:0"/> <LinearDoubleKeyFrame Value ="0.2" KeyTime="0:0:0.1"/> <LinearDoubleKeyFrame Value ="0.25" KeyTime="0:0:0.2"/> <LinearDoubleKeyFrame Value ="0.35" KeyTime="0:0:0.3"/> <LinearDoubleKeyFrame Value ="0.45" KeyTime="0:0:0.4"/> <LinearDoubleKeyFrame Value ="0.55" KeyTime="0:0:0.5"/> <LinearDoubleKeyFrame Value ="0.6" KeyTime="0:0:0.6"/> <LinearDoubleKeyFrame Value ="0.75" KeyTime="0:0:0.7"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ballscale" Storyboard.TargetProperty="ScaleY" BeginTime="0:0:0.3"> <LinearDoubleKeyFrame Value ="0.2" KeyTime="0:0:0"/> <LinearDoubleKeyFrame Value ="0.2" KeyTime="0:0:0.1"/> <LinearDoubleKeyFrame Value ="0.25" KeyTime="0:0:0.2"/> <LinearDoubleKeyFrame Value ="0.35" KeyTime="0:0:0.3"/> <LinearDoubleKeyFrame Value ="0.45" KeyTime="0:0:0.4"/> <LinearDoubleKeyFrame Value ="0.55" KeyTime="0:0:0.5"/> <LinearDoubleKeyFrame Value ="0.6" KeyTime="0:0:0.6"/> <LinearDoubleKeyFrame Value ="0.75" KeyTime="0:0:0.7"/> </DoubleAnimationUsingKeyFrames> <Canvas Canvas.Left="27" Canvas.Top="47.5" Width="50" Height="50"> <Image x:Name="image" Source="Images/KPG_ball_bw.jpg" Width="119" Height="115" RenderTransformOrigin="0.5,0.5"> <Image.Clip> <EllipseGeometry RadiusX="55" RadiusY="55" Center="58,57"/> </Image.Clip> <Image.RenderTransform> <TransformGroup> <ScaleTransform x:Name="ballscale" ScaleX="0.2" ScaleY="0.2"/> </TransformGroup> </Image.RenderTransform> </Image> </Canvas>
