silverlight控件动画状态的过渡

最新推荐文章于 2025-08-04 09:27:45 发布

weixin_30715523

最新推荐文章于 2025-08-04 09:27:45 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lsqandzy/p/4255117.html

本文介绍了一种使用WPF实现的UI元素焦点变化时的缩放动画效果。通过定义两个视觉状态（Focus 和 Unfocus），并在鼠标进入和离开时触发状态改变，实现了平滑的动画过渡。具体包括动画代码配置及事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画代码：

 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

<vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="FocusStateGroup">
                <vsm:VisualState x:Name="Focus">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.95" KeySpline="0,0,0.5,1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.95" KeySpline="0,0,0.5,1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Unfocus">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95" KeySpline="0,0,0.5,1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95" KeySpline="0,0,0.5,1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>

后台代码触发动画，并让其从第一个状态过渡到第二个状态

private void AddContactButton_MouseEnter(object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "Focus", true);
        }

        private void AddContactButton_MouseLeave(object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "Unfocus", true);
        }

        protected void InitEvents()
        {
            base.MouseEnter+=(new MouseEventHandler(this.AddContactButton_MouseEnter));
            base.MouseLeave+=(new MouseEventHandler(this.AddContactButton_MouseLeave));
        }