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();
Related
What I'm trying to do is make my control "pulse" (as in enlarge a bit, then shrink a bit, then back to its normal size). The following code does exactly what I want, but it just seems like there should be a simpler way. It has to be done in code behind because this is an abstract class that most of our controls derive from. I don't have much experience with animation controls and story boards.
So specifically my question is, is there a simpler way to get the desired results than the following method (while still being done in the code-behind)?
public void Pulse()
{
var storyboard = new Storyboard
{
FillBehavior = FillBehavior.Stop,
RepeatBehavior = new RepeatBehavior(2)
};
double timeIncrement = .15;
double changePercent = 20;
var firstTime = TimeSpan.FromSeconds(timeIncrement);
var secondTime = TimeSpan.FromSeconds(timeIncrement * 3);
var thirdTime = TimeSpan.FromSeconds(timeIncrement * 4);
var scale = new ScaleTransform(1.0, 1.0);
RenderTransformOrigin = new Point(.5, .5);
RenderTransform = scale;
//enlarge
{
DoubleAnimation growX = new DoubleAnimation
{
Duration = firstTime,
To = 1 + changePercent
};
storyboard.Children.Add(growX);
Storyboard.SetTargetProperty(growX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation growY = new DoubleAnimation
{
Duration = firstTime,
To = 1 + changePercent
};
storyboard.Children.Add(growY);
Storyboard.SetTargetProperty(growY, new PropertyPath("RenderTransform.ScaleY"));
}
//shrink
{
DoubleAnimation shrinkX = new DoubleAnimation
{
Duration = secondTime,
To = 1 - changePercent
};
storyboard.Children.Add(shrinkX);
Storyboard.SetTargetProperty(shrinkX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation shrinkY = new DoubleAnimation
{
Duration = secondTime,
To = 1 - changePercent
};
storyboard.Children.Add(shrinkY);
Storyboard.SetTargetProperty(shrinkY, new PropertyPath("RenderTransform.ScaleY"));
}
//back to normal
{
DoubleAnimation normX = new DoubleAnimation
{
Duration = thirdTime,
To = 1
};
storyboard.Children.Add(normX);
Storyboard.SetTargetProperty(normX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation normY = new DoubleAnimation
{
Duration = thirdTime,
To = 1
};
storyboard.Children.Add(normY);
Storyboard.SetTargetProperty(normY, new PropertyPath("RenderTransform.ScaleY"));
}
BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
}
You could perhaps simplify things a little by moving your grow/shrink logic into its own method. This reduces duplication and provides a potentially more reusable code kibble.
public void Pulse()
{
var storyboard = new Storyboard
{
FillBehavior = FillBehavior.Stop,
RepeatBehavior = new RepeatBehavior(2)
};
double timeIncrement = .15;
double growPercent = 20;
double shrinkPercent = -20;
var firstTime = TimeSpan.FromSeconds(timeIncrement);
var secondTime = TimeSpan.FromSeconds(timeIncrement * 3);
var thirdTime = TimeSpan.FromSeconds(timeIncrement * 4);
var scale = new ScaleTransform(1.0, 1.0);
RenderTransformOrigin = new Point(.5, .5);
RenderTransform = scale;
storyboard = AddSizeChange(firstTime, growPercent, storyboard);
storyboard = AddSizeChange(secondTime, shrinkPercent, storyboard);
storyboard = AddSizeChange(thirdTime, growPercent, storyboard);
BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
}
public Storyboard AddSizeChange(TimeSpan animTime, double changePercent, Storyboard storyboard)
{
DoubleAnimation growX = new DoubleAnimation
{
Duration = animTime,
To = 1 + changePercent
};
storyboard.Children.Add(growX);
Storyboard.SetTargetProperty(growX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation growY = new DoubleAnimation
{
Duration = animTime,
To = 1 + changePercent
};
storyboard.Children.Add(growY);
Storyboard.SetTargetProperty(growY, new PropertyPath("RenderTransform.ScaleY"));
return storyboard;
}
That's a fine way of doing it, WPF does not provide methods or events to automatically pulse. Yours is simple and as you've created it, you know how to modify it as you wish.
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:
I'd like to fade in a drop shadow effect on a DataGrid over 2 seconds, which fades out over 2 seconds again after the fade-in animation is completed.
My code so far:
DropShadowEffect dropShadowEffect = new DropShadowEffect();
dropShadowEffect.ShadowDepth = 0;
dropShadowEffect.Color = Colors.LightSeaGreen;
dropShadowEffect.Opacity = 0;
dropShadowEffect.BlurRadius = 20;
element.Effect = dropShadowEffect;
Storyboard storyboard1 = new Storyboard();
TimeSpan duration1 = TimeSpan.FromMilliseconds(2000);
DoubleAnimation animateOpacity1 = new DoubleAnimation() { From = 0, To = 1, Duration = new Duration(duration1) };
Storyboard.SetTargetName(animateOpacity1, element.Name);
Storyboard.SetTargetProperty(animateOpacity1, new PropertyPath(DropShadowEffect.OpacityProperty));
DoubleAnimation animateOpacity2 = new DoubleAnimation() { From = 1, To = 0, Duration = new Duration(duration1) };
Storyboard.SetTargetName(animateOpacity2, element.Name);
Storyboard.SetTargetProperty(animateOpacity2, new PropertyPath(DropShadowEffect.OpacityProperty));
storyboard1.Children.Add(animateOpacity1);
storyboard1.Children.Add(animateOpacity2);
storyboard1.Begin(element);
Upon executing the code, nothing happens.
If you simply want to do DoubleAnimation, no need to complex it using StoryBoard. Also, you can achieve this with only single double animation with property AutoReverse set to true.
Moreover, do animation on dropShadowEffect object instead of element object.
TimeSpan duration = TimeSpan.FromMilliseconds(2000);
DoubleAnimation animateOpacity = new DoubleAnimation() { From = 0, To = 1,
Duration = duration, AutoReverse = true };
dropShadowEffect.BeginAnimation(DropShadowEffect.OpacityProperty,
animateOpacity);
I am trying to create a simple animation using code. I copy pasted the same code of the msdn which is the following:
public MainPage()
{
InitializeComponent();
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
// Add the rectangle to the tree.
LayoutRoot.Children.Add(myRectangle);
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
Storyboard.SetTarget(myDoubleAnimation2, myRectangle);
// 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("(Canvas.Left)"));
Storyboard.SetTargetProperty(
myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
myDoubleAnimation1.To = 200;
myDoubleAnimation2.To = 200;
// Make the Storyboard a resource.
LayoutRoot.Resources.Add("unique_id", sb);
// Begin the animation.
sb.Begin();
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
However, I obtain a red square that doesn't move when I run the emulator.
What could be the problem?
Thank you!
I saw an example on how to create a glow effect when the image gets focus in mark-up.
Below is the C# code example i found that uses double animation for opacity of a rectangle, i need to perform a glow or swivel effect using C# and not markup since i am not comfortable with it.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
You can add this in your Main(), after InitializeComponent();
textBlock1.Text = "Mouse over me";
var effect = new DropShadowEffect();
effect.Color = Colors.Red;
effect.BlurRadius = 10d;
effect.Opacity = 0d;
effect.ShadowDepth = 0d;
textBlock1.Effect = effect;
textBlock1.MouseEnter += (s, e) => {
var anim = new DoubleAnimation(0d, 1d, new Duration(TimeSpan.FromMilliseconds(500)));
effect.BeginAnimation(DropShadowEffect.OpacityProperty, anim); };
textBlock1.MouseLeave += (s, e) => {
var anim = new DoubleAnimation(1d, 0d, new Duration(TimeSpan.FromMilliseconds(500)));
effect.BeginAnimation(DropShadowEffect.OpacityProperty, anim); };
But I'd suggest stop wasting time with C# for GUI code, XAML is so much more convenient.