×
Namespaces

Variants
Actions

在Qt和WP7上制作基本的动画

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 16 Jul 2013 编辑


这篇文章展示了如何在Qt 和WP7上制作基本的动画。

Contents

简介

动画是通过随着时间推移不断改变它的属性值来创建的。我们可以创建一个带有内置元素的动画,这个内置元素用来改变各种类型的属性值。

Qt Windows Phone
Fading Animation in Qt
Fading Animation in WP7
Example of Qt Example of WP

基本理念

在这里我们将会看到在Qt 和WP7上怎样创建一个基本的渐变动画。对于Qt平台我们使用PropertyAnimation创建,对WP7我们用DoubleAnimation来创建相同的效果。我们将使用一张图片来作为我们动画制作的对象而且这张图片将会变成连续不断的动画。

实现

让我们在Qt 和 WP7上分别创建一个空白的项目,首先我们将会在Qt上创建一个动画实例,然后将代码移植到WP7上。

Qt Project (main.qml)

我们使用一张图片来作为我们动画制作的对象。

Image {
id: imageAnimation
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: "Thumbnails/1.jpeg"
}

为了使图片动画化,我们使用PropertyAnimation,将图像的opacity改为0。为了制作一个连续不断的动画我们要loops为Infinite的。PauseAnimation属性保持动画的间歇时间为1000毫秒。

SequentialAnimation {
id: animation
PauseAnimation { duration: 1000 }
PropertyAnimation {
target: imageAnimation
loops: Animation.Infinite
properties: "opacity"
duration: 800
to: 0
}
}

当所有的组件都配置好了以后我们调用start()方法来开始动画。

Component.onCompleted: animation.start();

WP7 Project (MainPage.xaml)

在WP7上我们用DoubleAnimation,将图片设置为动画对象,在一段时间内图片Opacity从0改变到1.我们也定义这个动画拥有RepeatBehavior 属性且是无限循环的,AutoReverse 属性则负责倒转动画属性,所以当Opacity的值为0时它被改变成1.

  <StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="myAnimation">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedImage"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
<TextBlock Text="Fade In/Out Animation" FontSize="35" FontFamily="Times New Roman" Foreground="Red" Margin="70,100,0,0" />
<Image Margin="0,100,0,0" Height="200" Width="300" Source="Thumbnails/1.jpeg" Loaded="Start_Animation" x:Name="MyAnimatedImage"/>
 
 
</StackPanel>

Loaded事件处理程序通过调用Start_Animation()方法来启动动画。

//当对象被加载时开始运行动画程序
private void Start_Animation(object sender, EventArgs e)
{
 
myAnimation.Begin();
}

源代码

This page was last modified on 16 July 2013, at 01:31.
51 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×