0

以下のコードの目的は、マウスの水平方向の動きに親指を追従させることです。コードはマウス イベントで呼び出されるため、アニメーションのターゲット値は継続的に更新されます。

コードで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);            
    }
4

1 に答える 1

2

あなたの問題を解決しようとしたので、Silverlight アプリケーションを作成し、テスト用に Border 要素を追加しました。

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

DoubleAnimationオブジェクトは現在の値から「To 」プロパティに自動的に継続できるため、「 From」プロパティを設定する必要はありませんでした。

また、 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 に答える