Question

有一个圆圈有沿X轴移动的事件。如果圆没有到达最终坐标之一的末尾 - 条件是 - >＆gt;它移动到最后。但！因为它突然发生。我决定添加动画。尝试添加动画，但现在用户的动画动画不会显示。如何解决？

public partial class Switcher : Window
    {
        public Switcher()
        {
            InitializeComponent();
        }

        bool Action = false;
        double   InitPxls = 15;
        double FinitePxls = 420;
        double Movement;
        Point Point;

        private void CircleKnob_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Action = true;
            Point = Mouse.GetPosition(CircleKnob);
            Mouse.Capture(CircleKnob);
        }

        private void CircleKnob_MouseMove(object sender, MouseEventArgs e)
        {
            if (Action)
            {
                Movement = Canvas.GetLeft(CircleKnob) + Mouse.GetPosition(CircleKnob).X - Point.X;

                if (Movement > InitPxls && Movement < FinitePxls) {
                    Canvas.SetLeft(CircleKnob,   Movement);
                    Canvas.SetLeft(CircleShadow, Movement - 15);
                }
            }
        }

        private void CircleKnob_MouseUp(object sender, MouseButtonEventArgs e)
        {
            Action = false;
            Mouse.Capture(null);

            Storyboard  ToInite = this.FindResource ("EllipseIniteKnob") as Storyboard;
            Storyboard ToFinite = this.FindResource("EllipseFiniteKnob") as Storyboard;

            Storyboard  ToIniteShadow = this.FindResource ("EllipseIniteShadow") as Storyboard;
            Storyboard ToFiniteShadow = this.FindResource("EllipseFiniteShadow") as Storyboard;

            if (Movement < InitPxls + 210)
            {
                    CircleKnob.BeginStoryboard(ToInite);
                    CircleShadow.BeginStoryboard(ToIniteShadow);
            }
            else
            {
                    CircleKnob.BeginStoryboard(ToFinite);
                    CircleShadow.BeginStoryboard(ToFiniteShadow);
            }
        }
    }

XAML动画：

<!--ANIMATED ELLIPSES TO CORNERS-->
    <Storyboard x:Key="EllipseIniteKnob" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="15" Duration="00:00:4" >
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1" 
                             Springiness="27" 
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="EllipseFiniteKnob" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="420" Duration="00:00:4">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1" 
                             Springiness="27" 
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>


    <Storyboard x:Key="EllipseIniteShadow" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="0" Duration="00:00:4" >
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1" 
                             Springiness="27" 
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="EllipseFiniteShadow" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="405" Duration="00:00:4" Storyboard.TargetName="CircleShadow">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1" 
                             Springiness="27" 
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

XAML加价：

<Canvas>
            <Rectangle x:Name="ToggleSwitch" Width="665" Height="260" Style="{StaticResource BaseButton}"          >
            </Rectangle>
            <Label     x:Name="SwitchLables"                          Style="{StaticResource SwitchLabel}" 
                       Canvas.Left="322" Canvas.Top="88"                                                           >SWITCH</Label>
            <Ellipse   x:Name="CircleShadow" Width="260" Height="260"  Fill="{StaticResource CircleBehind}"
                       Opacity="0.7"

                       MouseMove="CircleKnob_MouseMove"
                       >
            </Ellipse>
            <Ellipse   x:Name="CircleKnob" Width="230" Height="230"  Style="{StaticResource EllipseEffect}"
                       Fill="{StaticResource Circle}" 
                       Canvas.Left="14" Canvas.Top="15"

                       MouseDown="CircleKnob_MouseDown"
                       MouseMove="CircleKnob_MouseMove"
                       MouseUp  ="CircleKnob_MouseUp"   >
                <Ellipse.BitmapEffect>
                    <DropShadowBitmapEffect Direction="270" ShadowDepth="7" Opacity="0.5" Softness="1"             ></DropShadowBitmapEffect>
                </Ellipse.BitmapEffect>
            </Ellipse>
        </Canvas>

这是完整的解决方案：rgho.st/7btcDwcb5

动画会阻止运动。怎么解决？

0 个答案: