0
Answer

No motion animation of objects

Alexandr Laketych

Alexandr Laketych
6y
529
1

  2. <!--ANIMATED ELLIPSES TO CORNERS-->  
  3.     <Storyboard x:Key="EllipseIniteKnob" Storyboard.TargetProperty="(Canvas.Left)">  
  4.         <DoubleAnimation To="15" Duration="00:00:4" >  
  5.             <DoubleAnimation.EasingFunction>  
  6.                 <ElasticEase Oscillations="1"   
  7.                              Springiness="27"   
  8.                              EasingMode="EaseOut">  
  9.                 </ElasticEase>  
  10.             </DoubleAnimation.EasingFunction>  
  11.         </DoubleAnimation>  
  12.     </Storyboard>  
  13.   
  14.     <Storyboard x:Key="EllipseFiniteKnob" Storyboard.TargetProperty="(Canvas.Left)">  
  15.         <DoubleAnimation To="420" Duration="00:00:4">  
  16.             <DoubleAnimation.EasingFunction>  
  17.                 <ElasticEase Oscillations="1"   
  18.                              Springiness="27"   
  19.                              EasingMode="EaseOut">  
  20.                 </ElasticEase>  
  21.             </DoubleAnimation.EasingFunction>  
  22.         </DoubleAnimation>  
  23.     </Storyboard>  
  24.   
  25.       
  26.     <Storyboard x:Key="EllipseIniteShadow" Storyboard.TargetProperty="(Canvas.Left)">  
  27.         <DoubleAnimation To="0" Duration="00:00:4" >  
  28.             <DoubleAnimation.EasingFunction>  
  29.                 <ElasticEase Oscillations="1"   
  30.                              Springiness="27"   
  31.                              EasingMode="EaseOut">  
  32.                 </ElasticEase>  
  33.             </DoubleAnimation.EasingFunction>  
  34.         </DoubleAnimation>  
  35.     </Storyboard>  
  36.       
  37.     <Storyboard x:Key="EllipseFiniteShadow" Storyboard.TargetProperty="(Canvas.Left)">  
  38.         <DoubleAnimation To="405" Duration="00:00:4" Storyboard.TargetName="CircleShadow">  
  39.             <DoubleAnimation.EasingFunction>  
  40.                 <ElasticEase Oscillations="1"   
  41.                              Springiness="27"   
  42.                              EasingMode="EaseOut">  
  43.                 </ElasticEase>  
  44.             </DoubleAnimation.EasingFunction>  
  45.         </DoubleAnimation>  
  46.     </Storyboard>  
  1. <Canvas>  
  2.             <Rectangle x:Name="ToggleSwitch" Width="665" Height="260" Style="{StaticResource BaseButton}"   ></Rectangle>  
  3.             <Label     x:Name="SwitchLables"                          Style="{StaticResource SwitchLabel}"   
  4.                        Canvas.Left="322" Canvas.Top="88"                                                    >SWITCH</Label>  
  5.             <Ellipse   x:Name="CircleShadow" Width="260" Height="260"  Fill="{StaticResource CircleBehind}"  
  6.                        Opacity="0.7"  
  7.                          
  8.                        MouseMove="CircleKnob_MouseMove"  
  9.                        >  
  10.             </Ellipse>  
  11.             <Ellipse   x:Name="CircleKnob" Width="230" Height="230"  Style="{StaticResource EllipseEffect}"  
  12.                        Fill="{StaticResource Circle}"   
  13.                        Canvas.Left="14" Canvas.Top="15"  
  14.                          
  15.                        MouseDown="CircleKnob_MouseDown"  
  16.                        MouseMove="CircleKnob_MouseMove"  
  17.                        MouseUp  ="CircleKnob_MouseUp"   >  
  18.                 <Ellipse.BitmapEffect>  
  19.                     <DropShadowBitmapEffect Direction="270" ShadowDepth="7" Opacity="0.5" Softness="1"     ></DropShadowBitmapEffect>  
  20.                 </Ellipse.BitmapEffect>  
  21.             </Ellipse>  
  22.         </Canvas>  
  1. public partial class Switcher : Window  
  2.     {  
  3.         public Switcher()  
  4.         {  
  5.             InitializeComponent();  
  6.         }  
  7.   
  8.         bool Action = false;  
  9.         double   InitPxls = 15;  
  10.         double FinitePxls = 420;  
  11.         double Movement;  
  12.         Point Point;  
  13.          
  14.         private void CircleKnob_MouseDown(object sender, MouseButtonEventArgs e)  
  15.         {  
  16.             Action = true;  
  17.             Point = Mouse.GetPosition(CircleKnob);  
  18.             Mouse.Capture(CircleKnob);  
  19.         }  
  20.   
  21.         private void CircleKnob_MouseMove(object sender, MouseEventArgs e)  
  22.         {  
  23.             if (Action)  
  24.             {  
  25.                 Movement = Canvas.GetLeft(CircleKnob) + Mouse.GetPosition(CircleKnob).X - Point.X;  
  26.   
  27.                 if (Movement > InitPxls && Movement < FinitePxls) {  
  28.                     Canvas.SetLeft(CircleKnob,   Movement);  
  29.                     Canvas.SetLeft(CircleShadow, Movement - 15);  
  30.                 }  
  31.             }  
  32.         }  
  33.   
  34.         private void CircleKnob_MouseUp(object sender, MouseButtonEventArgs e)  
  35.         {  
  36.             Action = false;  
  37.             Mouse.Capture(null);  
  38.   
  39.             Storyboard  ToInite = this.FindResource ("EllipseIniteKnob") as Storyboard;  
  40.             Storyboard ToFinite = this.FindResource("EllipseFiniteKnob") as Storyboard;  
  41.   
  42.   
  43.             Storyboard  ToIniteShadow = this.FindResource ("EllipseIniteShadow") as Storyboard;  
  44.             Storyboard ToFiniteShadow = this.FindResource("EllipseFiniteShadow") as Storyboard;  
  45.   
  46.             if (Movement < InitPxls + 210)  
  47.             {  
  48.   
  49.                 //Canvas.SetLeft(CircleKnob, InitPxls);  
  50.                 //Canvas.SetLeft(CircleShadow, InitPxls - 15);  
  51.   
  52.                 if (ToInite != null)  
  53.                 {  
  54.                     CircleKnob.  BeginStoryboard(ToInite);  
  55.                     CircleShadow.BeginStoryboard(ToIniteShadow);  
  56.                 }  
  57.             }  
  58.             else  
  59.             {  
  60.   
  61.                 //Canvas.SetLeft(CircleKnob, FinitePxls);  
  62.                 //Canvas.SetLeft(CircleShadow, FinitePxls - 15);  
  63.   
  64.                 if (ToFinite != null)  
  65.                 {  
  66.                     CircleKnob.  BeginStoryboard(ToFinite);  
  67.                     CircleShadow.BeginStoryboard(ToFiniteShadow);  
  68.                 }  
  69.             }  
  70.         }  
  71.     }  
There is a circle that has events to move along the X axis.
If the circle is not brought to the end of one of the final coordinates - the condition if -> it moves to the end.
BUT! Because it happens abruptly. I decided to add the animation.

Tryed to add animation, but now the animation of movement by user doesnt show. How to fix it?
Next Recommended Forum