1. 程式人生 > >wpf利用動畫實現圖形變化產生3d效果

wpf利用動畫實現圖形變化產生3d效果

利用動畫animation實現圖形變換。這裡實現了7個動畫變換圖形。可以附加起來一起使用。
也可以單獨使用。這裡每個圖形變換的中心是控制元件中心,可以根據自己需求更改。可以平移,可以旋轉,顯示wpf3d效果。 TranslateTransform,ScaleTransform,SkewTransform,RotateTransform幾個圖形變換是RenderTransform的子property.之所以用RenderTransform而不用LayoutTransform是因為LayoutTransform忽略平移變換。對elemenet的位置沒有任何影響。LayoutTransform內任何改變都會從新layout,所以控制元件不可能出現重疊。RenderTransform裡要是佈局發生變化,就會自動重疊,後load再上面。
  <Canvas>
        <TextBlock Text="XAML" FontSize="44pt" FontFamily="Arial Black" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
                <TransformGroup>
                <ScaleTransform x:Name="xformScale"/>
                    <ScaleTransform x:Name="xformScale2"/>
                <RotateTransform x:Name="xformRotate"/>
                    <SkewTransform x:Name="xformSkew"/>
                    <SkewTransform x:Name="xformSkew2"/>
                    <TranslateTransform x:Name="xformTrans"/>
                    <TranslateTransform x:Name="xformTrans2"/>
                </TransformGroup>
            </TextBlock.RenderTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <!--沿x軸變成0寬度-->
                            <!--<DoubleAnimation Storyboard.TargetName="xformScale" Storyboard.TargetProperty="ScaleX"
                                             From="1" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>-->
                           <!--沿Y軸變成0寬度-->
                            <!--<DoubleAnimation Storyboard.TargetName="xformScale2" Storyboard.TargetProperty="ScaleY"
                                             From="1" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>-->  
                           <!--360度旋轉-->
                            <!--<DoubleAnimation Storyboard.TargetName="xformRotate" Storyboard.TargetProperty="Angle"
                                             From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever"/>-->
                            <!--向無窮遠處消失成一條y軸-->
                            <!--<DoubleAnimation Storyboard.TargetName="xformSkew" Storyboard.TargetProperty="AngleY"
                                             From="0" To="90" Duration="0:0:5" RepeatBehavior="Forever"/>-->
                            <!--向無窮遠處消失成一條x軸-->
                            <!--<DoubleAnimation Storyboard.TargetName="xformSkew2" Storyboard.TargetProperty="AngleX"
                                             From="0" To="90" Duration="0:0:5" RepeatBehavior="Forever"/>-->
                            <!--沿x軸平移-->
                            <DoubleAnimation Storyboard.TargetName="xformTrans" Storyboard.TargetProperty="X"
                                             From="0" To="200" Duration="0:0:5" RepeatBehavior="Forever"/>
                            <!--沿y軸平移-->
                            <DoubleAnimation Storyboard.TargetName="xformTrans2" Storyboard.TargetProperty="Y"
                                             From="0" To="200" Duration="0:0:5" RepeatBehavior="Forever"/>     
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers> 
        </TextBlock>
    </Canvas>