Question

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

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

Answer 1

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

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

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

您将持续时间设置为 Storyboard ，这会导致 DoubleAnimation 切断其动画而不会到达“ To “价值，您需要将持续时间属性设置为 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();
    }

希望能帮助你：）

此致

Monir Abu Hilal

动画遵循拖动动作

1 个答案: