I am trying to implement a translation animation on a Grid in Windows Phone 8.
The behavior that I want to implement is that when the user drags from left to right a new panel comes from the left(in animation) and reverse happens when the user drags from right to left.
For this I have implemented the following code which is called on Manipulation_Completed :
public Storyboard AnimateContent(int direction)
{
DoubleAnimation animation = new DoubleAnimation();
if (direction == 1)
{ //content_trans is the object of composite transform of grid
animation.From =content_trans.TranslateX;
animation.To = 370;
}
else if(direction==0)
{
animation.From = content_trans.TranslateX;
animation.To = 0;
}
animation.Duration = new TimeSpan(0,0,0,0,500);
Storyboard.SetTarget(animation, Content);
Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
Storyboard sb = new Storyboard();
sb.Children.Add(animation);
return sb;
}
Now problem I am facing is that after calling this function(and calling begin() on storyboard object), when I am writing
content_trans.TranslateX=250;//or any other value of my choice
it is not being reflected on the screen.
I want to change these values because I writing this line of code in Manipulation_Delta , so that the user can have a feeling of dragging something, but it is not being reflected after animation.
This is because animated values take precedence over local values. See Dependency Property Value Precedence
If you want to set the value yourself, you will need to stop the animation first.
EDIT: If you want to be able to drag after the animation, then set the END location manually just before animating, and tell the animation to stop applying itself when it finishes with:
animation.FillBehaviour = FillBehaviour.Stop;
This means that when the animation finishes, your local values will apply.
Related
I have a very simple project where I need to animate the RenderTransform of an element, and then further manipulate such transform.
Please find as a reference an MVCE here: https://github.com/cghersi/UWPExamples/tree/master/RenderTransformAnimation.
The scenario is the following: there is a ScrollViewer m_scrollView, with a Canvas content m_zoomView.
For the sake of the example we also have a CompositeTransform m_zoomViewTransform = m_zoomView.RenderTransform.
I use the following method to manipulate the RenderTransform, either with or without an animation:
private void SetEffectiveOffsetOfScrollView(Point newOffset, bool isAnimated)
{
if (isAnimated)
{
TimeSpan dur = TimeSpan.FromSeconds(0.2);
Storyboard sb = new Storyboard { Duration = dur };
DoubleAnimation animationX = new DoubleAnimation
{
To = newOffset.X,
Duration = dur,
AutoReverse = false
};
DoubleAnimation animationY = new DoubleAnimation
{
To = newOffset.Y,
Duration = dur,
AutoReverse = false
};
sb.Children.Add(animationX);
sb.Children.Add(animationY);
Storyboard.SetTarget(animationX, m_zoomViewTransform);
Storyboard.SetTarget(animationY, m_zoomViewTransform);
Storyboard.SetTargetProperty(animationX, "CompositeTransform.TranslateX");
Storyboard.SetTargetProperty(animationY, "CompositeTransform.TranslateY");
sb.Begin();
sb.Completed += (sender, o) =>
{
m_zoomViewTransform.TranslateX = newOffset.X;
m_zoomViewTransform.TranslateY = newOffset.Y;
};
}
else
{
m_zoomViewTransform.TranslateX = newOffset.X;
m_zoomViewTransform.TranslateY = newOffset.Y;
}
}
Now, if I use SetEffectiveOffsetOfScrollView() with isAnimated = true, I am not able to change the RenderTransform anymore, or at least I don't see any update to the UI anymore.
In the MVCE I added a button that invokes the SetEffectiveOffsetOfScrollView() method with isAnimated = true, and I added a Manipulation event to pan the m_zoomView Canvas: as soon as I click on the button, I am no more able to pan the Canvas.
How can I animate the transformation, still being able to see the updates to the UI after this action, using SetEffectiveOffsetOfScrollView() with animate=false?
This is due to dependency property value precedence, as described here:
https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/dependency-properties-overview#dependency-property-value-precedence
In this repro, the Storyboard is still active, due to the default FillBehavior=HoldEnd on the DoubleAnimations. Since those animations are still alive, the animated value gets used, even as new local values get set on the isAnimated=false case.
The easy fix is to call sb.Stop() in the Storyboard's Completed handler, after you've set the new local values to hold. This will stop the animations, removing the Animated values they are holding, and allow the Local values to be used.
Say I start a four-second DoubleAnimation on the Canvas.Left property of a control that animates the value from its current value to 100 and that animation was started by calling BeginAnimation on that control in code-behind.
void Animate(Control someControlOnCanvas, int newX){
var canvasLeftAnimation = new DoubleAnimation();
canvasLeftAnimation.To = newX;
canvasLeftAnimation.FillBehavior = FillBehavior.Stop;
canvasLeftAnimation.Duration = new Duration(TimeSpan.FromSeconds(4));
canvasLeftAnimation.Completed += (s, e) => {
Canvas.SetLeft(targetButton, x);
};
someControlOnCanvas.BeginAnimation(Canvas.LeftProperty, canvasLeftAnimation);
}
Animate(somethingToMove, 100);
Say half-way through that animation--at the two-second mark--I need to cancel the current animation and start a new one with a new To position (the From position would be wherever it is right now) that's 100 past where the first animation would end (i.e. not where it currently is at 50, but where it's supposed to be, which is 100, so adding another 100 would yield a new target of 200.)
If I try getting the current Left value, it's the animated value of 50. If I try getting the base value, it's where the animation started, which is zero since it's not officially updated until the completion handler fires.
So outside of manually adding a variable to track where things should be, how can I start a new animation that says 'Go to the original end, plus 100?'
My thoughts are:
Get the existing/current animation
Get it's To value
Start a new animation with the previous animation's To value, plus 100
What I'm stuck on is getting #1.
...or am I going about this all wrong?
i am trying to create a animation using grid. it's a login screen. whenever user taps forget password i want the second grid to animate from top and slide till it stops at center and on tap it's visibility changes. i know how to do it using blend but the thing is i hav a compulsion for doing it from code behind. For that i am using doublekeyframe class. Having real trouble in knowing where is the issue in code behind for animating the second grid. Don't know what the issue and how to animate so serious help needed.
here is my code behind:
Grid gd= this.FindName("SecondaryGrid") as Grid;
DoubleAnimationUsingKeyFrames dm=new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame l1=new LinearDoubleKeyFrame();
LinearDoubleKeyFrame l2=new LinearDoubleKeyFrame();
l1.Value=-703.203;
l1.KeyTime=TimeSpan.FromSeconds(0);
l2.Value=0;
l2.KeyTime=TimeSpan.FromSeconds(1);
dm.KeyFrames.Add(l1);
dm.KeyFrames.Add(l2);
dm.Duration=new Duration(TimeSpan.FromMilliseconds(3000));
Storyboard sb = new Storyboard();
sb.Children.Add(dm);
Storyboard.SetTarget(dm, gd);
Storyboard.SetTargetName(dm, gd.Name);
Storyboard.SetTargetProperty(dm, "Position");
sb.Begin();
SecondaryGrid.Visibility = Visibility.Visible;
Grid gd = this.FindName("SecondaryGrid") as Grid;
DoubleAnimationUsingKeyFrames dm = new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame l1 = new LinearDoubleKeyFrame();
LinearDoubleKeyFrame l2 = new LinearDoubleKeyFrame();
l1.Value = -703.203;
l1.KeyTime = TimeSpan.FromSeconds(0);
l2.Value = 0;
l2.KeyTime = TimeSpan.FromSeconds(1);
dm.KeyFrames.Add(l1);
dm.KeyFrames.Add(l2);
dm.Duration = new Duration(TimeSpan.FromMilliseconds(30000));
Storyboard sb = new Storyboard();
sb.Children.Add(dm);
Storyboard.SetTarget(dm, gd);
Storyboard.SetTargetName(dm, gd.Name);
Storyboard.SetTargetProperty(dm, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
sb.Begin();
Enjoy :)
EDIT
Well what I did was went to XAML and created a SecondaryGrid now in its properties went to render transform and clicked on edit and set Y value as 1 then I saw in XAML that we get
<Grid.RenderTransform>
<CompositeTransform TranslateX="0" TranslateY="1"/>
</Grid.RenderTransform>
So from this I knew that since there is no position property so I need to set targetProperty as render transform and in that I should Change the Y property since it needs to come from top to bottom which is present inside Composite Transform.TranslateY
I have a mini-game as part of a larger game I'm writing for Windows phone which uses a storyboard animation to move an arrow back and forth along a bar, which the user trying to stop it in the center.
The issue I'm having is when I stop the animation, you can visibily see the arrow being animated move back a frame.
I've tried many things:
animating with keyframes and without
animating by canvas.left or translate.X
after pausing/stopping the animation, manually setting the canvas.left to the getcanvas of the arrow
With the final option not working, I wonder if the animation is actually drawing a frame ahead before it actually sets the X/Canvas.Left, and the bounce back position is the true one
Here is my animation code:
double speed = .75;
miniGameStoryboard.Stop();
miniGameStoryboard.Children.Clear();
// setup
var _Translate = new TranslateTransform();
this.MiniGame1Arrow.RenderTransform = _Translate;
// translate (location X)
DoubleAnimationUsingKeyFrames _TranslateAnimateX = new DoubleAnimationUsingKeyFrames();
System.Windows.Media.Animation.Storyboard.SetTarget(_TranslateAnimateX, _Translate);
System.Windows.Media.Animation.Storyboard.SetTargetProperty(_TranslateAnimateX, new PropertyPath(TranslateTransform.XProperty));
_TranslateAnimateX.KeyFrames.Add(new LinearDoubleKeyFrame
{
KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)),
Value = 0
});
_TranslateAnimateX.KeyFrames.Add(new LinearDoubleKeyFrame
{
KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(speed)),
Value = 660
});
_TranslateAnimateX.AutoReverse = true;
_TranslateAnimateX.RepeatBehavior = RepeatBehavior.Forever;
_TranslateAnimateX.FillBehavior = FillBehavior.HoldEnd;
miniGameStoryboard.Children.Add(_TranslateAnimateX);
miniGameStoryboard.Begin();
The purpose of the code below is that a thumb follows a horizontal mouse movement. The code is called upon a mouse event, so the target value of the animation gets updated continuously.
In the code, offset is the current mouse horizontal position. The problem is, that the animation of the thumb doesn't fully animate to the specified offset, but always seems to be stopping at a value smaller or higher (depending if the mouse is dragged left or right).
The SeekAlignedToLastTick() influences the behavior of the animation, although I couldn't figure out what this function does by reading the documentation.
How can I animate the thumb, so that it follows smoothly the drag event?
private Storyboard _thumbStoryboard;
private DoubleAnimation _thumbAnimation = new DoubleAnimation();;
private CompositeTransform _thumbTransform = new CompositeTransform();
private void UpdateUserInterface(double offset)
{
var thumbItem = Thumb as FrameworkElement;
if (_thumbStoryboard == null)
{
Storyboard.SetTarget(_thumbAnimation, _thumbTransform);
_thumbStoryboard = new Storyboard();
_thumbStoryboard.Children.Add(_thumbAnimation);
thumbItem.RenderTransform = _thumbTransform;
_thumbStoryboard.Duration = new Duration(TimeSpan.FromMilliseconds(100));
_thumbAnimation.EasingFunction = new ExponentialEase();
}
double from = _thumbTransform.TranslateX;
_thumbStoryboard.Stop();
Storyboard.SetTargetProperty(_thumbAnimation, new PropertyPath("TranslateX"));
_thumbAnimation.From = from;
_thumbAnimation.To = offset;
_thumbStoryboard.Begin();
_thumbStoryboard.SeekAlignedToLastTick(TimeSpan.Zero);
}
I've tried to solve your issue, So I've created a Silverlight application and added a Border element for testing.
<Border x:Name="Thumb" VerticalAlignment="Top" HorizontalAlignment="Left" Width="50" height="25" Background="#ff0000" />
There was no need to set the "From" Property, since the DoubleAnimation object could automatically continue from the current Value to the "To" Property.
And you were setting the Duration to the Storyboard, which causes the DoubleAnimation to Cutoff its animation without reaching the "To" Value, You need to set the Duration Property to the DoubleAnimation itself instead.
Also there was no need to call _thumbStoryboard.Stop(), because it will reset the current animation to the first TranslateX Value.
Here is the updated "UpdateUserInterface" function code with comments:
private void UpdateUserInterface(double offset) {
var thumbItem = Thumb as FrameworkElement;
if ( _thumbStoryboard == null ) {
// UpdateLayout Method is update the ActualWidth Properity of the UI Elements
this.UpdateLayout();
// Applying the CompositeTransform on "thumbItem" UI Element
thumbItem.RenderTransform = _thumbTransform;
// Setting the Render Transform Origin to be the Center of X and Y
thumbItem.RenderTransformOrigin = new Point(0.5d, 0.5d);
// Setting the target of the DoubleAnimation to be the Thumb CompositeTransform
Storyboard.SetTarget(_thumbAnimation, _thumbTransform);
// Setting the Targeted Properity of the DoubleAnimation to be The "TranslateX" Properity
Storyboard.SetTargetProperty(_thumbAnimation, new PropertyPath("TranslateX"));
// Used QuinticEase instead of ExponentialEase
// and Added EaseOut to make the animation be more smoother.
_thumbAnimation.EasingFunction = new QuinticEase(){ EasingMode = EasingMode.EaseOut };
// Initializing the Storyboard
_thumbStoryboard = new Storyboard();
// Specifing the Duration of the DoubleAnimation not the StoryBoard
_thumbAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
// Adding the DoubleAnimation to the Children of the Storyboard
_thumbStoryboard.Children.Add(_thumbAnimation);
}
// Calculate the New Centered Position
double newPos = offset - (thumbItem.ActualWidth / 2);
// Set the New DoubleAnimation "To" Value,
// There is no need to set the "From" Value since it'll automatically continue from the current TranslateX Value
_thumbAnimation.To = newPos;
// Begin the animation.
_thumbStoryboard.Begin();
}
Hope that helps you :)
Regards,
Monir Abu Hilal