×
Namespaces

Variants
Actions
Revision as of 06:47, 3 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Windows Phone 手指滑动效果

From Nokia Developer 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 06:47.
185 page views in the last 30 days.
×