Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

在Qt和wp7中用动画移动球

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

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 15 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 15 July 2013, at 22:39.
87 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.

×