WPF簡單動畫實現

weixin_34194087發表於2017-04-07

使用WPF 中的Storyboard 實現了簡單的動畫效果:


2988670-1845517217314607.gif
0_13008961557egM.gif

程式碼很簡單,主要是大概瞭解了下WPF中簡單動畫實現的思路,算是為以後留作參考

 <Window.Triggers>  
        <!--事件觸發器 事件源為myRectangle-->  
        <EventTrigger SourceName="myRectangle" RoutedEvent="MouseEnter">  
           <!--動畫開始-->  
            <BeginStoryboard x:Name="myStoryboard">  
                <Storyboard>  
                    <!--旋轉動畫-->  
                    <!-- DoubleAnimation DoubleAnimationUsingKeyFrames 對 Rectangle 的 Width 或 Ellipse 的 Height(或任意 FrameworkElement)進行動畫處理。-->  
                    <DoubleAnimation  
       Storyboard.TargetName="myTransform"  
       Storyboard.TargetProperty="Angle"  
       From="0" To="360" Duration="0:0:5"   
       RepeatBehavior="Forever" >  
                    </DoubleAnimation>  
                    <!--動畫變色-->  
                    <!--ColorAnimation ColorAnimationUsingKeyFrames 對 SolidColorBrush 或 GradientStop 的 Color 進行動畫處理。-->  
                    <ColorAnimation Storyboard.TargetName="myRectangle"   
        Storyboard.TargetProperty="(Fill).(SolidColorBrush.Color)"  
        From="LightBlue" To="LightCyan" Duration="0:0:5" RepeatBehavior="Forever" />  
                </Storyboard>  
            </BeginStoryboard>  
        </EventTrigger>  
        <EventTrigger  SourceName="myRectangle" RoutedEvent="MouseLeave">  
            <!--動畫停止-->  
            <StopStoryboard BeginStoryboardName="myStoryboard" />  
        </EventTrigger>  
    </Window.Triggers>  
    <Grid>  
        <Rectangle Name="myRectangle" Width="50" Height="50" Fill="LightBlue">  
            <Rectangle.RenderTransform>  
                <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />  
            </Rectangle.RenderTransform>  
        </Rectangle>  
    </Grid>  
</Window>  

相關文章