C# 动画跟随拖动运动

下面代码的目的是拇指跟随鼠标水平移动。该代码在鼠标事件时调用，因此动画的目标值会不断更新

在代码中，

offset

是当前鼠标水平位置。问题是，拇指的动画没有完全动画到指定的

偏移量

，但似乎总是在较小或较大的值处停止（取决于鼠标是向左还是向右拖动）

SeekAlignedToLastTick（）

会影响动画的行为，尽管我无法通过阅读文档了解该函数的作用

如何设置拇指动画，使其平滑地跟随拖动事件

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

---

我试图解决您的问题，因此我创建了一个Silverlight应用程序，并添加了一个用于测试的边界元素

<Border x:Name="Thumb" VerticalAlignment="Top" HorizontalAlignment="Left" Width="50" height="25" Background="#ff0000" />

希望对您有所帮助：）

问候,

阿布·希拉尔先生

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