In this post, we will show how easy it is to implement spectacular rotating effects to images.
Project / source code
First, we inserted five images (all 250x200) as resource into the project. The carrousel is a canvas made of two Image components and a TextBlock. All these three components will be animated :
<Canvas x:Name="Carrousel" Width="250" Height="200" Background="Black"
Loaded="Carrousel_Loaded" >
<Image x:Name="img1" Source="London.jpg" Width="250" Height="200" .... ></Image>
<Image x:Name="img2" Source="Brussels.jpg" Width="250" Height="200" .... ></Image>
<Canvas .... >
<TextBlock x:Name="lCityName" ..... ></TextBlock>
</Canvas>
</Canvas>
We apply a ScaleTransform to the two Image components :
<Image x:Name="img1" Source="London.jpg" Width="250" Height="200"
RenderTransformOrigin="0.5,0.5"
MouseEnter="img_MouseEnter" MouseLeave="img_MouseLeave" >
<Image.RenderTransform>
<ScaleTransform x:Name="scale1" CenterX="0" />
</Image.RenderTransform>
</Image>
<Image x:Name="img2" Source="Brussels.jpg" Width="250" Height="200"
MouseEnter="img_MouseEnter" MouseLeave="img_MouseLeave" >
<Image.RenderTransform>
<ScaleTransform x:Name="scale2" CenterX="250"/>
</Image.RenderTransform>
</Image>
The MouseEnter and MouseLeave events are intercepted just to pause and resume the animation.
We now define the 3-second animation (simultaneously, a ScaleTransform and an horizontal move on img1 and a ScaleTransform on img2) :
<Grid x:Name="LayoutRoot" >
<Grid.Resources>
<Storyboard x:Name="stb" Completed="stb_Completed" >
<DoubleAnimation Storyboard.TargetName="scale1" Storyboard.TargetProperty="ScaleX"
From="1" To="0" Duration="0:0:3" />
<DoubleAnimation Storyboard.TargetName="img1" Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="-125" Duration="0:0:3" />
<DoubleAnimation Storyboard.TargetName="scale2" Storyboard.TargetProperty="ScaleX"
From="0" To="1" Duration="0:0:3" />
</Storyboard>
</Grid.Resources>
.....
</Grid>
The animation is fired in the Carrousel_Loaded function. In the stb_Completed function, we reload the img1 and img2 components with images (two images in succession in the ts array) and fire again the animation :
using System.Windows.Media.Imaging;
.....
string[] ts = { "London", "Brussels", "Venice", "Moskow", "Amsterdam" };
int N, nImg1, nImg2;
private void stb_Completed(object sender, EventArgs e)
{
N++;
nImg1 = N % ts.Length;
nImg2 = (nImg1 + 1) % ts.Length;
img1.Source = new BitmapImage(new Uri(ts[nImg1] + ".jpg", UriKind.Relative));
img2.Source = new BitmapImage(new Uri(ts[nImg2] + ".jpg", UriKind.Relative));
stb.Begin();
.....
}
It's all for images. Now, the animation on text. The lCityName TextBlock is inserted in a clipped canvas. The stbCityName animation just changes the Canvas.Left property, giving the right to left effect :
<Canvas Canvas.Left="10" Canvas.Top="220" Width="500" Height="35"
Clip="M0,0 h250 v35 h-250 z">
<TextBlock x:Name="lCityName" Canvas.Left="260" Canvas.Top="0"
FontSize="30" FontWeight="Bold" Foreground="Blue" Width="250" >
<TextBlock.Resources>
<Storyboard x:Name="stbCityName">
<DoubleAnimation Storyboard.TargetName="lCityName"
Storyboard.TargetProperty="(Canvas.Left)" From="220" To="50"
Duration="0:0:2.5" BeginTime="0:0:0.5" />
</Storyboard>
</TextBlock.Resources>
</TextBlock>
</Canvas>
City names are also changed in the stb_Completed function, as we did for images :
private void stb_Completed(object sender, EventArgs e)
{
.....
lCityName.SetValue(Canvas.LeftProperty, 250.0); lCityName.Text = ts[nImg2];
stbCityName.Begin();
}
Instead of :
<DoubleAnimation Storyboard.TargetName="scale1" Storyboard.TargetProperty="ScaleX" ..... />
it's possible to write :
<DoubleAnimation Storyboard.TargetName="img1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
..... />
And now another rotating effect :
Project / source code
We first inserted five images (all 128x152) of outstanding scientists as resource into the project. The carrousel is made of an Image component and a TextBlock. These two elements will be animated :
<Canvas Width="128" Height="152" >
<Image x:Name="img" Source="Marie Curie.jpg" Width="128" Height="152" .... ></Image>
<TextBlock x:Name="sName" .....></TextBlock>
</Canvas>
The image is clipped to an ellipse and we apply a ScaleTransform to it :
<Image x:Name="img" Source="Marie Curie.jpg" Width="128" Height="152"
RenderTransformOrigin="0.5, 0.5">
<Image.Clip>
<EllipseGeometry Center="64,76" RadiusX="64" RadiusY="76" />
</Image.Clip>
<Image.RenderTransform>
<ScaleTransform x:Name="imgScale" />
</Image.RenderTransform>
.....
</Image>
We define an animation for the Image :
<Image x:Name="img" Source="Marie Curie.jpg" ..... >
.....
<Image.Resources>
<Storyboard x:Name="stb" Completed="stb_Completed" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="imgScale"
Storyboard.TargetProperty="ScaleX" >
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="1" />
<LinearDoubleKeyFrame KeyTime="0:0:4" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Image.Resources>
</Image>
In the stb_Completed function, we load the img component with another image, whose names are found in the ts array :
using System.Windows.Media.Imaging;
.....
string[] ts = { "Marie Curie", "Thomas Edison", "Alexander Fleming",
"Guglielmo Marconi", "Albert Einstein" };
int N;
private void stb_Completed(object sender, EventArgs e)
{
N++;
int nImg = N % ts.Length;
img.Source = new BitmapImage(new Uri(ts[nImg] + ".jpg", UriKind.Relative));
stb.Begin();
.....
}
And now for the animation on names (similar, though applied to a TextBlock) :
<TextBlock x:Name="sName" Width="128" Canvas.Left="0" Canvas.Top="180" TextAlignment="Center"
RenderTransformOrigin="0.5, 0.5">
<TextBlock.RenderTransform>
<ScaleTransform x:Name="nameScale" />
</TextBlock.RenderTransform>
<TextBlock.Resources>
<Storyboard x:Name="stbName">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="nameScale"
Storyboard.TargetProperty="ScaleX">
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="1" />
<LinearDoubleKeyFrame KeyTime="0:0:4" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</TextBlock.Resources>
</TextBlock>
In the stb_Completed function, we change names, as we did for images :
private void stb_Completed(object sender, EventArgs e)
{
.....
sName.Text = ts[nImg];
stbName.Begin();
}
In the next post, we will turn pages.
Subscribe