I have a UWP app project and I am trying to add a couple of DoubleAnimations and I am using below code:
private static void CreateStoryboardAnimation(StackPanel sp, ItemHelper item, EnumHelper.AddRemoveFavorites favType)
{
var image = (Image)sp.FindName("ImageView");
var tb = (TextBlock)sp.FindName("FavStatusTB");
if (image != null)
{
image.RenderTransform = new CompositeTransform();
//tb.RenderTransform = new CompositeTransform();
Storyboard tbStory = new Storyboard();
var tbAnimateOpacity = new DoubleAnimation()
{
From = 1.0,
To = 0.0,
Duration = new Duration(TimeSpan.FromMilliseconds(500)),
};
Storyboard.SetTarget(tbAnimateOpacity, tb);
Storyboard.SetTargetProperty(tbAnimateOpacity, "Opacity");
tbStory.Children.Add(tbAnimateOpacity);
Storyboard storyboard1 = new Storyboard();
storyboard1.Completed += async delegate
{
// set text
if (favType == EnumHelper.AddRemoveFavorites.Add)
{
tb.Text = "Added to favorites";
}
else
{
tb.Text = "Removed from favorites";
}
await Task.Delay(500);
// run 2nd animation
var storyboard2 = new Storyboard();
var translateYAnimation2 = new DoubleAnimation()
{
From = -20,
To = 0,
Duration = new Duration(TimeSpan.FromMilliseconds(700)),
};
Storyboard.SetTarget(translateYAnimation2, image);
Storyboard.SetTargetProperty(translateYAnimation2, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard2.Children.Add(translateYAnimation2);
storyboard2.Begin();
tbStory.Begin();
};
DoubleAnimation translateYAnimation = new DoubleAnimation()
{
From = 0,
To = -20,
Duration = new Duration(TimeSpan.FromMilliseconds(500))
};
Storyboard.SetTarget(translateYAnimation, image);
Storyboard.SetTargetProperty(translateYAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard1.Children.Add(translateYAnimation);
storyboard1.Begin();
}
}
The first time I run the animation it works fine but after that it doesn't. This code gets applied on GridView items as you can see below:
The image animation works fine, it goes up and then the TextBlock animation runs poorly. It is supposed to display the text for 500 milliseconds but it shows the text and then starts the animation to make the opacity go zero.
I want this text to be visible to the user for at least 500 milliseconds and then the animation should start. Is there something that I am missing? I also tried BeginTime property of DoubleAnimation but to no avail. Please share your suggestions. Thanks
I think the problem is with the fact that you are starting the opacity animation inside the Completed handler of the first "slide up" animation. It works the first time, because the Opacity of the TextBlock is 1.0, but after the first round it is 0.0 and flips to 1.0 only after the await Task.Delay(500); finishes. The easiest fix would be to set the opacity right after the if:
if (image != null)
{
tb.Opacity = 1; //add this line
...
Related
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 got this UserControl which is a Grid with around 10 rows and 10 columns. Each cell contains 1 textblock or 1-6 images.
What I want to do is animate all elements on each row to slide in. However I can't find a way to animate the whole Grid.Row to do that.
I can't wrap all elements in a stackpanel/canvas either since that puts them into the same column...
Anyone has a solution to this?
Thanks
So I've come up with a working solution and it is working. Maybe not that elegant but it does what it is supposed to do and works very well on a Lumia 920 device.
void CreateLoadAnimationForRow(int row, int startTime)
{
foreach (var child in LayoutRoot.Children.Cast<FrameworkElement>().Where(x => Grid.GetRow(x) == row))
{
AddToStoryboard(child, startTime);
}
}
void AddToStoryboard(FrameworkElement element, int startTime)
{
element.RenderTransform = new CompositeTransform();
var doubleAnimation = new DoubleAnimation
{
From = -200,
To = 0,
Duration = new Duration(TimeSpan.FromSeconds(1)),
BeginTime = TimeSpan.FromMilliseconds(startTime)
};
var objectAnimationUsingKeyFrames = new ObjectAnimationUsingKeyFrames()
{
BeginTime = TimeSpan.FromMilliseconds(startTime + 10)
};
var discreteObjectKeyFrame = new DiscreteObjectKeyFrame()
{
KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)),
Value = Visibility.Visible
};
objectAnimationUsingKeyFrames.KeyFrames.Add(discreteObjectKeyFrame);
IEasingFunction easingFunction = new SineEase();
easingFunction.Ease(2);
doubleAnimation.EasingFunction = easingFunction;
Storyboard.SetTarget(objectAnimationUsingKeyFrames, element);
Storyboard.SetTargetProperty(objectAnimationUsingKeyFrames, new PropertyPath("Visibility"));
Storyboard.SetTarget(doubleAnimation, element);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.RenderTransform).(CompositeTransform.TranslateX)"));
storyboardSlideIn.Children.Add(doubleAnimation);
storyboardSlideIn.Children.Add(objectAnimationUsingKeyFrames);
}
Why below code doesn't change ScaleY to 1?
var transform = new ScaleTransform { ScaleY = 0 };
var story = new Storyboard();
var animation = new DoubleAnimation {
Duration = new Duration(new TimeSpan(0)), To = 1 };
Storyboard.SetTarget(animation, transform);
Storyboard.SetTargetProperty(animation, new PropertyPath("ScaleY"));
story.Children.Add(animation);
story.Begin();
I use transform indirectly: it use for render some UIElements and kept in their DependencyProperty.
Does it perhaps work if you drop the Storyboard and just call BeginAnimation directly?
var transform = new ScaleTransform { ScaleY = 0 };
var animation = new DoubleAnimation { Duration = TimeSpan.Zero, To = 1 };
transform.BeginAnimation(ScaleTransform.ScalyYProperty, animation);
Note that this will only have any effect if the animation's FillBehavior has a value of HoldEnd. Otherwise the animated property will immediately revert back to its local value (which is 0 here). Fortunately HoldEnd is the default value for FillBehavior.
And of course the transform should be used somewhere.
I have the following method which works. I'd like to put it in a utility method that returns a Storyboard. Every attempt I have made at converting this to a Storyboard has failed, and I've spent a lot of time researching. I'm ready to give up unless someone comes to my rescue.
Here's the code I want to convert:
public override void Begin(FrameworkElement element, int duration)
{
var transform = new ScaleTransform();
element.LayoutTransform = transform;
var animation = new DoubleAnimation
{
From = 1,
To = 0,
Duration = TimeSpan.FromMilliseconds(duration),
FillBehavior = FillBehavior.Stop,
EasingFunction = new QuinticEase { EasingMode = EasingMode.EaseIn }
};
transform.BeginAnimation(ScaleTransform.ScaleXProperty, animation);
transform.BeginAnimation(ScaleTransform.ScaleYProperty, animation);
}
So, instead of the two BeginAnimation() calls, I want to return a Storyboard so all I have to do is call storyboard.Begin(). I know this shouldn't be that hard to do, but I'm just not getting it.
Thanks.
EDIT: In response to H.B's suggestions, I tried the following code, which still does not work:
private static Storyboard CreateAnimationStoryboard(FrameworkElement element, int duration)
{
var sb = new Storyboard();
var scale = new ScaleTransform(1, 1);
element.RenderTransform = scale;
element.RegisterName("scale", scale);
var animation = new DoubleAnimation
{
From = 1,
To = 0,
Duration = TimeSpan.FromMilliseconds(duration),
FillBehavior = FillBehavior.Stop,
EasingFunction = new QuinticEase { EasingMode = EasingMode.EaseIn }
};
sb.Children.Add(animation);
Storyboard.SetTarget(animation, scale);
Storyboard.SetTargetProperty(animation, new PropertyPath(ScaleTransform.ScaleXProperty));
return sb;
}
I know I only animated the X axis - just want to get something to work first.
You'll need two animations and then set the attached Storyboard properties to animated the right property on the right object using SetTargetProperty and SetTargetName.
Due to how storyboards work you also need to set a namescope (NameScope.SetNameScope), register the name of the transform, and call StoryBoard.Begin with the containing element overload.
e.g.
NameScope.SetNameScope(element, new NameScope());
var transform = new ScaleTransform();
var transformName = "transform";
element.RegisterName(transformName, transform);
element.RenderTransform = transform;
var xAnimation = new DoubleAnimation(2, TimeSpan.FromSeconds(1));
var yAnimation = xAnimation.Clone();
var storyboard = new Storyboard()
{
Children = { xAnimation, yAnimation }
};
Storyboard.SetTargetProperty(xAnimation, new PropertyPath("(ScaleTransform.ScaleX)"));
Storyboard.SetTargetProperty(yAnimation, new PropertyPath("(ScaleTransform.ScaleY)"));
Storyboard.SetTargetName(xAnimation, transformName);
Storyboard.SetTargetName(yAnimation, transformName);
storyboard.Begin(element);
I suggest using Expression Blend and start recording from there, it should create your storyboards in XAML. Rather than hard coding it with C# and trying to translate it 1 by 1 to storyboard thus it can be a prone error.
There is Main frame on which there is a button and control and also stackpanel. Attempting to move worked animation from xaml to .cs I have wrote next cool function)):
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
int heightBottom = 100;
System.Windows.Thickness th = stackPanel1.Margin;
th.Top = stackPanel1.Margin.Top + heightBottom;
ThicknessAnimation animStackPanel1 = new ThicknessAnimation
{
From = stackPanel1.Margin,
To = th,
AccelerationRatio = 0.2,
FillBehavior = FillBehavior.Stop,
DecelerationRatio = 0.8,
Duration = DURATION
};
System.Windows.Thickness th2 = fxPSEditorView.Margin;
th2.Right = fxPSEditorView.Margin.Right - heightBottom;
th2.Bottom = fxPSEditorView.Margin.Bottom - heightBottom;
ThicknessAnimation animPSEditorView = new ThicknessAnimation
{
From = fxPSEditorView.Margin,
To = th2,
AccelerationRatio = 0.2,
FillBehavior = FillBehavior.Stop,
DecelerationRatio = 0.8,
Duration = DURATION
};
Storyboard.SetTarget(animPSEditorView, fxPSEditorView);
Storyboard.SetTargetProperty(fxPSEditorView, new PropertyPath(MarginProperty));
sb.Children.Add(animPSEditorView);
Storyboard.SetTarget(animStackPanel1, stackPanel1);
Storyboard.SetTargetProperty(stackPanel1, new PropertyPath(MarginProperty));
sb.Children.Add(animStackPanel1);
sb.Begin();//null reference error here!
};
As I understand I must specify TWO parameters for sb.Begin - one for stackPanel1 and the other is for fxPSEditorView. But It does not takes a set of objects as first parameter.
Any ideas how to run this animation will be wellcome ! Thank you
You do not need two parameters, but you should pass the control which contains the controls which are being animated (which need to be in the same name-scope). Read the documentation of Begin(FrameworkElement).