Question

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);            
    }

Answer 1

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