Develop Reference

Apply a continuous animation to a Canvas in WPF

I want to apply a continuous FadeIn/FadeOut animation to a specific Canvas in my WPF.
I'm able to do the FadeOut part but then the FadeIn part executes immediately after that and ruins the animation.
I also want all of this to be in a smooth loop without interfering with my normal operations.
Look at it as an animated background.
What's the best method to do this? Should I use While? or should I use Timer? ...
var duration = new Duration(TimeSpan.FromMilliseconds(1000));
var fadeOut = new DoubleAnimation(0.0, duration);
var fadeIn = new DoubleAnimation(1.0, duration);
MyCanvas.BeginAnimation(OpacityProperty, fadeOut);
MyCanvas.BeginAnimation(OpacityProperty, fadeIn);

You can set the AutoReverse and RepeatBehavior properties of a single DoubleAnimation to get a continous effect:
var fadeInOutAnimation = new DoubleAnimation
{
From = 0,
To = 1,
Duration = TimeSpan.FromSeconds(1),
AutoReverse = true,
RepeatBehavior = RepeatBehavior.Forever,
};
MyCanvas.BeginAnimation(OpacityProperty, fadeInOutAnimation);
In your approach you would have to set the BeginTime property of the second animation to the Duration of the first one.

Repeat DoubleAnimation

I want to apply the following animation to my Window:
var ani = new DoubleAnimation(610, TimeSpan.FromSeconds(0.7));
BeginAnimation(Window.WidthProperty, ani);
The problem is that this animation works only the first time, the other times it has no effect.
Why? How can I fix this problem?

You have to specify the fromValue when you create the DoubleAnimation (as first argument).
var ani = new DoubleAnimation(ActualWidth, 610, TimeSpan.FromSeconds(0.7));

You can add the following code:
ani.RepeatBehavior = RepeatBehavior.Forever;
The animation will repeat itself once it is finished with RepeatBehavior set to Forever

Adding delay in program C#

In my WP7 app, player draws a line and then CPU draws a line. I want CPU to wait for 5 sec before processing and drawing the line. I use this System.Threading.Thread.Sleep(5000);just after player is done drawing. But the player's line is not drawn completely and system goes to sleep and after 5 sec both lines are drawn. How to complete the player's line and then to start the delay ?

System.Threading.Thread.Sleep(5000) will freeze your app and your UI. Your app will surely not pass certification because of this.
Use DispatcherTimer.
Follow this link for more info.

You can use DispatcherTimer to add some delay immediately after the player's turn.
This is typically what you could do:
Class Variables:
DispatcherTimer delayTimer = new DispatcherTimer();
int timesTicked = 0;
In your Constructor:
delayTimer.Interval = new TimeSpan(0, 0, 0, 0, 5000);
delayTimer.Tick += new EventHandler(timer_Tick);
Handler:
void delayTimer_Tick(object sender, EventArgs e)
{
timesTicked++;
if(timesTicked == 2)
{
timesTicked = 0;
delayTimer.Stop();
RunCPU();
}
}
The above tracks the amount of times the Timer has ticked and after two ticks, it calls the RunCPU method. Note that the above will 10 seconds. You can play around with the numbers to find a niche for the delay.

Try with Application.DoEvents(); before sleep.

Not being able to animate TranslateTransform.XProperty with code

I have a method that enables me to animate objects that have to do with a DoubleAnimation:
public void animDouble(DependencyObject target, DependencyProperty property, double to, TimeSpan duration, double? from = null, TimeSpan? beginTime = null, IEasingFunction e = null)
{
DoubleAnimation animation = new DoubleAnimation();
animation.To = to;
if (beginTime == null)
beginTime = TimeSpan.FromSeconds(0);
if (from != null)
animation.From = from;
animation.BeginTime = beginTime;
animation.Duration = duration;
if (e != null)
animation.EasingFunction = e;
//start animating
Storyboard.SetTarget(animation, target); // what object will be animated?
Storyboard.SetTargetProperty(animation, new PropertyPath(property)); // what property will be animated
Storyboard sb = new Storyboard();
sb.Children.Add(animation);
sb.Begin();
}
so if I have a boarder called br1 for example and I want to animate it's height I will call the method as:
animDouble(br1, FrameworkElement.HeightProperty, 150, TimeSpan.FromSeconds(5));
if I want to animate it's width I will do:
animDouble(br1, FrameworkElement.WidthProperty, 150, TimeSpan.FromSeconds(5));
I could also animate it's visibility with the same method.
for some reason I am not able to animate its x property in order to translate it along the x axis or y-axis. When I call the method as:
a.animDouble(br1, TranslateTransform.XProperty, 150, TimeSpan.FromSeconds(5));
the boarder does not animates. I don't get any errors aether.

Somehow i would have expected an error, well, anyway, the Border owns no such property, if you want to move your control you need to set the RenderTransform or LayoutTransform of the border to a TranslateTransform, then you can pass the transform itself into the method as target.
(The whole storyboard is awfully redundant as you only have one animation, you can just call BeginAnimation on the target itself)

It had to do with registering the name. I found a link in here
I don't know what the method registerName does but I guess I needed it. from the page I managed to get the basic animations. I where not able to animate two things at once SOMETIMES. if you are interested in seeing the method take a look tat this question. I think it is a prety nice class that will enable to create animations with code. copy the namespace to visual studio and copy the first example that I posted so that you can see how it works.

Storyboard duration cutting off animation

I'm running into a really weird issue with Silverlight 3. I've defined an extension method to create a storyboard around a given DoubleAnimation and play that animation. I know the default duration for storyboards in Silverlight is 1s, but I would like to change that for my animations. However, when I set a different duration, instead of altering the animation to move from start to finish in the allotted time, the animation will just play for the duration I specified and then stop. For example, if I'm moving something from 0,0 to 0,10 and set the duration to .3s, the item will only move to 0.3. I can't imagine this is by design. Any ideas what is going on here?
Here's the code I'm using. ConfigureStoryboard is where the storyboard is created around the animation. I've removed some code regarding the easing function to make it more readable.
public static void BeginAnimation(
this Transform transform,
DependencyProperty property,
DoubleAnimation animation,
EasingFunction function
)
{
var storyboard = new Storyboard();
ConfigureStoryboard(animation, storyboard, function);
Storyboard.SetTarget(storyboard, transform);
Storyboard.SetTargetProperty(
storyboard,
new PropertyPath(property));
storyboard.Begin();
}
private static void ConfigureStoryboard(DoubleAnimation animation, Storyboard storyboard, EasingFunction function)
{
DoubleAnimation myAnimation = new DoubleAnimation();
storyboard.Duration = animation.Duration;
myAnimation.From = animation.From;
myAnimation.To = animation.To;
storyboard.Children.Add(myAnimation);
}

private static void ConfigureStoryboard(DoubleAnimation animation, Storyboard storyboard, EasingFunction function)
{
DoubleAnimation myAnimation = new DoubleAnimation();
myAnimation.Duration = animation.Duration;
myAnimation.From = animation.From;
myAnimation.To = animation.To;
storyboard.Children.Add(myAnimation);
}
Animation needs to have a duration else it get the default, and since the storyboard will only run for 0.3s, only a third of your animation will run before stopping.