windows phone：卡通(二)

windows phone：动画(二)

Silverlight动画目标

Silverlight动画都是基于时间的，你只需指定特定时间段内需要发生的改变，Silverlight的动画类会自动处理好剩下的工作。

Silverlight的动画的运行原理是改变特定对象的特定属性，该属性(即动画目标)必须是依赖属性。

Silverlight动画可用于double、Color、Point和Object类型，下面是相应的动画类：

Object

DependencyObject(抽象)

Timeline(抽象)

DoubleAnimation

DoubleAnimationUsingKeyFrames

ColorAnimation

ColorAnimationUsingKeyFrames

PointAnimation

PointAnimationUsingKeyFrames

ObjectAnimationUsingKeyFrames

Storyboard -- 故事板

下面是一个DoubleAnimation示例：

xaml文件片段如下所示：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Button Name="btn1"

Content="Button No. 1"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5"
Click="OnButtonClick">
<Button.RenderTransform>
<RotateTransform x:Name="rotate1" />
</Button.RenderTransform>
</Button>

<Button Name="btn2"

Content="Button No. 2"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5"
Click="OnButtonClick">
<Button.RenderTransform>
<RotateTransform x:Name="rotate2" />
</Button.RenderTransform>
</Button>

<Button Name="btn3"

Content="Button No. 3"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5"
Click="OnButtonClick">
<Button.RenderTransform>
<RotateTransform x:Name="rotate3" />
</Button.RenderTransform>
</Button>
</Grid>
</Grid>

代码文件片段如下：

public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}

void OnButtonClick(object sender, RoutedEventArgs args)
{
Button btn = sender as Button;
RotateTransform rotateTransform = btn.RenderTransform as RotateTransform;

// 定义和生成一个动画

DoubleAnimation anima = new DoubleAnimation();
anima.From = 0;
anima.To = 360;
anima.Duration = new Duration(TimeSpan.FromSeconds(0.5)); //设置动画耗时，这里为0.5秒

// 设置附加属性

Storyboard.SetTarget(anima, rotateTransform); //使动画与特定对象关联
Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty)); //使动画与特定属性关联

// 生成storyboard，把动画加进去并启动

Storyboard storyboard = new Storyboard();
storyboard.Children.Add(anima);
storyboard.Begin();
}
}

运行程序后，被单击的按钮就会在0.5秒旋转一周。

当然，你也可以将动画定义在xaml文件中，如将上面例子作修改，在上面的xaml文件中附加下面的定义：

<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="storyboard1">
<DoubleAnimation Storyboard.TargetName="btn1" //注意它与下面第三个的目标对象的不同之处
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" //注意它与下面第二个目标对象属性的不同写法

From="0" To="360" Duration="0:0:0.5" /> //Duration的三个数字分别表示：小时、分钟和秒，当然也可以在小时前增加天数等其他时间段
</Storyboard>

<Storyboard x:Name="storyboard2">
<DoubleAnimation Storyboard.TargetName="btn2"
Storyboard.TargetProperty="(Button.RenderTransform).Angle" //这个是简化语法

From="0" To="360" Duration="0:0:0.5" />
</Storyboard>

修改代码文件片段如下：

void OnButtonClick(object sender, RoutedEventArgs args)
{
if (sender == btn1)

{
storyboard1.Begin();

}else if (sender == btn2)
{
storyboard2.Begin();
}else if (sender == btn3)

{
storyboard3.Begin();

}
}

一些动画属性

如果动画类定义了Duration属性，如

anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

但你又为storyboard设置了更小的Duration值，如

storyboard.Duration = new Duration(TimeSpan.FromSeconds(0.25));

这将导致动画在0.25秒时被截断。默认情况下，storyboard的持续时间其持续时间最长的子元素的时限。

如果想让动画在1秒后启动，可这样设置

anima.BeginTime = TimeSpan.FromSeconds(1);

如果想让动画值From到To逆转，可这样设置

anima.AutoReverse = true; //这样值先从From到To走一遍后，再从To到From走一遍

如果想让动画重复运行，可这样设置

anima.RepeatBehavior = new RepeatBehavior(3); // 这里的3指的是一共执行的次数，如你将该值设置为1则跟不设置该属性时是一样的

windows phone：卡通(二)

热点推荐