先展示实现效果:
第一种方法:
1、首先创建一个基视图的项目并命名为:AnimationTest
打开ViewController.xib文件,拖一个Image View、label和一个slider,imageView放在中间,其它两个放在屏幕的下面;
2、在ViewController.h文件中创建如下代码:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController{
IBOutlet UIImageView *imageView;//图片
IBOutlet UISlider *slider;//滑块条
CGPoint delta;//坐标
NSTimer *timer;//时间
float cellR;//球的半径
}
@property (nonatomic,retain)IBOutlet UIImageView *imageView;
@property (nonatomic,retain)IBOutlet UISlider *slider;
//当滑块条移动的时候
-(IBAction)sliderMoved:(id)sender;
@end
并且把所有的控件相应的都对应上,这个相信大家都知道了!!
3、ViewContoller.m文件实现
#import "ViewController.h"
@implementation ViewController
@synthesize imageView,slider;
- (void)viewDidLoad
{
//得到球的半径
cellR=imageView.frame.size.width/2;
//滑动块在右旁显示值
[slider setShowValue:YES];
//初始化要移动的坐标
delta=CGPointMake(12.0, 4.0);
//scheduledTimerWithTimeInterval:参数指定秒计时器之间发射。它接受一个0.0-1.0秒的值,selector:参数指定定时器触发时要调用的方法,repeats:参数表示计时器对象是否会反复重新安排本身。
timer=[NSTimer scheduledTimerWithTimeInterval:slider.value target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
//每次调用都让球移动,并判断是否接触到屏幕边缘
-(void)onTimer{
//球中心的x轴加delta.x,y轴加delta.y来使球移动
imageView.center=CGPointMake(imageView.center.x+delta.x,imageView.center.y+delta.y);
//如果球中心的x轴超过了屏幕的宽度或者球的x轴小于了半径就把delta.x改成相反
if(imageView.center.x>self.view.bounds.size.width-cellR||imageView.center.x<cellR){
delta.x=-delta.x;
}
//如果球中心的y轴超过了屏幕的高度或者球的y轴小于了半径就把delta.y改成相反
if(imageView.center.y>self.view.bounds.size.height-cellR||imageView.center.y<cellR){
delta.y=-delta.y;
}
}
//当你改变slider,该方法将被调用
-(IBAction)sliderMoved:(id)sender{
//把以前的timer设为无效,只有设为无效也,才能改变它的发身间隔频率,你不能直接改变他的间隔
[timer invalidate];
//然后重新创建timer
timer=[NSTimer scheduledTimerWithTimeInterval:slider.value target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
}
-(void)dealloc{
[timer invalidate];
[imageView release];
[slider release];
[super dealloc];
}
第二种方法:
为了使画面更流畅,我们要用到animation,在原先项目的基础上添加如下代码
首先在ViewController.h文件添加:
CGPoint translation;
在ViewController.m中的VieDidLoad中初始化:
//初始化
translation=CGPointMake(0.0, 0.0);
把onTimer方法改成如下:
/每次调用都让球移动,并判断是否接触到屏幕边缘
-(void)onTimer{
//UIView开始动画
[UIView beginAnimations:@"my_own_animation" context:nil];
//设置动画移动的时间为slider.value滑块的值
[UIView setAnimationDuration:slider.value];
//设置动画曲线类形为:直线UIViewAnimationCurveLinear
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
//在视图上执行仿射变换,简单地使用它的变换属性:设置动画移动值
imageView.transform=CGAffineTransformMakeTranslation(translation.x, translation.y);
//完成动画,必须写,不要忘了
[UIView commitAnimations];
//移动值的变化
translation.x+=delta.x;
translation.y+=delta.y;
//是否超出范围
if(imageView.center.x+translation.x>self.view.bounds.size.width-cellR||imageView.center.x+translation.x<cellR){
delta.x=-delta.x;
}
if(imageView.center.y+translation.y>self.view.bounds.size.width-cellR||imageView.center.y+translation.y<cellR){
delta.y=-delta.y;
}
}
这样画面就更加流畅了!!
下面实现球旋转效果:
还是在原来的项目基础上添加代码:
首先在ViewController.h文件添加:
//旋转的值
float angle;
在ViewController.m中的VieDidLoad中初始化:
angle=0;
把onTimer方法改成如下:
//每次调用都让球移动,并判断是否接触到屏幕边缘
-(void)onTimer{
//UIView开始动画
[UIView beginAnimations:@"my_own_animation" context:nil];
//设置动画移动的时间为slider.value滑块的值
[UIView setAnimationDuration:slider.value];
//设置动画曲线类形为:直线UIViewAnimationCurveLinear
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
//旋转效果
imageView.transform=CGAffineTransformMakeRotation(angle);
//完成动画,必须写,不要忘了
[UIView commitAnimations];
//改变angle的值,angle是弧度值,1弧度值是57.32度,每次都旋转0.1弧度值,你要是想效果明显就把值设大一点
angle += 0.1;
if (angle>6.2857) angle = 0;
//球中心的x轴加delta.x,y轴加delta.y来使球移动(第一种方法)
imageView.center=CGPointMake(imageView.center.x+delta.x,imageView.center.y+delta.y);
//如果球中心的x轴超过了屏幕的宽度或者球的x轴小于了半径就把delta.x改成相反
if(imageView.center.x>self.view.bounds.size.width-cellR||imageView.center.x<cellR){
delta.x=-delta.x;
}
//如果球中心的y轴超过了屏幕的高度或者球的y轴小于了半径就把delta.y改成相反
if(imageView.center.y>self.view.bounds.size.height-cellR||imageView.center.y<cellR){
delta.y=-delta.y;
}
}
旋转效果实现!就是只加了一个imageView.transform=CGAffineTransformMakeRotatin(angle),该方法的目地是设置它的旋转效果;
接下来是放大效果:
在上面代码里只加一句:
imageView.transform=CGAffineTransformMakeScale(angle, angle);
该语句是实现放大效果,x和y轴放在angle倍;
ok!实现!本博客是我自己的练习,有好多地方没有讲太清楚,还请谅解!