Silverlight 显示隐藏动画效果

第一种方式：

第一步定义资源：

<UserControl.Resources>
        <Storyboard x:Key="layercollapseTransition">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BodyBack1"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="125"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="layerexpandTransition">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BodyBack1"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="125"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

第二部设置关联空间

第三步关联代码

        private void imagehide_MouseLeftButtonDown(object sender,MouseButtonEventArgs e)
        {
            var collapseAnimation = (Storyboard)Resources["layercollapseTransition"];//获取故事板
            collapseAnimation.Begin();//隐藏故事板开始执行
            collapsedPane.Visibility = Visibility.Visible;//展开面板可见
        }

        private void imagehide_MouseLeave(object sender,MouseEventArgs e)
        {
            ((Image)sender).Opacity = 0.4;//设置图片透明度
        }

        private void imagehide_MouseEnter(object sender,MouseEventArgs e)
        {
            ((Image)sender).Opacity = 1;//设置图片透明度
        }

        private void imageShow_MouseLeftButtonDown(object sender,MouseButtonEventArgs e)
        {
            var collapseAnimation = (Storyboard)Resources["layerexpandTransition"];//获取展开的故事板
            collapseAnimation.Begin();//故事板开始执行
            BodyBack1.Visibility = Visibility.Visible;//图层控制面板可见
            collapsedPane.Visibility = Visibility.Collapsed;//展开面板不可见
        }

第二种方式：（纯代码）

/// <summary> /// SetHideAction() 设置隐藏效果 /// </summary> /// <param name="Pcanvas">容器</param> /// <param name="PPropertypath">属性路径</param> /// <param name="Pwidthorheight">高度或宽度</param> /// <param name="Plong">持续时长</param> /// <returns></returns> public void SetHideAction(Canvas Pcanvas,string PPropertypath,int Pwidthorheight,double Plong) { Storyboard keyFrameboard = new Storyboard(); DoubleAnimationUsingKeyFrames dakeyframe = new DoubleAnimationUsingKeyFrames(); //设置rect矩形控件的Opacity透明度，并且开始动画事件为0秒的时候。 Storyboard.SetTarget(dakeyframe,Pcanvas); Storyboard.SetTargetProperty(dakeyframe,new PropertyPath(PPropertypath)); dakeyframe.BeginTime = new TimeSpan(0,0);//设置开始时间 //添加一个在第二秒的时候Opacity透明度值为1的关键帧 SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame(); SKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)); SKeyFrame.Value = 0; dakeyframe.KeyFrames.Add(SKeyFrame); //添加一个在第四秒的时候Opacity透明度值为0.2的关键帧 SplineDoubleKeyFrame SKeyFrame1 = new SplineDoubleKeyFrame(); SKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(Plong)); SKeyFrame1.Value = Pwidthorheight; dakeyframe.KeyFrames.Add(SKeyFrame1); keyFrameboard.Children.Add(dakeyframe); keyFrameboard.Begin();//隐藏故事板开始执行 } /// <summary> /// SetShowAction() 设置显示效果 /// </summary> /// <param name="Pcanvas">容器</param> /// <param name="PPropertypath">属性路径</param> /// <param name="Pwidthorheight">高度或宽度</param> /// <param name="Plong">持续时长</param> /// <returns></returns> public void SetShowAction(Canvas Pcanvas,0);//设置开始时间 //添加一个在第二秒的时候Opacity透明度值为1的关键帧 SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame(); SKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)); SKeyFrame.Value = Pwidthorheight; dakeyframe.KeyFrames.Add(SKeyFrame); //添加一个在第四秒的时候Opacity透明度值为0.2的关键帧 SplineDoubleKeyFrame SKeyFrame1 = new SplineDoubleKeyFrame(); SKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(Plong)); SKeyFrame1.Value = 0; dakeyframe.KeyFrames.Add(SKeyFrame1); keyFrameboard.Children.Add(dakeyframe); keyFrameboard.Begin();//隐藏故事板开始执行 }

Silverlight 显示隐藏动画效果

相关推荐