[UI基础][不会说话的汤姆猫]

　　会说话的汤姆猫这个APP层级风靡一时，其UI部分就是利用了序列动画的技术， 接下来

我们用汤姆猫来演示怎么制作序列动画。

　　[要求]：

　　　　1、学会使用序列动画的方法

　　　　2、学会分析动画播放中内存占用高的问题，并解决

　　[实现]

　　　　1、搭建UI界面

　　　　　　1.1.设置模拟器的屏幕尺寸3.7,添加素材

　　　　　　　　我们的素材文件是是按照3.7Inch的大小，设置屏幕大小为3.7Inch，添

　　　　　　加动画的素材到工程。

　　　　　　2.2.添加控件

　　　　　　　　2.2.1.添加背景图片

　　　　　　　　　　我们用ImageView控件来实现动画，首先添加一个UIViewImage控

　　　　　　　　件到View，设置ImageView的Image属性为amgry_00.jpg，当然也可

　　　　　　　　以选择图库里的其他图片。

　　　　　　　　2.2.2.添加按钮

　　　　　　　　　　添加一个UIButton到View，设置尺寸为60X60，因为我们的Butto

　　　　　　　　的图片尺寸就是60X60的，然后设置Background的相应的图片，删除

　　　　　　　　Title的文字，然后相同的方式创建其他按钮。我们要点击头部已经脚，同

　　　　　　　　样的方法在头部和左右脚添加透明的按钮。完成后如下图所示

　　　　　　　　WP7whzqmtF/dh1qKZoJs5kQ5BrQ0dA7+/v//LLL3Nzc3Nzc7/88sve3t5lBnSnsKZrsMeSUgWovbjRXJIsZN40N92IpGUhsXLcxGwAgJ3cwtLMm+6ldEUWYmtnGU7V16dD1QAhoeNvMVHFR4jvuHWoQgjJ4zgvBLk2tAJ6b29vZmZGluXXr1+/fv368ePHMzMz+/v7lxXQ3cIaXt3VN1fuJLJ3Cjv6ZpU1rJFzyoxeNTYrkVm5NbSOLg21jZPrjxFOyHcrRxY3dsvbZ6tT+/l0eDFCSPiEaOVmuXxshuNMNgS5ZrQC+vnz548fP3758uXU1NTU1NTLly9lWf7ll18uKaB7C2uMcDLbitSaNhTTLEGdUZSFhFX2NsrPZSG9nMjKQr6Z77vKU2eAc3q1fABMV4Zsy1JuJJG9+dTqaWwm5OzI9NzNRy2pKd9+cStpl+0z1sjoHi4niy6fDi1lXIQQQkRCiBSxo5VpXskTCHmt76SKDIDGvZLkco0G0k780pTXNerzSoQQQkKZEoAT0AwA9Mio6Ark7Hk5pZRLFL3x4l+74AiCDBytgP7xxx9fv349NTU1MTExMTExNTX1+vXrubm5Swro3sKajc6ALtywE1YWYvJYwepoGJFp+cZz3poraEV2TMu94fxga75QKdUAGnVWrQQS2cDvdVZjpj0aukFrrFzMtk1EXAsk5KH8Fm1U1WeyEHtZOujpcrLp8OmUvYR4IgrjZsrbHtCqixAyGi2btKzlVZ0BAKO0lAsQEnZKaBqRCJHCZcaLqVG7PcJUibgUvRgSCfGmWkoSNUwIEUPKX7vgCIIMHBca0Fp0lHQS6WtA7y2s6Q5ou8WxvZFZkIXYcukAoLokxOYTGwB0SYjNJ94AgBFJyiNPj3YeOutxh46Z4jVtKKbYdviDgvV1P5cTdHYhqCISUWEAAKy9xdFHisa0cFsbhEZE4ssbAABGjhCXxpxkJ4SQQIdKnlNd1w16rYaUI8i1oKPFIctye4vj8ePH77fFwamhd2L2TZXewpqjLQ5HUNcoDMWWlCroxWzHxHGlDrAR7h3QG3cT2fDJAb2Ys/5z8GIkNv/tm76qEOj06XQEdLgzoHu0kmlnQIdFErLevZrrM9VFSCiV8hLiiqgdL5kxhqM7EOSDoxXQ+/v7MzMzjx8/bt4kXFpausSbhN3CGn5Qp3ZTgtFanYNVQS/mNjmr7ajPs0JMU2tbibSl+wAAXnomC4mKAbz4VBYSy8UqALBSxdDthsZWIi2PLOzyRoPb4z0aHMAs54TkmtkADo4s6SkD4OXfs0LsRfHgmIDu8Onw0igh3nQJgOfDLiJGjgloDmCqIUJCBgDn4AS02bE+UyUiaQBQShFCQopdRlMtQgiRQh2RjSDIB0DHMLu9vb3nz5//+OOPP/744/Pnz0+TzucX0F3Cmu5hdmr

　　　　2、实现序列动画的播放

　　　　　　2.1.[动画原理]

　　　　　　　　所谓的动画无非是把一些连续动作进行拆分成许多副图片，然后把这些图

　　　　　　片快速连续的播放出来，快到人眼觉察不出这不是一副一副单独的图片的播放，

　　　　　　而是一个连续的视频，其实最根本的是利用人眼的视觉暂留，人眼看到一个物体

　　　　　　或者一副画会在至少会在人的意识中停留0.34秒，这样如果播放图片的时间间

　　　　　　隔小于这个视觉暂留的时间的话会给人造成一种流畅的视觉变化的效果。

　　　　　　　　知道了这个原理我们就可以实现利用序列的图片进行动画的演示了，把事

　　　　　　先做好的动画图片按照顺序依次等时间间隔的加载的屏幕上显示就可以了。

　　　　　　2.2.[代码实现]

　　　　　　　　2.2.1.加载图片

　　　　　　　　　　制作动画首先需要把响应的图片加载到内存中，我们创建一个动态数

　　　　　　　　组，然后把图片数据一张一张的添加到图片数组中,下面以drink为例

　　　　　　　　NSMutable *animationData = [[NSMutableArray alloc]init];

　　　　　　　　for(index = 0; index < 80; index++) {

        　　　　　　　　NSString *picName = [NSString stringWithFormat:@"drink_02d.jpg",index];

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：[UI基础][不会说话的汤姆猫]

关键词：