Quick小白书系列（五）Quick中的Sprite之动起来

上一节中讲解了Quick中的Scene，本节来了解Quick中的Sprite。

什么是精灵（Sprite）？简单的说，Sprite就是用来显示一个图片的，你可以让它移动，缩放以及旋转！关于精灵更详细的定义，可以百度之，这里不过多阐述！

下面我们就开始讲解在Quick中使用Sprite

1. 首先，我们需要一张图片，常用的图片就是png或者jpg，我这里使用的是一张太空飞船的png图片

把图片放在你的res目录下，这样我们的程序才能够搜索到。

2. 打开你的MainScene，删除ctor中用来显示hello world的代码，添加如下代码

1 2 3

self.sp = display.newSprite( "flattop.png" )          :pos(display.cx, display.cy)          :addTo(self)

上面的代码调用display.newSprite接口来初始化一个精灵，使用的图片是我们刚刚放到res下的flattop.png。创建的精灵被赋值给self.sp变量，这里的self就是MainScene。

紧接着的两个冒号语句是对这个精灵调用的方法，含义如下：

• pos：精灵在屏幕中的位置，这里使用了预定义的两个变量display.cx,display.cy，这两个变量指的时屏幕中央

• addTo：这个方法是将精灵添加到哪个节点上，这里是添加到self，也就是MainScene。

保存文件，刷新一下player，你回看到原来的hello world不见了，取而代之的是在屏幕中央的飞船图片

3.改变精灵的大小

如果你想让精灵初始的时候就改变大小，你可以在pos下加如下代码:scale(2)，scale的参数就是你要缩放的大小，1为原始大小，你可能会问，那能不能是负数呢？你可以试试，然后看看效果！

4.精灵的移动

前面我们说到，我们可以对精灵进行很多操作，我们先来说移动。

精灵的移动大体分为两种：一种是在一定时间内移动到指定坐标，一种是在一定时间内按照指定的步长进行移动；

A.移动到指定位置

Quick的transition模块中提供了一个移动精灵的封装，函数原型为transition.moveTo(target, args)

其中target就是你要移动的精灵，args是移动所需要的参数，我们继续添加如下代码

1	transition.moveTo(self.sp, { time  = 5, x = display.cx, y = display.height})

再次刷新player，你会看到你的飞船晃晃悠悠的移动到了屏幕中央上方，然后停住了。

这里args对应的就是 {time = 5, x = display.cx, y = display.height}， 其中time表示移动的总时间，xy表示移动到的终点坐标，很容易理解是不是。

transition是Quick封装的模块，你可以在src/framework/transition.lua中查看其提供的所有接口。

这里提一下如何使用原生的接口来让飞船移动，注释一下transition.moveTo的代码，然后添加如下代码

1	self.sp:runAction(cc.MoveTo:create(5, cc.p(display.cx, display.cy)))

刷新player，你会看到飞船跟执行了一样的移动动作，细心的童鞋查看transition.moveTo的实现的话，会看到其也是最终调用了上面的方法来完成移动的

B. 第二种移动使用的接口就是transition.moveBy(target, args)，它的使用跟moveTo基本一样，但又有点不一样，这个留给童鞋们自己去测试吧，修改参数，然后刷新player，你就会掌握它的使用方式的。

5. 缩放动作

在前面我们提到了可以在精灵初始化的时候设定其大小，那么如果你是想要让精灵在一定时间内变大或者变小要如何做呢？当然是使用缩放动作了。

transition.scaleTo(target, args)接口就是用来让精灵做缩放动作的，我们先来看下效果，为了看清效果，请先注释掉前面移动的代码，并把精灵的初始大小设置为1，然后添加如下代码

1	transition.scaleTo(self.sp, { time  = 5, scale = 2})

刷新player，你会看到飞船慢慢的变大到了2倍。参数scale的意义就是要缩放的倍数。当然，你也可以不传入scale而传入scaleX和scaleY，具体效果仍然是留给你自己去尝试了

6. 各种动作

上面介绍了transition中的移动和缩放动作，打开transition.lua，你会看到其提供的全部的接口，结合上面的讲解以及代码的注释，你可以轻松的看懂这些接口的使用，别光看，动起手来，每个接口都使用以下，这样你才能真正理解这些接口的含义。每个接口的注释中都提供了详细的使用方法，所以不要告诉我你还是不会，那我只能呵呵了！