×
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和wp7中创建一个动画来移动球的基础文章。当用户点击设备屏幕,球移动到点击的区域。


MovingBallQML.png MovingBallWp7.png

注意:图片中的动画不是很清楚,请尝试在设备上取得实际效果

实现

让我们创建一个Qt和wp7的空项目,我们先完成Qt上的项目,然后再做wp7项目。我们要创建一个圆形区域,当用户在设备屏幕上点击时,我们取得那个点的x、y坐标,然后以动画的方式将球移动到那个点。

Qt项目

我们创建一个具有一定圆角的矩形Rectangle ,使它成为一个圆。

Rectangle {
id: rectRed
width: 20; height: 20
radius: 10
color: "green"
}

我们使用SmoothedAnimation Element以动画的方式改变圆的x、y坐标。

Behavior on x { SmoothedAnimation { velocity: 200 } }
Behavior on y { SmoothedAnimation { velocity: 200 } }

当用户点击设备屏幕上的任意位置,我们取得x、y坐标并更新圆的位置。

MouseArea{
anchors.fill:parent
onClicked:
{
rectRed.x = mouseX
rectRed.y = mouseY
}
}

这将给人圆沿着直线运动的感觉。

Wp7项目

在wp7项目中我们添加一个Canvas并用EllipseGeometry在其中加一个圆。

<EllipseGeometry x:Name="myCircle"    Center="200,100" RadiusX="15" RadiusY="15" />

我们用Storyboard来给这个球制作动画。

<Storyboard x:Name="myStoryboard"> 
<PointAnimation
x:Name="myAnimation"
Storyboard.TargetProperty="Center"
Storyboard.TargetName="myCircle"
Duration="0:0:0.5"/>
</Storyboard>

当用户点击设备屏幕上的任意位置,我们取得x、y坐标并更新圆的位置。

double pointX = e.GetPosition(null).X;
double pointY = e.GetPosition(null).Y;
Point myPoint = new Point();
myPoint.X = pointX;
myPoint.Y = pointY;
myAnimation.To = myPoint;
myStoryboard.Begin();

这将提供Qt一样的动画行为。

总结

本文主要是针对初学者的关于Qt和wp7的基本动画的教学。

源代码

完整的Qt例子的可用源代码:File:MovingBallQML.zip 完整的wp7例子的可用源代码:File:MovingBallWp7.zip

This page was last modified on 16 July 2013, at 01:39.
55 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.

×