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.
Related
I have a button event that causes smooth opacity and window minimize.
private void Button_WindowMinimize(object sender, EventArgs e)
{
DoubleAnimation WindowOpacity = new DoubleAnimation()
{
From = Opacity,
To = 0,
Duration = TimeSpan.FromMilliseconds(300)
};
WindowOpacity.Completed += (se, ex) => { Opacity = 1; WindowState = WindowState.Minimized; };
BeginAnimation(Window.OpacityProperty, WindowOpacity);
}
When the window is minimized, I cause a opacity Opacity = 1; (so that I can see a screenshot on the taskbar when mouseover).
Why does the assignment fail Opacity = 1;? The resulting opacity is set to zero. Why is this not working? Thanks
By default animations keep the final value after they are completed. If you want to reset the value after they are completed, you should set FillBehavior to Stop:
DoubleAnimation WindowOpacity = new DoubleAnimation()
{
From = Opacity,
To = 0,
Duration = TimeSpan.FromMilliseconds(300),
FillBehavior = FillBehavior.Stop
};
WindowOpacity.Completed += (se, ex) => { WindowState = WindowState.Minimized; };
BeginAnimation(Window.OpacityProperty, WindowOpacity);
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 am currently removing an element from the user interface by fading it out. This works as expected.
public void HideShape()
{
if (this.TangibleShape != null)
{
DoubleAnimation animation = new DoubleAnimation();
animation.From = 1.0;
animation.To = 0.0;
animation.AutoReverse = false;
animation.Duration = TimeSpan.FromSeconds(1.5);
Storyboard s = new Storyboard();
s.Children.Add(animation);
Storyboard.SetTarget(animation, this.TangibleShape.Shape);
Storyboard.SetTargetProperty(animation, new PropertyPath(ScatterViewItem.OpacityProperty));
s.Begin(this.TangibleShape.Shape);
s.Completed += delegate(object sender, EventArgs e)
{
// call UIElementManager to finally hide the element
UIElementManager.GetInstance().Hide(this.TangibleShape);
};
}
}
The problem is that I want to set the opacity to 1 again in some cases but the TangibleShape.Shape (it's a ScatterViewItem) ignores the command. If I fade out again, the element becomes visible and immediately starts fading out. I don't know how to fix this problem. Does anyone have a hint for me?
public void HideShape()
{
if (this.TangibleShape != null)
{
DoubleAnimation animation = new DoubleAnimation();
animation.From = 1.0;
animation.To = 0.0;
animation.AutoReverse = false;
animation.Duration = TimeSpan.FromSeconds(1.5);
animation.FillBehavior = FillBehavior.Stop; // needed
Storyboard s = new Storyboard();
s.Children.Add(animation);
Storyboard.SetTarget(animation, this.TangibleShape.Shape);
Storyboard.SetTargetProperty(animation, new PropertyPath(ScatterViewItem.OpacityProperty));
s.Completed += delegate(object sender, EventArgs e)
{
// call UIElementManager to finally hide the element
UIElementManager.GetInstance().Hide(this.TangibleShape);
this.TangibleShape.Shape.Opacity = 0.0; // otherwise Opacity will be reset to 1
};
s.Begin(this.TangibleShape.Shape); // moved to the end
}
}
Answer found here: http://social.msdn.microsoft.com/Forums/en-US/7d33ca82-2c02-4004-8b37-47edf4cca34e/scatterviewitem-and-
I am trying to create an animation but am having problems executing some code after the animation has occured. The animation code is as follows...
public static void Friend(Canvas canvas)
{
foreach (var element in canvas.Children.OfType<Image>())
{
var elementName = Regex.Split(element.Name, "_");
if (elementName[0] == "friend")
{
var slideDown = new DoubleAnimation
{
From = Canvas.GetBottom(element),
To = Canvas.GetBottom(element) - element.Height,
Duration = new Duration(TimeSpan.FromSeconds(1)),
AutoReverse = true
};
element.BeginAnimation(Canvas.BottomProperty, slideDown);
slideDown.Completed += (sender, e) => Test(sender, e, element, canvas);
}
}
}
The event to happen afterwards is...
var random = new Random();
element.Source = Core.StreamImage(Wardrobe.Friends[Wardrobe.RandomFriend()]);
Canvas.SetLeft(element, random.Next(0, (int)(canvas.ActualWidth - element.Width)));
// then reverse the previous animation.
As you can see, the event needs to keep the context of the animation in order for it to work but event handlers don't allow this. I have tried adding this code directly underneath the element.BeginAnimation but it is executed prematurely.
I have also tried splitting the parts of the animation up into seperate functions but of course you can't have multiple animations on one object as the functions don't get executed in order resulting in only the last section being played.
Here is the code i used to fix the problem i was having...
public static void Friend(Canvas canvas)
{
var random = new Random();
foreach (var element in canvas.Children.OfType<Image>())
{
var elementName = Regex.Split(element.Name, "_");
if (elementName[0] == "friend")
{
var slideDown = new DoubleAnimation
{
From = Canvas.GetBottom(element),
To = Canvas.GetBottom(element) - element.Height,
Duration = new Duration(TimeSpan.FromSeconds(1))
};
slideDown.Completed += (sender, e) =>
{
element.Source = Core.StreamImage(Wardrobe.Friends[Wardrobe.RandomFriend()]);
Canvas.SetLeft(element, random.Next(0, (int)(canvas.ActualWidth - element.Width)));
var slideUp = new DoubleAnimation
{
From = Canvas.GetBottom(element),
To = Canvas.GetBottom(element) + element.Height,
Duration = new Duration(TimeSpan.FromSeconds(1))
};
element.BeginAnimation(Canvas.BottomProperty, slideUp);
};
element.BeginAnimation(Canvas.BottomProperty, slideDown);
}
}
}
Try moving the event above the execution
public static void Friend(Canvas canvas)
{
foreach (var element in canvas.Children.OfType<Image>())
{
var elementName = Regex.Split(element.Name, "_");
if (elementName[0] == "friend")
{
var slideDown = new DoubleAnimation
{
From = Canvas.GetBottom(element),
To = Canvas.GetBottom(element) - element.Height,
Duration = new Duration(TimeSpan.FromSeconds(1)),
AutoReverse = true
};
slideDown.Completed += (sender, e) => Test(sender, e, element, canvas);
element.BeginAnimation(Canvas.BottomProperty, slideDown);
}
}
}
I'm not 100% but I think the Animation becomes Freezable after it executes, so we cant modify after
BTW, you can have multiple animations on a object but you need to use "StoryBoard".
Storyboard example:
var slideDown = new DoubleAnimation { From = 100, To = 200, Duration = new Duration(TimeSpan.FromSeconds(5)), AutoReverse = true };
var slideLeft = new DoubleAnimation { From = 100, To = 200, BeginTime = TimeSpan.FromSeconds(5), Duration = new Duration(TimeSpan.FromSeconds(5)), AutoReverse = true };
Storyboard storyBoard = new Storyboard();
storyBoard.Children.Add(slideDown);
storyBoard.Children.Add(slideLeft);
Storyboard.SetTargetName(slideDown, myCanvas.Name);
Storyboard.SetTargetName(slideLeft, myCanvas.Name);
Storyboard.SetTargetProperty(slideLeft, new PropertyPath(Canvas.LeftProperty));
Storyboard.SetTargetProperty(slideDown, new PropertyPath(Canvas.TopProperty));
myCanvas.BeginStoryboard(storyBoard);
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.