Is it possible to animate a clipped image in Sliverlight 1.0?

[wisemx]

Yes, shown below is an image I scaled in the course of 3 seconds of animation:


[quote]

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page" xmlns:Microsoft_Expression_DesignModel_Platform="clr-namespace:Microsoft.Expression.DesignModel.Platfor m;assembly=Microsoft.Expression.DesignModel">
<Canvas.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childr en)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.247"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childr en)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.247"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childr en)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="-16"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childr en)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="-207.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Image x:Name="image" Width="640.089" Height="800.112" Canvas.Left="-0.089" Source="DASPintro.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Canvas></CODE>

[minnug]

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? http://community.discountasp.net/emoticons/scool.gif





Regards stevej

Post Edited By Moderator (mjp [DASP]) : 5/5/2008 8:41:03 PM GMT

[wisemx]

Are you using the latest Blend beta?

[minnug]

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

[minnug]

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

[minnug]

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>