Animations in WPF provide the boolean parameter AutoReverse. Is it possible to make a call to the functionality implemented by AutoReverse = "true"?
My goal is to spare some troublesome reverse animation and especially spare alot of code. The reverse must not happen directly after the animation ended.
Example of using AutoReverse and True to animate only the reverse animation, but this does not work as required - it still animates the actual animation and the reverse animation.
TranslateTransform transform = new TranslateTransform(0.0, 0.0);
myBox.RenderTransform = transform;
sb = new Storyboard();
Duration dur = new Duration(TimeSpan.FromSeconds(0.5));
DoubleAnimation shiftAnimation = new DoubleAnimation(100.0, dur);
shiftAnimation.AutoReverse = true;
sb.Children.Add(shiftAnimation);
Storyboard.SetTarget(shiftAnimation, myBox);
Storyboard.SetTargetProperty(shiftAnimation, new PropertyPath("RenderTransform.X"));
sb.Seek(TimeSpan.FromSeconds(0.5));
sb.Begin();
you could set the timeclock to 100% of the animationduration so when the animation starts, it will skip the non-reversed part!
Edit:
if Duration is set to 0:0:1.5 you apply a new timeline to your animation set to 0:0:1.5. Autoreverse has to be set to on and then you yust have to start the animation.
Edit 2:
TranslateTransform transform = new TranslateTransform(0.0, 0.0);
myBox.RenderTransform = transform;
sb = new Storyboard();
Duration dur = new Duration(TimeSpan.FromSeconds(0.5));
DoubleAnimation shiftAnimation = new DoubleAnimation(100.0, dur);
shiftAnimation.AutoReverse = true;
sb.Children.Add(shiftAnimation);
Storyboard.SetTarget(shiftAnimation, myBox);
Storyboard.SetTargetProperty(shiftAnimation, new PropertyPath("RenderTransform.X"));
sb.Begin();
sb.Pause();
sb.Seek(sb.Duration.TimeSpan);
sb.Resume();
I have found that the following code works nicely:
private bool reverse=false;
TimeSpan animationDuration = TimeSpan.FromMilliseconds(500);
Storyboard storyboard1 = new Storyboard();
private void prepareStoryBoard(Button btn)
{
btn.RenderTransform = new CompositeTransform();
DoubleAnimation animationShrink = new DoubleAnimation() { To = 0,
Duration =animationDuration , FillBehavior = FillBehavior.HoldEnd };
storyboard1.Children.Add(animationShrink);
Storyboard.SetTarget(animationShrink, btn);
Storyboard.SetTargetProperty(animationShrink,
"(Button.RenderTransform).(CompositeTransform.ScaleX)");
}
private void toggleAnimate()
{
if(reverse==false)
{
storyboard1.AutoReverse = false;
storyboard1.Begin();
reverse=true;
}
else
{
storyboard1.AutoReverse = true;
storyboard1.Seek(animationDuration);
storyboard1.Resume();
reverse = false;
}
}
The first time toggleAnimate() is called, the animation is executed in the normal direction, the second time toggleAnimate() is invoked the animation is reversed.
Related
I'm using DoubleAnimation and Storyboard to control Opacity of MediaElement. The animation itself works fine, but if I call Disappear and playVid after several seconds, the Opacity of the player remains 0! What's the problem?
public void playVid(string source, bool isMainVid)
{
player.Opacity = 1;
player.Play(); //player.Opacity is 0 here!
}
public void Disappear()
{
DoubleAnimation fadeOut = new DoubleAnimation
{
To = 0,
Duration = new Duration(TimeSpan.FromMilliseconds(1000))
};
fadeOut.Completed += (s, e) =>
{
player.Stop();
};
var storyboard = new Storyboard();
storyboard.Children.Add(fadeOut);
Storyboard.SetTargetName(fadeOut, player.Name);
Storyboard.SetTargetProperty(fadeOut, new PropertyPath(OpacityProperty));
storyboard.Begin(mainGrid, HandoffBehavior.SnapshotAndReplace); //mainGrid is player's parent
}
Use FillBehavior equal to Stop, but also set the Opacity of your player to the final opacity value (in the Completed handler). Otherwise, it will be reset to its value before the animation.
var fadeOut = new DoubleAnimation
{
To = 0,
Duration = new Duration(TimeSpan.FromMilliseconds(1000)),
FillBehavior = FillBehavior.Stop
};
fadeOut.Completed += (s, e) =>
{
player.Stop();
player.Opacity = 0;
};
See this post for other approaches.
I'm working on the UI animations with my UWP project. When I combined the Storyboard with translate transform based on user's manipulation in a control, it's seem like the tranlastion didn't work anymore after the Storyboard had begun its animation.
After researching, I thought this is the reason -
that I can't change the value of a property after it has been animated, and I have to remove the Storyboard,... Unfortunately this article is support for WPF so I can't apply to my UWP project. So does anyone know any solutions for this situation ?
XAML:
<Frame x:Name="StoreFrame"
Grid.Row="1"
Grid.RowSpan="1"
MaxWidth="400"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ManipulationDelta="StoreFrame_OnManipulationDelta"
ManipulationMode="TranslateY">
<Frame.RenderTransform>
<CompositeTransform x:Name="Transform" />
</Frame.RenderTransform>
</Frame>
Manipulation event handler:
private void StoreFrame_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Transform.TranslateY += e.Delta.Translation.Y;
}
My Storyboard animation:
private void ShowStoreFrameAnimation()
{
VerticalAnimatiton(StoreFrame, StoreFrame.ActualHeight, 0);
}
public void VerticalAnimatiton(DependencyObject controlObject,
double fromValue, double toValue, double durationTime = 1000)
{
//The animation things
var storyboard = new Storyboard();
var duration = new Duration(TimeSpan.FromMilliseconds(durationTime));
var ease = new CubicEase { EasingMode = EasingMode.EaseOut };
var animation = new DoubleAnimation
{
EasingFunction = ease,
Duration = duration
};
storyboard.Children.Add(animation);
animation.From = fromValue;
animation.To = toValue;
animation.EnableDependentAnimation = false;
Storyboard.SetTarget(animation, controlObject);
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard.Begin();
}
How to remove Storyboard after begin it in UWP?
I can't change the value of a property after it has been animated, and I have to remove the Storyboard.
As you said that we can't change the value of a property after it has been animated. And there is no viable way to remove the storyboard. But you can add the new storyboard for same property that has been used. the following code is a workaround for your scenario.
Add the new storyboard to the StoreFrame_OnManipulationDelta event method.
private void StoreFrame_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Transform.TranslateY += e.Delta.Translation.Y;
var duration = new Duration(TimeSpan.FromMilliseconds(1000));
var ease = new CubicEase { EasingMode = EasingMode.EaseOut };
var animation = new DoubleAnimation
{
EasingFunction = ease,
Duration = duration
};
var conStoryboard = new Storyboard();
conStoryboard.Children.Add(animation);
animation.From = Transform.TranslateY;
animation.To = Transform.TranslateY += e.Delta.Translation.Y;
animation.EnableDependentAnimation = false;
Storyboard.SetTarget(animation, StoreFrame);
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
conStoryboard.Begin();
}
Animation effect
I want to apply a Blink animation to a Canvas so that all the objects I have drawn on it would blink with it.
I have been somewhat successful using the code below which changes the Opacity property of the Canvas rather fast to achieve this effect but I'm kinda not satisfied with it.
I would prefer a pure blink without any FadeOut/FadeIn as in my current code. How can I do it the right way?
var blinkAnimation = new DoubleAnimation
{
From = 1,
To = 0
};
var blinkStoryboard = new Storyboard
{
Duration = TimeSpan.FromMilliseconds(500),
RepeatBehavior = RepeatBehavior.Forever,
AutoReverse = true
};
Storyboard.SetTarget(blinkAnimation, MyCanvas);
Storyboard.SetTargetProperty(blinkAnimation, new PropertyPath(OpacityProperty));
blinkStoryboard.Children.Add(blinkAnimation);
MyCanvas.BeginStoryboard(blinkStoryboard);
Maybe I can do that using the VisibilityProperty but I couldn't get it right.
You might use a second animation with an appropriate BeginTime:
var switchOffAnimation = new DoubleAnimation
{
To = 0,
Duration = TimeSpan.Zero
};
var switchOnAnimation = new DoubleAnimation
{
To = 1,
Duration = TimeSpan.Zero,
BeginTime = TimeSpan.FromSeconds(0.5)
};
var blinkStoryboard = new Storyboard
{
Duration = TimeSpan.FromSeconds(1),
RepeatBehavior = RepeatBehavior.Forever
};
Storyboard.SetTarget(switchOffAnimation, MyCanvas);
Storyboard.SetTargetProperty(switchOffAnimation, new PropertyPath(Canvas.OpacityProperty));
blinkStoryboard.Children.Add(switchOffAnimation);
Storyboard.SetTarget(switchOnAnimation, MyCanvas);
Storyboard.SetTargetProperty(switchOnAnimation, new PropertyPath(Canvas.OpacityProperty));
blinkStoryboard.Children.Add(switchOnAnimation);
MyCanvas.BeginStoryboard(blinkStoryboard);
If you want on/off state for your animation you can change your animation to DoubleAnimationUsingKeyFrames
var blinkAnimation = new DoubleAnimationUsingKeyFrames();
blinkAnimation.KeyFrames.Add(new DiscreteDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0))));
blinkAnimation.KeyFrames.Add(new DiscreteDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(250))));
var blinkStoryboard = new Storyboard
{
Duration = TimeSpan.FromMilliseconds(500),
RepeatBehavior = RepeatBehavior.Forever,
};
Storyboard.SetTarget(blinkAnimation, MyCanvas);
Storyboard.SetTargetProperty(blinkAnimation, new PropertyPath(OpacityProperty));
blinkStoryboard.Children.Add(blinkAnimation);
blinkStoryboard.Begin();
I am working on Windows Store 8.1 App project and would like to create a custom progressbar/gauge control. The class internally measures some values and displays them as text and as progressbar/gauge. Value changes should be animated:
public class CustomGauge : UserControl{
private static readonly DependencyProperty SpeedProperty = DependencyProperty.Register("Speed", typeof(double), typeof(CustomGauge), new PropertyMetadata(null, new PropertyChangedCallback(SpeedChanged)));
private double Speed{
get { return (double)GetValue(SpeedProperty ); }
set { SetValue(SpeedProperty , value); }
}
// In CustomGauge.xaml a TextBlock uses a Binding to Speed to display the value
private static void SpeedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
CustomGauge gauge = d as CustomGauge;
if (gauge != null)
gauge.DrawSpeed();
}
private void OnSpeedChanged(double newSpeedValue) {
DoubleAnimation animation = new DoubleAnimation();
animation.EnableDependentAnimation = true;
animation.Duration = new Duration(TimeSpan.FromSeconds(1.5));
animation.To = newSpeedValue;
PowerEase easing = new PowerEase();
easing.Power = 5.0;
easing.EasingMode = EasingMode.EaseOut;
animation.EasingFunction = easing;
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(animation);
Storyboard.SetTarget(animation, this);
Storyboard.SetTargetProperty(animation, "Speed");
storyboard.Begin();
}
private void DrawSpeed() {
...
}
}
While the text of the XAML TextBlock which uses a binding to "Speed" is animated the gauge/progressbar just jumps from the old value to the new one without animation. This is because SpeedChanged(...) is only called once with the new value and not for every intermediate value of the animation from old to new value.
How can I solve this and use the animation to change the gauge/progressbar as well?
One thing you could do is create a "Step Size" and "Step Time" for your animation. It will take the value given, find the difference, and cut that difference into chunks, animating each.
Note: I am using the WinRTXamlToolkit for their awesome StoryBoard Extensions. It's arguably unnecessary, and if you choose to not incorporate the whole library, it's easy to add that one extension.
// Set this to something sensible for your speeds.
// You may want to have it be calculated on the fly,
// Such as by doing an even distribution of steps,
// Possibly with a minimum value for a step to be. Up to you.
private const double StepSize = 5;
private const double StepTime = 1.5;
private async void OnSpeedChanged(double newSpeedValue) {
DoubleAnimation animation = new DoubleAnimation();
animation.EnableDependentAnimation = true;
PowerEase easing = new PowerEase();
easing.Power = 5.0;
easing.EasingMode = EasingMode.EaseOut;
animation.EasingFunction = easing;
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(animation);
Storyboard.SetTarget(animation, this);
Storyboard.SetTargetProperty(animation, "Speed");
// You may want to have this be an absolute value and store the sign
// in case there is both a positive and negative change in speed
var difference = newSpeedValue - Speed;
for(double stepValue = Speed + StepSize; i < difference; i += StepSize)
{
animation.Duration = new Duration(TimeSpan.FromSeconds(StepTime));
animation.To = stepValue;
await storyboard.BeginAsync();
}
// do the last one
animation.Duration = new Duration(TimeSpan.FromSeconds(StepTime));
animation.To = newSpeedValue;
await storyboard.BeginAsync();
}
One last thing to note is that I've made OnSpeedChanged async. To SpeedChanged method, it will just "set it and forget it" in that it will call it and immediately continue. If your speed changes regularly, you'll need to do some chaining effect such as cancelling the last animations with a CancellationToken. Another option is to keep a queue of the running animation tasks and run them sequentially. This may or may not be a good idea for a number of reasons.
Hope this helps and happy coding!
Im attempting to create a storyboard in C# not XAML to control scaling of an image, so i can easily alter the ScaleTransform.ScaleX and ScaleTransform.ScaleY values in a DoubleAnimation.
So far I believe i have created the animations and added it to a new storyboard, and the appropriate values change in the C# when i check with breakpoints, but it's not actually working.
My C# looks like this:
public void SetStatistics(double[] value)
{
Storyboard sb = new Storyboard();
sb.Duration = new Duration(TimeSpan.FromSeconds(1));
//Wedge Animation X-Axis
DoubleAnimation wax = new DoubleAnimation();
//Wedge Animation Y-Axis
DoubleAnimation way = new DoubleAnimation();
ScaleTransform st = ((ScaleTransform)FindName("wedge1scale"));
wax = new DoubleAnimation();
way = new DoubleAnimation();
wax.Duration = sb.Duration;
way.Duration = sb.Duration;
sb.Children.Add(wax);
sb.Children.Add(way);
Storyboard.SetTargetProperty(wax, new PropertyPath("(ScaleTransform.ScaleX)"));
//End scale from calculation with an Enum value
wax.To = StatMin + (StatPercent * value[1]);
//Start scale from current value
wax.From = st.ScaleX;
Storyboard.SetTargetProperty(way, new PropertyPath("(ScaleTransform.ScaleY)"));
//End scale from calculation with an Enum value
way.To = StatMin + (StatPercent * value[1]);
//Start scale from current value
way.From = st.ScaleY;
Storyboard.SetTarget(wax, Wedge1);
Storyboard.SetTarget(way, Wedge1);
Main.Resources.Add("animation", sb);
sb.Begin();
}
My XAML Image is like this:
<Image x:Name="Wedge1" Source="Images/Wedge.png" RenderTransformOrigin="-0.008,1.027" Height="682" Width="263" Canvas.Left="869.04" Canvas.Top="-158.251" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="wedge1scale" ScaleX="0.555" ScaleY="0.555"/>
<TranslateTransform X="88.102" Y="-4.381"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
Thanks in advance for any info :)
The problem is your PropertyPath. You would have to write RenderTransform.Children[0].ScaleX and RenderTransform.Children[0].ScaleY in order to animate the ScaleX and ScaleY properties of the first child of the TransformGroup in the Image's RenderTransform.
var wax = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
var way = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
wax.To = ...
way.To = ...
Storyboard.SetTargetProperty(
wax, new PropertyPath("RenderTransform.Children[0].ScaleX"));
Storyboard.SetTargetProperty(
way, new PropertyPath("RenderTransform.Children[0].ScaleY"));
Storyboard.SetTarget(wax, Wedge1);
Storyboard.SetTarget(way, Wedge1);
var sb = new Storyboard();
sb.Children.Add(wax);
sb.Children.Add(way);
sb.Begin();
And it would be less code without the Storyboard:
var wax = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
var way = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
wax.To = ...
way.To = ...
wedge1scale.BeginAnimation(ScaleTransform.ScaleXProperty, wax);
wedge1scale.BeginAnimation(ScaleTransform.ScaleYProperty, way);
And I guess in your case it isn't necessary to set the From property, as the animations start from the current property values by default.