none
请问下述WPF 特效是怎么实现的呢? RRS feed

  • 问题

  • 具体就是一个托盘围绕着1/4的圆心,旋转出现;

    动画特效感觉很好,可是不知道 怎么实现的;

    大概是这样的,下述是描述的图片:

    2014年4月1日 2:06

答案

  • Hi,使用路径动画即可,具体请看以下链接

    http://msdn.microsoft.com/zh-cn/library/aa970561(v=vs.90).aspx

    2014年4月1日 4:11
  • 你好,

    你试试这两个属性吧,可以加速度和减速度,

    http://msdn.microsoft.com/en-us/library/ms746613(v=vs.110).aspx

    XAML:

    <StackPanel Margin="20">
    
            <Rectangle Name="nonAcceleratedOrDeceleratedRectangle" Fill="#9933FF" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <Rectangle Name="acceleratedRectangle" Fill="#3333FF" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <Rectangle Name="deceleratedRectangle" Fill="#33FF66" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <Rectangle Name="acceleratedAndDeceleratedRectangle" Fill="#CCFF33" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <!-- Create a button to start the animations. -->
            <Button Margin="0,30,0,0" HorizontalAlignment="Left"
          Content="Start Animations">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
    
                                <!-- Creates an animation without acceleration or deceleration for comparison. -->
                                <DoubleAnimation         
                                    Storyboard.TargetName="nonAcceleratedOrDeceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    Duration="0:0:10" From="20" To="400" />
    
                                <!-- Creates an animation that accelerates through 40% of its duration. -->
                                <DoubleAnimation 
                                    Storyboard.TargetName="acceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    AccelerationRatio="0.4" Duration="0:0:10" From="20" To="400" />
    
                                <!-- Creates an animation that decelerates through 60% of its duration. -->
                                <DoubleAnimation 
                                    Storyboard.TargetName="deceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />
    
                                <!-- Creates an animation that accelerates through 40% of its duration and
                                    decelerates through the 60% of its duration. -->
                                <DoubleAnimation 
                                    Storyboard.TargetName="acceleratedAndDeceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>

    另外一个思路,可以分区域,然后给定不同的动画时间。这样可以达到加速和减速的效果。

    谢谢!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2014年4月2日 5:19
    版主

全部回复

  • 请教上述WPF 动画特效的实现方式

    在CodePlex和MSDN上找了还没发现和我想要的类似效果

    2014年4月1日 2:07
  • Hi,使用路径动画即可,具体请看以下链接

    http://msdn.microsoft.com/zh-cn/library/aa970561(v=vs.90).aspx

    2014年4月1日 4:11
  • 非常感谢你的帮助:

    我参考了MSDN后:

        <StackPanel DockPanel.Dock="Left">
    
          <!-- Canvas Containing the animated object and the path it follows during animation -->
          <Canvas HorizontalAlignment="Left" Margin="0" Width="340" Height="215" >
    
            <!-- This Path is only to show the path that the animated object will follow. -->
            <Path VerticalAlignment="Top" Margin="15,15,15,15" 
              Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
              Stroke="Black" StrokeThickness="2"
              Stretch="None" />
    
            <!-- This geometry renders the rectangle that is animated across the screen. -->
            <Path Fill="Blue" Margin="0,0,15,15">
              <Path.Data>
                <RectangleGeometry  x:Name="MyAnimatedRectGeometry" Rect="0,0 30 30" >
                  <RectangleGeometry.Transform>
                    <TransformGroup>
                      <RotateTransform x:Name="MyRotateTransform" Angle="0" CenterX="15" CenterY="15" />
                      <TranslateTransform x:Name="MyTranslateTransform" X="10" Y="100" />
                    </TransformGroup>
                  </RectangleGeometry.Transform>
                </RectangleGeometry>
              </Path.Data>
            </Path>
          </Canvas>
    
        <!-- Create button to restart the animations. -->
        <Button Width="80" HorizontalAlignment="Left" >
          Start Animations
    
          <!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
          <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
              <BeginStoryboard Name="MyBeginStoryboard">
                <Storyboard>
    
                  <!-- Animates the angle along the path. -->
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyRotateTransform"
                    Storyboard.TargetProperty="Angle"
                    Source="Angle" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True" >
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>
                  </DoubleAnimationUsingPath>
    
                  <!-- Animates the rectangle horizotally along the path. -->
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyTranslateTransform"
                    Storyboard.TargetProperty="X"
                    Source="X" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True" >
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>
                  </DoubleAnimationUsingPath>
    
                  <!-- Animates the rectangle vertically along the path. -->
                  <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyTranslateTransform"
                    Storyboard.TargetProperty="Y"
                    Source="Y" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True" >
                    <DoubleAnimationUsingPath.PathGeometry>
                      <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                    </DoubleAnimationUsingPath.PathGeometry>
                  </DoubleAnimationUsingPath>
                    
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Button.Triggers>
        </Button>
        
        </StackPanel>

    使用:

    RotateAnimationUsingPath

    可以实现WPF围绕着托盘旋转的路径动画;

    但是我发现这个动画是匀速运动的;

    但是我以前看到的WPF特效的最初开始运动时候有加速的效果运动到最后的时候有减速的效果;

    不知道在路径动画里该如何实现

    感谢帮助了

    2014年4月1日 7:52
  • 你好,

    你试试这两个属性吧,可以加速度和减速度,

    http://msdn.microsoft.com/en-us/library/ms746613(v=vs.110).aspx

    XAML:

    <StackPanel Margin="20">
    
            <Rectangle Name="nonAcceleratedOrDeceleratedRectangle" Fill="#9933FF" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <Rectangle Name="acceleratedRectangle" Fill="#3333FF" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <Rectangle Name="deceleratedRectangle" Fill="#33FF66" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <Rectangle Name="acceleratedAndDeceleratedRectangle" Fill="#CCFF33" 
          Width="10" Height="20" HorizontalAlignment="Left" />
    
            <!-- Create a button to start the animations. -->
            <Button Margin="0,30,0,0" HorizontalAlignment="Left"
          Content="Start Animations">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
    
                                <!-- Creates an animation without acceleration or deceleration for comparison. -->
                                <DoubleAnimation         
                                    Storyboard.TargetName="nonAcceleratedOrDeceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    Duration="0:0:10" From="20" To="400" />
    
                                <!-- Creates an animation that accelerates through 40% of its duration. -->
                                <DoubleAnimation 
                                    Storyboard.TargetName="acceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    AccelerationRatio="0.4" Duration="0:0:10" From="20" To="400" />
    
                                <!-- Creates an animation that decelerates through 60% of its duration. -->
                                <DoubleAnimation 
                                    Storyboard.TargetName="deceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />
    
                                <!-- Creates an animation that accelerates through 40% of its duration and
                                    decelerates through the 60% of its duration. -->
                                <DoubleAnimation 
                                    Storyboard.TargetName="acceleratedAndDeceleratedRectangle" 
                                    Storyboard.TargetProperty="(Rectangle.Width)"
                                    AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>

    另外一个思路,可以分区域,然后给定不同的动画时间。这样可以达到加速和减速的效果。

    谢谢!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2014年4月2日 5:19
    版主