How to create multiple parallel animations to the same element? - wpf

Question

I'm trying to set multiple parallel animations for the same element in code-behind. Well, when im trying to pull "Moving" (RenderTransorm.X + Y) and Opacity together, it runs perfect. But when im trying to add scale animation or Width-Height animation, only the latest animation is running.
What im i doing wrong? - or, is there any elegant way to do this programmatically?
private void StartAnimation(TimeSpan startOffsetTime, TimeSpan duration)
{
if (TweetIsAnimated)
{
Globals.IsAnimating = true;
}
if (_hasAnimated)
{
return;
}
_hasAnimated = true;
StopAnimation();
EnsureTransform();
var storyboard = new Storyboard();
//--------------------------HORIZONTAL ANIMATION-------------------------
if (MoveStory)
{
var horizontalAnimation = new DoubleAnimation(FromHorizontalOffset, 0, duration)
{
EasingFunction = GetFuncByName(EasingFuncType)
//new CubicEase { EasingMode = EasingMode.EaseOut }
};
storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
storyboard.Children.Add(horizontalAnimation);
Storyboard.SetTarget(horizontalAnimation, AssociatedObject);
Storyboard.SetTargetProperty(horizontalAnimation, new PropertyPath("RenderTransform.X"));
storyboard.BeginTime = startOffsetTime;
storyboard.Begin();
}
//------------------------------------------------------------------------
//--------------------------VERTICAL ANIMATION----------------------------
if (MoveStory)
{
var veritcalAnimation = new DoubleAnimation(FromVerticalOffset, 0, duration)
{
EasingFunction = GetFuncByName(EasingFuncType)
};
storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
storyboard.Children.Add(veritcalAnimation);
Storyboard.SetTarget(veritcalAnimation, AssociatedObject);
Storyboard.SetTargetProperty(veritcalAnimation, new PropertyPath("RenderTransform.Y"));
storyboard.BeginTime = startOffsetTime;
storyboard.Begin();
}
//------------------------------------------------------------------------
//--------------------------OPACITY ANIMATION-----------------------------
if (OpacityStory)
{
var opacityAnimation = new DoubleAnimationUsingKeyFrames();
opacityAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(OpacityStart, TimeSpan.Zero));
opacityAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(OpacityStart, startOffsetTime,
GetFuncByName(EasingFuncType)));
opacityAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1,
duration + startOffsetTime +
TimeSpan.FromMilliseconds(
Duration.TotalMilliseconds/2),
GetFuncByName(EasingFuncType)));
storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
storyboard.Children.Add(opacityAnimation);
Storyboard.SetTarget(opacityAnimation, AssociatedObject);
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(UIElement.OpacityProperty));
storyboard.Begin();
}
//------------------------------------------------------------------------
//--------------------------SCALE ANIMATION------------------------------
if (ScaleStory)
{
ScaleTransform scaleTransform1 = new ScaleTransform(1, 1, AssociatedObject.ActualWidth, AssociatedObject.ActualHeight);
AssociatedObject.RenderTransformOrigin = new Point(1, ScaleStart);
AssociatedObject.RenderTransform = scaleTransform1;
var EasingFunction1 = new BackEase() { EasingMode = EasingMode.EaseOut, Amplitude = AmplitudeNow };
var scaleAnimation = new DoubleAnimationUsingKeyFrames();
TimeSpan time = duration + startOffsetTime + TimeSpan.FromMilliseconds(Duration.TotalMilliseconds / 2);
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(ScaleStart, TimeSpan.Zero));
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(ScaleStart, startOffsetTime, EasingFunction1));
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1, time, EasingFunction1));
storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
storyboard.Children.Add(scaleAnimation);
Storyboard.SetTarget(scaleAnimation, AssociatedObject);
Storyboard.SetTargetProperty(scaleAnimation, new PropertyPath("RenderTransform.ScaleY"));
storyboard.Begin();
}
//------------------------------------------------------------------------
//--------------------------RESIZE ANIMATION------------------------------
if (ResizeStory)
{
DoubleAnimation widthAnimation = new DoubleAnimation
{
From = WidthStart,
To = AssociatedObject.ActualWidth,
Duration = Duration
};
DoubleAnimation heightAnimation = new DoubleAnimation
{
From = HeightStart,
To = AssociatedObject.ActualHeight,
Duration = Duration
};
storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
storyboard.Children.Add(widthAnimation);
Storyboard.SetTarget(widthAnimation, AssociatedObject);
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(FrameworkElement.WidthProperty));
storyboard.BeginTime = startOffsetTime;
storyboard.Begin();
storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
storyboard.Children.Add(heightAnimation);
Storyboard.SetTarget(heightAnimation, AssociatedObject);
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(FrameworkElement.HeightProperty));
storyboard.BeginTime = startOffsetTime;
storyboard.Begin();
}
//------------------------------------------------------------------------
}

Answer 1

Do not create new storyboard!
Refactor your code like this:
var storyboard = new Storyboard();
storyboard.Completed += AnimationOnCompleted;
_storyboards.Add(storyboard, true);
if (MoveStory)
{
var horizontalAnimation = new DoubleAnimation(FromHorizontalOffset, 0, duration)
{
EasingFunction = GetFuncByName(EasingFuncType)
//new CubicEase { EasingMode = EasingMode.EaseOut }
};
storyboard.Children.Add(horizontalAnimation);
Storyboard.SetTarget(horizontalAnimation, AssociatedObject);
Storyboard.SetTargetProperty(horizontalAnimation, new PropertyPath("RenderTransform.X"));
}
// ... if else etc...
if (ResizeStory)
{
DoubleAnimation widthAnimation = new DoubleAnimation
{
From = WidthStart,
To = AssociatedObject.ActualWidth,
Duration = Duration
};
DoubleAnimation heightAnimation = new DoubleAnimation
{
From = HeightStart,
To = AssociatedObject.ActualHeight,
Duration = Duration
};
storyboard.Children.Add(widthAnimation);
Storyboard.SetTarget(widthAnimation, AssociatedObject);
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(FrameworkElement.WidthProperty));
storyboard.Children.Add(heightAnimation);
Storyboard.SetTarget(heightAnimation, AssociatedObject);
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(FrameworkElement.HeightProperty));
}
storyboard.BeginTime = startOffsetTime;
storyboard.Begin();