Develop Reference

Images "sink" animation

I have my Storyboard animation which is moving images to specific (Canvas.SetTop) coordination. I wonder if there is an option to make those images go to specific coordination but make them sink NOT dissapear.
I am using DoubleAnimations in Storyboard.
DoubleAnimation myAnimation = new DoubleAnimation();
myAnimation.SpeedRatio = 3;
myAnimation.AutoReverse = false;
myAnimation.From = 0;
myAnimation.To = 700;
myAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
myAnimation.BeginTime = beginTime;
this.beginTime += TimeSpan.FromMilliseconds(300);

Multiple Animations Windows Phone 7

I am trying to make one-hand machine game. To animate falling down Images I am using storyboard. My question is if someone know how to make multiple images. In this code I have just on image falling down. Somone know how to make e.g 100 images animation in the storyboard?
private Storyboard CreateStoryBoard()
{
Storyboard sb = new Storyboard();
DoubleAnimation firstAnimation = new DoubleAnimation();
firstAnimation.SpeedRatio = 8;
firstAnimation.From = 0;
firstAnimation.To = 600;
firstAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
Storyboard.SetTarget(firstAnimation, Okejka);
Storyboard.SetTargetProperty(firstAnimation, new PropertyPath("(Canvas.Top)"));
sb.Children.Add(firstAnimation);
return sb;
}
private void SpinButton_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = CreateStoryBoard();
sb.Begin();
}

For each object you need create DoubleAnimation, each DoubleAnimation add to one Storyboard and then play it.
This is one method of my AnimationHelper, I modified it for this case.
public static void Animate(List<DependencyObject> objects, EventHandler onComplete = null)
{
Storyboard sb = new Storyboard();
foreach (DependencyObject obj in objects)
{
DoubleAnimation da = new DoubleAnimation();
da.From = FromValue; // Set you From value
da.To = ToValue; // Set your To value
da.Duration = new Duration(TimeSpan.FromSeconds(2)); // Set your Duration
// a.EasingFunction = anim.Func; Easing function
// da.BeginTime = anim.BeginTime; Begin time for each DA
Storyboard.SetTarget(da, obj);
Storyboard.SetTargetProperty(da, new PropertyPath(/* this your Property path */));
sb.Children.Add(da);
}
if (onComplete != null)
sb.Completed += onComplete;
sb.Begin();
}
UPDATE #1 The next code is Button.Click event handler, this code creates 20 Images and adds it to Canvas, next step is create animations for each Image using one instance of Storyboard.
private async void b1_Click(object sender, RoutedEventArgs e)
{
CanvasContainer.Children.Clear();
_images = new List<Image>();
// load bitmap
BitmapImage bmp = new BitmapImage(new Uri("Assets/appbar/appbar.italic.png", UriKind.Relative));
// create 20 Image instance
for (int i = 0; i < 20; i++)
{
Image img = new Image();
img.Source = bmp;
img.Stretch = Stretch.Fill;
img.Width = 20;
img.Height = 20;
_images.Add(img);
Canvas.SetTop(img, 0);
Canvas.SetLeft(img, i * 20 + 5);
CanvasContainer.Children.Add(img);
}
// Simulate some delay or any task (3 sec)
await Task.Delay(3000);
Storyboard sb = new Storyboard();
// delay animation time for each object
TimeSpan beginTime = TimeSpan.FromMilliseconds(0);
foreach (Image img in _images)
{
DoubleAnimation da = new DoubleAnimation();
da.From = 0; // Set start value to 0 px
da.To = 700; // Set end value to 700 px
da.Duration = new Duration(TimeSpan.FromSeconds(2)); // Set animation time to 2 sec
da.BeginTime = beginTime; // Set delay for each Image
beginTime += TimeSpan.FromMilliseconds(100);
Storyboard.SetTarget(da, img);
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)"));
sb.Children.Add(da);
}
sb.Begin();
}
Code result:

Using DoubleAnimation code behind in WinRT (XAML)

I have some problem. This is my code behind:
var s = new Storyboard();
var dAnimation = new DoubleAnimation();
dAnimation.RepeatBehavior = RepeatBehavior.Forever;
dAnimation.AutoReverse = true;
dAnimation.EnableDependentAnimation = true;
dAnimation.From = 200;
dAnimation.To = 300;
Storyboard.SetTarget(dAnimation, viewBox);
Storyboard.SetTargetProperty(dAnimation, "Width");
dAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(2000));
s.Children.Add(dAnimation);
s.Begin();
viewBox is on Canvas and has just a few property: Canvas.Left, Canvas.Top, Height and Width. Code from codebehind working great with Opacity, but not working with Width or Height. Codebehind work when user pointer is entered. I want do it without triggers. Found some solutions for Silverlight and WPF:
WinRT/Metro Animation in code-behind
they are not working. I dont undersstand why it work with opacity and didn't work with Width and Height Any ideas?

