你的位置:首页 > 操作系统

[操作系统]IOS学习02简单动画


  IOS学习第二天,今天做一个简单的动画的小程序!

 程序截图如下:

     

1 这个程序,当点击屏幕左下方4个方向按键的时候,上面的图片就会跟着自动上下左右移动。

2 当点击屏幕右边变大和变小按键时候,上面的图片就会跟着变大和变小。

二 功能就说到这里,下面开始界面和代码说明。

2.1 首先还是先创建项目和设计界面,当然还要把相对应的图片导入项目images.xcassets下。截图如下:

2.2 界面图片和方向键,在这里我都是用Button做的,当然,用别的也可以。

2.3 界面上所以可以点击的按键,我都做了高亮显示,这个就要修改按键的State Config=Highlighted;然后在这里再设置变成高就显示的背景图片,同时还要设置属性Type=Custom,这样当你点击按键的时候才会有高亮显示。设置属性如下图:

2.4 这个截图左边界面上我点到了右按键,然后右边是对应的属性,这个截图可以清楚的看到,对应属性的设置,所有的按键设置都同样。

2.5 在这里我们还要设置下4个方向键的tag属性时,其实这个就相当给每个按键设置一个唯一的ID,在asp.net中,每个控件都会自动生成一个唯一的ID。

但IOS中不会自动生成,所以要自己在属性中设置,这样方便我们在后台代码中,可以只写一个事件方法来控制4个Button按键,如下图:

2.6 这样在后台代码中我们就可以通过Tag的值来判断是点击的哪个按键值,来做处理了。

2.7 界面设计完成后,下面开始写后台代码了,代码如下:

//// ViewController.m// 动画-1//// Created by 徐周 on 15-5-27.// Copyright (c) 2015年 ___FULLUSERNAME___. All rights reserved.//#import "ViewController.h"@interface ViewController ()//定义一个点击事件,这个事件同事连线界面上4个上下左右按键//就是说界面上4个方向键的点击事件都用这一个方法来实现-(IBAction)top:(UIButton *)btn;//定义变大事件,关连变大按键-(IBAction)big;//定义变小事件,关连变小按键-(IBAction)small;//定义图片属性,做来控制图片属性@property(weak,nonatomic) IBOutlet UIButton *head;@end@implementation ViewController//方向点击事件,传入当前点击按键的UIButton的值,来判断点击的是哪个方向键。-(IBAction)top:(UIButton *)btn{  //找到界面上图片的frame,因为frame属性是不能直接设置的  //只能先赋值给CGRect来保存    CGRect tempFrame=self.head.frame;    //设置图片要移动的距离,这里设置成10,就是每点一次方向键,变化10个点  int btns=10;  // 判断当前点击的按键的tag的值就可以知道当前点击的是哪个方向键  //10上,20左,30右,40,下  //tempFrame.origin.y,这里就是指的当前图片Y坐标,国为在IOS中界面就是用Y和X来指名坐标的。  //这样我们找到了当前图片Y和X坐标后就好办了,我们设置Y坐标-10,那么图片就会向界面的上面移动10点了  //同理,上下左右都一样了。  switch (btn.tag) {    case 10:      tempFrame.origin.y-=btns;      break;    case 20:      tempFrame.origin.x-=btns;      break;    case 30:      tempFrame.origin.x+=btns;      break;    case 40:      tempFrame.origin.y+=btns;    default:      break;  }  // 设置完了图片的坐标后,我们再把CGRect的变量empFrame赋值给图片。这样,图片在界面的位置变了。  self.head.frame=tempFrame;}//变大按键-(IBAction)big{  //和上面同理,只能先赋值给CGRect来保存  CGRect temFrame=self.head.frame;    //因为这里是变大,所以变是设置size.width和size.height属性了,  //我想做开发都应该知道这两个属性的作用  temFrame.size.width+=20;  temFrame.size.height+=20;  //同时我们还要设置下图片的坐标,因为如果Y和X坐标不变动,程序运动起来就会一直向下和右变大  //这是因为我们图片的Y和X坐标一直没有动过,所以图片只能向下和右变动,所以为了看起来好像,要同时设置下,当前属性的Y和X坐标  temFrame.origin.x-=10;  temFrame.origin.y-=10;  self.head.frame=temFrame;}//变小按键,代码同上,不用说明了-(IBAction)small{  CGRect temFrome=self.head.frame;    temFrome.size.width-=20;  temFrome.size.height-=20;  temFrome.origin.x+=10;  temFrome.origin.y+=10;      self.head.frame=temFrome;}@end

View Code

 三 当这些都做完之后,运行程序,然后上下左右都可以移动,点击放大和放小按键可以变大和变小。

 但有个问题就是变大和变小按键只能变化一次,就没反映了。这个其实跟代码没有关系,这个是因为IOS自带一个属性Use Auto Layout来控制不让界面的控件属性Widtht和heigth自动变化。这个属性是自动勾上的。我们把勾去掉就行了。如下图:

3.1 现在Use Auto Layout 这个属性的勾已经去掉了,再次运行程序,变大变小就没问题了。OK,学习IOS很多小问题要注意,一步步来。