Silverlight 动画示例

1 从-90度到0度显示页面和反向隐藏页面

<Storyboard x:Name="StoryboardShowAllTools">
                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Visibility)">
                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-90"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)">
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="StoryboardHiddenAllTools">
                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Visibility)">
                    <DiscreteObjectKeyFrame KeyTime="00:00:01">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-90"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="allToolsView" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)">
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

2 从中心点放大和缩小

RenderTransformOrigin="0.5,0.5"

<ed:Callout.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="0" ScaleY="0"/>
                            </TransformGroup>
</ed:Callout.RenderTransform>

        private void StoryboardShowWindows(DependencyObject dependencyObject)
        {
            Storyboard storyboard = new Storyboard();

            ObjectAnimationUsingKeyFrames ObjectAnimation = new ObjectAnimationUsingKeyFrames();
            ObjectAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(10));
            Storyboard.SetTarget(ObjectAnimation, dependencyObject);
            DiscreteObjectKeyFrame dof = new DiscreteObjectKeyFrame();
            dof.KeyTime = TimeSpan.FromMilliseconds(10);
            dof.Value = System.Windows.Visibility.Visible;
            ObjectAnimation.KeyFrames.Add(dof);
            Storyboard.SetTargetProperty(ObjectAnimation,
                new PropertyPath("(UIElement.Visibility)"));
            storyboard.Children.Add(ObjectAnimation);

            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.To = 1;
            doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            Storyboard.SetTarget(doubleAnimation, dependencyObject);
            Storyboard.SetTargetProperty(doubleAnimation,
                new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
            storyboard.Children.Add(doubleAnimation);

            doubleAnimation = new DoubleAnimation();
            doubleAnimation.To = 1;
            doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            Storyboard.SetTarget(doubleAnimation, dependencyObject);
            Storyboard.SetTargetProperty(doubleAnimation,
                new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
            storyboard.Children.Add(doubleAnimation);

            storyboard.Begin();
        }

        private void StoryboardHiddenWindows(DependencyObject dependencyObject)
        {
            Storyboard storyboard = new Storyboard();

            ObjectAnimationUsingKeyFrames ObjectAnimation = new ObjectAnimationUsingKeyFrames();
            ObjectAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            Storyboard.SetTarget(ObjectAnimation, dependencyObject);
            DiscreteObjectKeyFrame dof = new DiscreteObjectKeyFrame();
            dof.KeyTime = TimeSpan.FromMilliseconds(1000);
            dof.Value = System.Windows.Visibility.Collapsed;
            ObjectAnimation.KeyFrames.Add(dof);
            Storyboard.SetTargetProperty(ObjectAnimation,
                new PropertyPath("(UIElement.Visibility)"));
            storyboard.Children.Add(ObjectAnimation);

            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.To = 0;
            doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            Storyboard.SetTarget(doubleAnimation, dependencyObject);
            Storyboard.SetTargetProperty(doubleAnimation,
                new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
            storyboard.Children.Add(doubleAnimation);

            doubleAnimation = new DoubleAnimation();
            doubleAnimation.To = 0;
            doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            Storyboard.SetTarget(doubleAnimation, dependencyObject);
            Storyboard.SetTargetProperty(doubleAnimation,
                new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
            storyboard.Children.Add(doubleAnimation);

            storyboard.Begin();
        }

3 动态改变宽度,到最大在消失,类似进度条

<Storyboard x:Name="myStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="myRectangle">
                    <EasingDoubleKeyFrame Value="0" KeyTime="00:00:00">
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame Value="100" KeyTime="00:00:03">
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame Value="0" KeyTime="00:00:03">
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

4 以左上角旋转

<Popup.RenderTransform>
                <RotateTransform x:Name="theTransform" />
            </Popup.RenderTransform>

<Storyboard x:Name="showpp">
                <DoubleAnimation  Storyboard.TargetName="theTransform" Storyboard.TargetProperty="(RotateTransform.Angle)"  From="0" To="90" Duration="0:0:5" AutoReverse="True"/>
            </Storyboard>

5 以上边缘为旋转轴,来回摆动

<ctrl:ChildWindow x:Name="cw" RenderTransformOrigin="0.5,0.5">
                <ctrl:ChildWindow.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1" x:Name="cwScaleTransform"/>
                    </TransformGroup>
                </ctrl:ChildWindow.RenderTransform>
                <ctrl:ChildWindow.Projection>
                    <PlaneProjection  x:Name="cwPlaneProjection" CenterOfRotationY="0"/>
                </ctrl:ChildWindow.Projection>
            </ctrl:ChildWindow>

<Storyboard x:Name="StoryboardShowTool">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="cwPlaneProjection" Storyboard.TargetProperty="CenterOfRotationX">
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="cwPlaneProjection" Storyboard.TargetProperty="RotationX">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="45"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-45"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="cwPlaneProjection" Storyboard.TargetProperty="CenterOfRotationY">
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

6 页面消失动画

<Storyboard x:Name="StoryboardHiddenTool">
                <DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="cwScaleTransform" From="1" To="0.1" BeginTime="00:00:00">
                </DoubleAnimation>
                <DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="cwScaleTransform" From="1" To="0.1" BeginTime="00:00:01">
                </DoubleAnimation>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Storyboard.TargetName="cwPlaneProjection" Storyboard.TargetProperty="RotationX">
                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-90"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>