0

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

在代码中，offset是当前鼠标的水平位置。问题是， thumb 的动画没有完全动画到指定的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);            
    }
4

1 回答 1

2

我试图解决你的问题，所以我创建了一个 Silverlight 应用程序并添加了一个 Border 元素进行测试。

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

无需设置“ From ”属性，因为DoubleAnimation对象可以自动从当前值继续到“ To ”属性。

而且您将Duration设置为Storyboard，这会导致DoubleAnimation在未达到“ To ”值的情况下切断其动画，您需要将Duration属性设置为DoubleAnimation本身。

也不需要调用 _ thumbStoryboard.Stop()，因为它会将当前动画重置为第一个TranslateX值。

这是更新后的“UpdateUserInterface”函数代码，带有注释：

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

希望对你有帮助:)

问候，

莫尼尔·阿布·希拉尔

于 2012-05-29T14:02:49.667 回答