You cannot animate Width with a DoubleAnimation, you need to use a DoubleAnimationUsingKeyFrames.
var animation = new DoubleAnimationUsingKeyFrames();
var frame = new EasingDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2000)), Value = 300});
animation.KeyFrames.Add(frame);
Storyboard.SetTargetProperty(animation, "(FrameworkElement.Width)");
Storyboard.SetTarget(animation, viewBox);
Storyboard.Children.Add(animation);

I didn't check ViewBox,but I can with DoubleAnimation for Grid.
Code is like below
var s = new Storyboard();
var widthAnim = new DoubleAnimation()
{
To = w,
Duration=new Duration(TimeSpan.FromMilliseconds(duration))
};
widthAnim.EnableDependentAnimation = true;
Storyboard.SetTarget(widthAnim,elem);
Storyboard.SetTargetProperty(widthAnim,"Width");
s.Children.Add(widthAnim);
s.Begin();

How can I animate the Margin of a Stackpanel with a storyboard?

I would like to use it, but it doesnt't work, I wanna create a tile animation, in code behind, or if you know a project for this gol, pls write me
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
while(true){
Duration duration = new Duration(TimeSpan.FromSeconds(0.15));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation1.From = -173
myDoubleAnimation1.To = 173;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
Storyboard.SetTarget(myDoubleAnimation1, image);
// Set the attached properties of Canvas.Left and Canvas.Top
// to be the target properties of the two respective DoubleAnimations.
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath(StackPanel.MarginProperty));
// Begin the animation.
sb.Begin();}
});

Here is the working example, if anybody needs:
//Animate margin for Label, named "label" from right to left. from 300 to 0.
var sb = new Storyboard();
var ta = new ThicknessAnimation();
ta.BeginTime = new TimeSpan(0);
ta.SetValue(Storyboard.TargetNameProperty, "label");
Storyboard.SetTargetProperty(ta, new PropertyPath(MarginProperty));
ta.From = new Thickness(300, 30, 0, 0);
ta.To = new Thickness(0, 30, 0, 0);
ta.Duration = new Duration(TimeSpan.FromSeconds(3));
sb.Children.Add(ta);
sb.Begin(this);

Use a ThicknessAnimation instead of a DoubleAnimation. It's almost the same.
Edit:
If you want to make the Animation endless use Timeline.RepeatBehavior.
myThicknessAnimation1.RepeatBehavior = RepeatBehavior.Forever;

Animating the height and width of an object in C#

I am trying to get these ellipses to grow but I cannot figure out how to start the animation. This is my first attempt at WPF animation and I don't quite understand how it all works.
private void drawEllipseAnimation(double x, double y)
{
StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);
Ellipse e = new Ellipse();
e.Fill = Brushes.Yellow;
e.Stroke = Brushes.Black;
e.Height = 0;
e.Width = 0;
e.Opacity = .8;
canvas2.Children.Add(e);
Canvas.SetLeft(e, x);
Canvas.SetTop(e, y);
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0;
myDoubleAnimation.To = 10;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTargetName(myDoubleAnimation, e.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Ellipse.HeightProperty));
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Ellipse.WidthProperty));
}

You don't need a Storyboard here. Just do
e.BeginAnimation(Ellipse.WidthProperty, myDoubleAnimation);
e.BeginAnimation(Ellipse.HeightProperty, myDoubleAnimation);
If you really need to do it with a Storyboard, you will have to add separate animations, one per animated property, to the Storyboard. And you have to call SetTarget instead of SetTargetName when you don't apply a name. Finally you'll need to start the Storyboard by calling Begin:
DoubleAnimation widthAnimation = new DoubleAnimation
{
From = 0,
To = 10,
Duration = TimeSpan.FromSeconds(5)
};
DoubleAnimation heightAnimation = new DoubleAnimation
{
From = 0,
To = 10,
Duration = TimeSpan.FromSeconds(5)
};
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Ellipse.WidthProperty));
Storyboard.SetTarget(widthAnimation, e);
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(Ellipse.HeightProperty));
Storyboard.SetTarget(heightAnimation, e);
Storyboard s = new Storyboard();
s.Children.Add(widthAnimation);
s.Children.Add(heightAnimation);
s.Begin();