WPF的动画(1)基本动画

虽然有msdn文档,但关于动画网上资料比较少。略写一下.

 

目标(实现元素宽度从50到100的动画效果)

        <Rectangle Name="demoRectangle" Height="20" Width="100" Fill="Blue">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="demoRectangle" Storyboard.TargetProperty="Width"
                                             From="50"
                                             To="100" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

以下为步骤

一.根据需要修改的值创建相关的Animation

<DoubleAnimation From="50" To="100" Duration="0:0:1" />

From,To表示开始和结束的值,Duration表示动画时间,Animation本身不知道要修改某个属性

二.创建Storyboard

Animation无法单独使用,需要以Storyboard为容器,比如我要同时修改Width和Height,那么单独的Animation就不行了(不过很多情况下都是改一个属性的了,所以还不是很方便),可以理解为一个整体的动画板

                        <Storyboard>
                            <DoubleAnimation
                                             From="50"
                                             To="100" Duration="0:0:1" />
                        </Storyboard>

三.指定动画要改动的对象和属性

                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="demoRectangle" Storyboard.TargetProperty="Width"
                                             From="50"
                                             To="100" Duration="0:0:1" />
                        </Storyboard>

用附加属性Storyboard.TargetName和Storyboard.TargetProperty来指定(事实上如果指定了TargetName和TargetProperty那么这个DoubleAnimation的灵活
度也不高了,而且必须为元素定义一个Name,都比较麻烦)

四.用BeginStoryboard执行Storyboard

从名字上看,两个很像.事实上Storyboard与BeginStoryboard没有关系.

BeginStoryboard是一个TriggerAction,在事件触发实行执行某个Storyboard,BeginStoryboard需要定义在EventTrigger里面

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                    <BeginStoryboard>
                        <Storyboard>
                         … </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

 

其实用Blend可以很方便的实现一个动画,其会自动帮你创建跟属性有关的Animation。