Develop Reference

How do I animate a UserControl along a Cubic Bezier Curve in UWP

I am trying to animate a UserControl along a Cubic Bezier Curve.
This is the path I want the UserControl to be following:
<Path Stroke="Green" StrokeThickness="1" Data="M100,500 C275,200 825,200 1100,500" />
This is the code I have tried to use, but I have only found a way to animate along a straight line:
<Storyboard x:Name="MyAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:5">
<LinearDoubleKeyFrame Value="1100" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="Y" Duration="0:0:5">
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The only thing I have found that is talking about Bezier Curves is SplineDoubleKeyFrame. However, I can not get this to work even close to what I am looking for.
I have done this before in WPF by using MatrixAnimationUsingPath and DoubleAnimationUsingPath but these classes are not available in UWP. How do I animate a UserObject along a Path in UWP?
EDIT:
This is the code I have used for SplineDoubleKeyFrame:
<Storyboard x:Name="MyAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:5">
<SplineDoubleKeyFrame Value="1100" KeyTime="0:0:5" KeySpline="0.25,0.0 0.75,0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ObjectTranslateTransform" Storyboard.TargetProperty="Y" Duration="0:0:5">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:5" KeySpline="0.0,0.4 0.0,0.4"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
This is however only moving in a horizontal line at decreasing speed. I do not understand what the value for KeySpline should be.

You've mentioned in the question about it but the only way without creating the bezier reducing function yourself is via DoubleAnimationUsingKeyFrames using SplineDoubleKeyFrame.
In the MSDN docs there's a good example: https://learn.microsoft.com/en-us/windows/uwp/graphics/key-frame-and-easing-function-animations
You'll want an initial key frame - so a basic linear key frame at time = 0 and value = x to set the initial value.
Then a SplineDoubleKeyFrame with the bezier control points, value at your final value and time at your ending time
Can you post the code you've tried and what was wrong with the result?

How to set dynamic DoubleAnimation To or From values

I have a number of scenarios where I am doing simple WPF storyboard animations as such.
<Storyboard x:Key="MyTextBlockStoryBoard" RepeatBehavior="Forever">
<DoubleAnimation AutoReverse="True"
Duration="0:0:8"
From="0.0"
Storyboard.TargetName="MyTextBlock"
Storyboard.TargetProperty="(Canvas.Left)"
To="500.0" />
</Storyboard>
However I need to be able to set the To value in this animation to a dynamic value which is equivalent to UserControl.ActualWidth - MyTextBlock.ActualWidth. I understand that obviously I can easily create a Storyboard as above programmatically but I am hoping to stay inside Xaml world.
My inkling is that the only way I can achieve this is through implementing my own IValueConverter but I am hoping that there might be a easier way to achieve my desired output?

Flash animation for my textblock

I have set up a textblock to set the string "ALARM" added to it when the alrm clock goes off. The code is working fine for this process. I am trying to make this string "ALARM" (or the textblock itself) flash when the alarm goes off.
I am able to work out the codes to make the string "ALARM" fade in fade out using mouse events but cant figure out how to make it happen w/o the need for mouse events. I tried textBlock_Loaded event and that doesn't work. I want the fade in fade out to be ongoing forever in a loop to create a flashing effect.
Please advice if there is an event that would fit my need. Been trying one by one down the list of available events with no success. My codes for the mouse events is below. Appreciate any advice. Thanks.
private void textBlock3_MouseLeave(object sender, MouseEventArgs e)
{
TextBlock textblk = (TextBlock)sender;
DoubleAnimation animation = new DoubleAnimation(0, TimeSpan.FromSeconds(2));
textblk.BeginAnimation(TextBlock.OpacityProperty, animation);
}
private void textBlock3_MouseEnter(object sender, MouseEventArgs e)
{
TextBlock textblk = (TextBlock)sender;
DoubleAnimation animation = new DoubleAnimation(1, TimeSpan.FromSeconds(2));
textblk.BeginAnimation(TextBlock.OpacityProperty, animation);
}

All you need is an EventTrigger with the "Loaded" event. Set the RepeatBehavior to "Forever" so that the Storyboard keeps repeating, and AutoReverse to "True":
<TextBlock x:Name="textBlock3" Text="hello world">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Duration="0:0:1"
To="0"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>

