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.

Windows Phone 手指滑动效果

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

代码示例
兼容于
文章
WS - OtomiiLu 在 02 Aug 2012 创建
最后由 hamishwillee 在 03 Jul 2013 编辑

当我们操作手机的时候,有的时候会希望手指划过的时候产生一定的效果。比如雪花,树叶,等等,这种效果类似于水果忍者中的切西瓜,但又不全是,毕竟不同效果实现起来的方法是不同的。

Contents

说明

在这篇文章中,我将要演示一个当我们划过屏幕时候,有一连串的小点跟随的效果。我们将提供一张8*8的png图片,并通过手指的移动,不断地拉出一条由这张8*8的图片组成的细线,当然你也可以把图片换成别的,效果依旧。同时,我建议使用png图片,因为png图片拥有透明层,而jpg没有, 所以jpg只能是方形的,而png图片可以多姿多彩。 以下就是我们使用的png图片: Point.png 以下就是我们完成项目后的效果图:

FingerSliding.jpg

你会发现当我们拖到最后的时候,那些存在时间比较长的点,已经开始消失了。 在这个项目中,我们将使用的XNA的技术来实现这个功能

什么是XNA

XNA是在手机中支持的一个类库,同时XNA也支持XBOX和Windows平台上的开发。 XNA的开发模式和我们普通的开发模式又不同,不同于Silverlight中,当我们点击个按钮触发事件的交互模式,XNA必须实时监控所有的操作,每一段时间(默认为1/30)秒,都会执行用户的定义的操作,通过Update和Draw事件来更新和呈现数据。

创建程序

新建一个Window Phone Silverlight and XNA 程序. 然后创建一个粒子类Particles(这是很简单的粒子类):

    public class Particles
{
public Vector2 ParticlesPosition { get; set; }
public Vector2 ParticlesDelta { get; set; }
public int ParticlesLife { get; set; }
public Particles()
{
ParticlesLife = 30;
}
public void Update()
{
ParticlesLife--;
}
public void Draw(SpriteBatch sb, Texture2D particlesTexture)
{
 
sb.Draw(particlesTexture, ParticlesPosition, Color.White * (((float)ParticlesLife) / 20));
}
}

你会发现我们在这个项目中提供了很多Update和Draw方法。 实际上,在XNA开发过程中,我建议为每个实体类都提供Update和Draw方法,并加以实现,让它们自己画自己,这样子可以很好地分开逻辑,容易维护和扩展。

接下来我们会新建一个ParticlesCollection类,ParticlesCollection类的作用主要是对Particle进行统一的管理,当然这个类也提供了Update和Draw方法 Update方法:

        public void Update()
{
for (int i = 0; i > -1 && i < particlesList.Count; i++)
{
var particles = particlesList[i];
particles.Update();
if (particles.ParticlesLife <= 0)
{
this.Remove(particles);
i--;
}
}
}

Draw方法:

        public void Draw(SpriteBatch sb)
{
foreach (var particles in particlesList)
{
particles.Draw(sb ,ParticlesTexture);
}
}

自己看会发现,在这两个方法中,都调用了Particle中的Update和Draw方法,ParticlesCollection主要负责一个中心控制的作用,而当真正需要涉及到绘制界面的时候,ParticlesCollection把任务交给所有内部的Particle来自行绘画。

接下来我们将要介绍这个ParticlesHelper类。 这个类主要是用来进行帮助我们完成任务,并更好的重新用,通过这个类,我可以使代码在xaml.cs的界面上尽可能的简洁。 这次我们先来看主界面的代码,然后在反过来看ParticlesHelper类。

主界面想要实现这个Effect是非常简单的,通过以下几条代码就可以实现整个效果: 初始化:

ParticlesHelper particlesHelper;

通过load元素后,然后新建ParticlesHelper类,然后,第一个param是纹理,第二个参数就是Particle存在的时间的长短,如果设置为30,那么Particle就会很快的消失。

particlesTexture = contentManager.Load<Texture2D>("Point");
particlesHelper = new ParticlesHelper(particlesTexture, 100);
particlesHelper.InitGestures();

接下来就是Update和Draw方法,你会发现真的是非常的简洁。

private void OnUpdate(object sender, GameTimerEventArgs e)
{
particlesHelper.Update();
}
private void OnDraw(object sender, GameTimerEventArgs e)
{
SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.White);
particlesHelper.Draw();
}

以上就是现实的整个需要配置的过程。

现在,我们看下ParticlesHelper类: 首先,我们通过InitGestures方法向手机提供了手势的支持。 以下代码中,说明这个程序支持手势为点击,自由拖拽,和拖拽结束3种

public void InitGestures()
{
TouchPanel.EnabledGestures = GestureType.Tap | GestureType.FreeDrag | GestureType.DragComplete;

接着是Update方法,主要就是对于手势的判断,然后计算坐标点,同时赋值给Particle生命的持续长度:

public void Update()
{
while (TouchPanel.IsGestureAvailable)
{
GestureSample gs = TouchPanel.ReadGesture();
var position = gs.Position;
position.X -= ParticlesTexture.Width / 2;
position.Y -= ParticlesTexture.Height / 2;
switch (gs.GestureType)
{
case GestureType.Tap:
particlesCollection.Add(new Particles() { ParticlesPosition = gs.Position, ParticlesDelta = gs.Delta, ParticlesLife = this.ParticlesLife });
break;
case GestureType.FreeDrag:
particlesCollection.Add(new Particles() { ParticlesPosition = gs.Position, ParticlesDelta = gs.Delta, ParticlesLife = this.ParticlesLife });
break;
case GestureType.DragComplete:
break;
}
}
particlesCollection.Update();
}

接着是Draw方法, 在简单的开启spriteBatch和关闭spriteBatch 直接进行绘画,spriteBatch就是用来绘画的,通过SpriteBatch.Draw方法就可以画出需要的纹理:

        public void Draw()
{
spriteBatch.Begin();
particlesCollection.Draw(spriteBatch);
spriteBatch.End();
}

项目截图和源代码

FingerSlidingSolution.png

源代码:File:FingerSliding.zip

This page was last modified on 3 July 2013, at 03:47.
316 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.

×