Thursday, October 16, 2008

WPF Cover Flow Tutorial : Part 3

In Part 2, we miss the animation part of the flow.

In the main TestWindow, we save all the covers in a List :
private readonly List<Cover> coverList = new List<Cover>();
public TestWindow()
{
InitializeComponent();
var assembly = new FileInfo(Assembly.GetExecutingAssembly().Location);
var image = new FileInfo(Path.Combine(assembly.Directory.FullName, "Katy Perry.jpg"));
for (int i = 0; i < 10; i++)
{
var cover = new Cover(image.FullName, i);
coverList.Add(cover);
visualModel.Children.Add(cover);
}
}
We add an handler for the KeyDown event on the Window element. We will only deal with the Right and Left keys. Once one of these keys is pressed down, we animate the old current cover and the new one.
private void RotateCover(int pos)
{
coverList[pos].Animate(index);
}
private void UpdateIndex(int newIndex)
{
if (index != newIndex)
{
int oldIndex = index;
index = newIndex;
RotateCover(oldIndex);
RotateCover(index);
camera.Position = new Point3D(.2 * index, camera.Position.Y, camera.Position.Z);
}
}
private void Window_KeyDown(object sender, KeyEventArgs e)
{
int newIndex = index;
switch (e.Key)
{
case Key.Right:
if (newIndex < coverList.Count - 1)
newIndex++;
break;
case Key.Left:
if (newIndex > 0)
newIndex--;
break;
}
UpdateIndex(newIndex);
}
Currently, we do not animate covers. We just move them from one place to another. In order to get a real animation, we have to deal with Animation objects. In this new version of the Animate method, we ask the engine to animate the covers. As we have saved the translation and rotation objects in two Cover attributes, we can directly update their parameters (angle and offsets).
public void Animate(int index)
{
TimeSpan duration = TimeSpan.FromMilliseconds(500);
var rotateAnimation = new DoubleAnimation(RotationAngle(index), duration);
var xAnimation = new DoubleAnimation(TranslationX(index), duration);
var zAnimation = new DoubleAnimation(TranslationZ(index), duration);
rotation.BeginAnimation(AxisAngleRotation3D.AngleProperty, rotateAnimation);
translation.BeginAnimation(TranslateTransform3D.OffsetXProperty, xAnimation);
translation.BeginAnimation(TranslateTransform3D.OffsetZProperty, zAnimation);
}
. Continue with Part 4.
Edit 2014-02-23 : Code has moved to github.

6 comments:

Aaron de Windt said...

Change this:

camera.Position = new Point3D(.2 * index, camera.Position.Y, camera.Position.Z);

in UpdateIndex for this:

Point3D nextPosition = new Point3D(.2 * index, camera.Position.Y, camera.Position.Z);
Point3D currentPosition = camera.Position;
int duration = 500;
Point3DAnimation positionAnimation =
new Point3DAnimation(currentPosition, nextPosition,
TimeSpan.FromMilliseconds(duration));
camera.BeginAnimation(
PerspectiveCamera.PositionProperty, positionAnimation);

It will make the animation look much better.

ded said...

Well, following your advice, I added animation for the camera on the current version of my component, but I don't like it. Maybe it is not necessary anymore with all the improvements I added. Thanks anyway.

Chris said...

Hi, i have a problem with some part of the code lol, im trying to convert it to visual basic in wpf, im a such a noob in wpf so please help
in the line private readonly List coverList = new List();
is correct transform to Private List As New List(Of Coverflow.Cover)

and in the for to populate the list

for (int i = 0; i < 10; i++)
{
var cover = new Cover(image.FullName, i);
coverList.Add(cover);
visualModel.Children.Add(cover);
}

i write some like this

For i = 0 To 9
Dim cover As New CoverFlow.Cover
cover.Cover(Imagen.FullName, i)
List.Add(Cover)
visualModel.Children.Add(Cover)
Next


anyway i executed the program, and! lol i have just one picture.... something is wrong adding picture to the list? i dont know what is happening if can you help me pls


thanks you very much

ded said...

Hi Chris ! Sorry, I don't do VB. My advice : forget VB and learn C#. C# in a nutshell is a good way to start.

rawia karoui said...

hi
thank u for this tutorial it's intresting but i have a problem with visualModel.Children.Add() when i compile i obtain this error 'le nom visualmodel n'existe pas dans le contexte actuel'and i don't understand why can some one help me?

rawia karoui said...

it's ok i solved the problem
there's ModelVisual3D visualModel = new ModelVisual3D();missing :)