How can I trigger animation from C#? [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Start Storyboard When Text Changes
I've created a animation:
<phone:PhoneApplicationPage
...>
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="MessageFadeInOut" Storyboard.TargetProperty="Opacity">
<DoubleAnimation From="0" To="1" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation From="1" To="1" Duration="0:0:1" BeginTime="0:0:1" />
<DoubleAnimation From="1" To="0" Duration="0:0:1" BeginTime="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
What I'm trying to do where is have something fade in, stay for a bit then fade out.
I trigger it by:
private void Unit_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
{
Storyboard sb = this.Resources["MessageFadeInOut"] as Storyboard;
Storyboard.SetTarget(sb, this.Message);
sb.Begin();
}
But on the sb.Begin() I get "System.InvalidOperationException". How come? Message is a Image

I'm not sure what "Message" is in this context, and that might be the reason why you're seeing this exception. Or it might not be .
Either way, you shouldn't grab Storyboards and start those manually. You should use VisualStateManager to manage your visual states by encapsulating a storyboard in each state. You can read more about this # Start Storyboard When Text Changes
A good way to get started in VSM would be to watch these videos by Steve White in the Expression Blend 2 launch:
Adding Control States # http://msdn.microsoft.com/en-us/expression/ff898424
Create Custom Buttons # http://msdn.microsoft.com/en-us/expression/ff921363
Customize a Checkbox’s Checkmark # http://msdn.microsoft.com/en-us/expression/ff921365
Use an In-State Animation # http://msdn.microsoft.com/en-us/expression/ff921380
Each of these videos is part of a series, so consider watching the rest of the series. There are also articles you can read # http://www.interact-sw.co.uk/iangblog/2008/06/10/visual-state

How can I do multiple animations in a single storyboard in C#/XAML?

I'm trying to make a simple Windows Store game in C# and XAML, one that involves hexagonal tiles moving about. This is mostly to help me learn C# and XAML as I've never worked with graphics or even UI coding before.
I've got a method that can move a single hex to the target coordinates, but looking at it now I realize that it is impossible to do multiple moves at once, which is absolutely necessary.
I feel like there's got to be something fundamentally off in my approach, multiple objects moving about a single canvas cannot be an unusual thing, can it? I'm mostly asking this in the hope that someone will point out where I went wrong.
//moves the hex hexName to coordinates x, y, over a specified duration.
public void slideHex(int x, int y, string hexName, Duration duration)
{
GameStoryboard.Stop();
Polygon hex = GameCanvas.FindName(hexName) as Polygon;
TranslateTransform slideTransform = new TranslateTransform();
slideTransform.X = hex.RenderTransformOrigin.X;
slideTransform.Y = hex.RenderTransformOrigin.Y;
hex.RenderTransform = slideTransform;
DoubleAnimation animX = new DoubleAnimation();
DoubleAnimation animY = new DoubleAnimation();
animX.Duration = duration;
animY.Duration = duration;
GameStoryboard.Duration = duration;
GameStoryboard.Children.Add(animX);
GameStoryboard.Children.Add(animY);
Storyboard.SetTarget(animX, slideTransform);
Storyboard.SetTarget(animY, slideTransform);
Storyboard.SetTargetProperty(animX, "X");
Storyboard.SetTargetProperty(animY, "Y");
animX.To = x;
animY.To = y;
GameStoryboard.Begin();
}

A storyboard can contain multiple animations, and each animation can target a different UI element. Here's an example of a storyboard which "pulses" the border colours of three different controls:
<Storyboard x:Name="pulseAnimation" AutoReverse="True">
<ColorAnimation x:Name="animateLatitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLatitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" />
<ColorAnimation x:Name="animateLongitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLongitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" />
<ColorAnimation x:Name="animateHyperlinkTextColour" Storyboard.TargetName="hyperlinkButtonCurrentLocation" From="{StaticResource PhoneForegroundColor}" To="Green" Storyboard.TargetProperty="(HyperlinkButton.Foreground).(SolidColorBrush.Color)" Duration="0:0:0.4" />
</Storyboard>
Your code looks fine - you're already animating multiple properties of slideTransform, and since the target of an animation is a property of the animation rather than the storyboard, there's no reason why you couldn't retarget either animX or animY to a different object altogether.

You can create multiple storyboards and execute them concurrently in order to simultaneously animate multiple objects. See the example in the following article which animates multiple items within a to-do list:
http://www.codeproject.com/Articles/428088/A-Gesture-Driven-Windows-Phone-To-Do-List#swipe