UI：动画

参考

UIView 层级管理、触摸、检测手机是否横屏、调整设备的方向

动画：为了提高用户的体验

View层的动画、UIlayer层的动画。UIView改变视图效果、UIlayer的绘图框架

#pragma mark-IOS 4之前动画操作

//开始动画

- (IBAction)starAnimation:(id)sender {

//UIview 的一些属性的变化，来实现动画效果

[self handlePropertyAnimation];

}

#pragma mark---UIView Animation---

-(void)handlePropertyAnimation{

//通过改变 UIView 属性（frame bounds center alpha transform旋转）来达到一些动画

//参数1 参数2

//IOS4之前的动画方式，必须写在动画开始与结束之间

[UIView beginAnimations:nil context:nil];//开始动画

//设置动画时长参数：动画效果类型

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//设置动画的变化曲线

[UIView setAnimationDuration:5];

//动画是否需要延迟

[UIView setAnimationDelay:0.5];

//设置动画的重复次数

[UIView setAnimationRepeatCount:5];

//改变视图的中心点位置

CGPoint center = self.animationView.center;

center.y += 80;

self.animationView.center = center;

//改变alpha 值

self.animationView.alpha = 0.2;

//动画是否从当前的状态开始

[UIView setAnimationBeginsFromCurrentState:YES];

//是否翻转动画

[UIView setAnimationRepeatAutoreverses:YES];

//翻转参数设置

self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, 0.5);

//旋转的时候改变自身的缩放比

self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 0.5, 0.5);

//改变视图的背景颜色

self.animationView.backgroundColor =[UIColor yellowColor];

//设置动画的代理（这个不用遵循协议）

[UIView setAnimationDelegate:self];

//动画结束的时候出发的方法

[UIView setAnimationDidStopSelector:@selector(animationStop)];

//动画开始的时候触发的方法

[UIView setAnimationWillStartSelector:@selector(animationWillStart)];

[UIView commitAnimations];//结束动画

}

#pragma mark---动画开始与结束的时候触发方法

-(void)animationStop{

NSLog(@"动画结束");

//相应的操作

}

-(void)animationWillStart{

NSLog(@"动画开始");

//相应的操作

}

#pragma mark-IOS 4之后动画操作

-(void)handleBlockAnimation{

//参数1：动画持续时间参数2：动画的属性

[UIView animateWithDuration:5 animations:^{

CGPoint center = self.animationView.center;

center.y += 80;

self.animationView.center = center;

}];

//中级用法参数1 动画持续时间参数2 动画属性参数3 动画之后的效果

[UIView animateWithDuration:5 animations:^{

self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, 0.5);

self.animationView.bounds = CGRectMake(0, 0, 50, 50);

self.animationView.transform = CGAffineTransformMakeTranslation(10, 12);

} completion:^(BOOL finished) {

self.animationView.transform = CGAffineTransformMakeScale(0.4, 0.2);

[self animationStop];

}];

//高级用法参数1 动画持续时间参数2 延迟时间参数3 动画开始与结束后的操作

[UIView animateWithDuration:1 delay:0.2 options:UIViewAnimationOptionAllowUserInteraction animations:^{

CGPoint center = self.animationView.center;

center.x +=100;

self.animationView.center = center;

self.animationView.alpha = 0.1;

} completion:^(BOOL finished) {

[self animationStop];

}];

//弹簧效果参数1 动画持续时间参数2 延迟时间参数3：弹簧强度，范围最大值是1 参数4：开始速度参数5：动画速度参数6：动画效果参数7：结束时候的操作

[UIView animateWithDuration:0.5 delay:0.2 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:UIViewAnimationOptionLayoutSubviews animations:^{

CGPoint center = self.bounTf.center;

center.y += 50;

self.bounTf.center = center;

self.bounTf.transform = CGAffineTransformMakeScale(1, 1.2);

//发抖的效果

[self.bounTf shake];

} completion:^(BOOL finished) {

}];

}

动画
使用UIView 的属性操作动画
改变图片的大小：self.imageView.transform = CGAffineTransformMakeScale(1.2,4);
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
objective-c 在ios中控件旋转会变长 有什么解决方案CGAffineTransform at =CGAffineTransformMakeRotation((M_PI/180)*30);at =CGAffineTransformTranslate(at,0,0);[mainview setTransform:at];
objective-c 在ios中控件旋转会变长 有什么解决方案
CGAffineTransform at =CGAffineTransformMakeRotation((M_PI/180)*30);
at =CGAffineTransformTranslate(at,0,0);
[mainview setTransform:at];
/*
UIViewAutoresizingNone // 不自动调整
UIViewAutoresizingFlexibleLeftMargin // 固定左侧宽度
UIViewAutoresizingFlexibleWidth // 控件宽度自动调整
UIViewAutoresizingFlexibleRightMargin // 固定右侧宽度
UIViewAutoresizingFlexibleTopMargin // 固定顶部距离
UIViewAutoresizingFlexibleHeight // 控件高度自动调整
UIViewAutoresizingFlexibleBottomMargin // 固定底部距离
*/  
// 以左上角按钮为例,如下设置后在切换横竖屏时将保持左上角的位置并且自动增加/减少按钮的长度
[mainview setAutoresizingMask:UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth];

————————————————————————————————————————————————————————————————————————————————————————————————————————————
2D仿真变换函数

CGAffineTransformMakeTranslation : 每次都是以最初位置的中心点为参考

CGAffineTransformTranslate 每次都是以传入的transform为参照（既 有叠加效果）

CGAffineTransformIdentity  最初位置的中心点

只会走一次的方法  self.imageView.transform=CGAffineTransformMakeTranslation(0,50);  

不停地触发，会接着上一次的位置继续走：

self.imageView.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, 0, 50);  
    self.imageView.transform =CGAffineTransformTranslate(self.imageView.transform, 0, 50);  
 下面图片的选装也只能走一次：
    CGAffineTransform trans = CGAffineTransformMakeScale(1, 3);

    trans = CGAffineTransformRotate(trans, M_PI_2);

    self.imageView.transform = trans;

CGAffineTransform类的方法
一、创建一个Transformations

1、CGAffineTransformMake //直接创建变换
CGAffineTransform CGAffineTransformMake (
CGFloat a,
CGFloat b,
CGFloat c,
CGFloat d,
CGFloat tx,
CGFloat ty );
可以看到参数比较多，其实它就是对应矩阵的前两列。据我估计，
可能一般不会直接用这个做变换。


2、CGAffineTransformMakeScale //创建一个给定比例放缩的变换

CGAffineTransform CGAffineTransformMakeScale (CGFloat sx, CGFloat sy);
可以看到这个参数就少多了，也比较好理解，假设是一个图片视图引用了这个变换，
那么图片的宽度就会变为 width*sx ，对应高度变为 hight * sy。


3、CGAffineTransformMakeRotation //创建一个旋转角度的变化

CGAffineTransform CGAffineTransformMakeRotation ( CGFloat angle);
在这里可以看到参数并不是一个角度，但是它是把参数作为一个弧度，然后把弧度再转换为角度来处理，
其结果就可能是将一个图片视图旋转了多少度。


4、CGAffineTransformMakeTranslation //创建一个平移的变化

CGAffineTransform CGAffineTransformMakeTranslation (CGFloat tx,CGFloat ty);
这个就比较好理解了，假设是一个视图，那么它的起始位置 x 会加上tx , y 会加上 ty


二、修改Transformations

1、CGAffineTransformTranslate //为一个变换再加上平移

CGAffineTransform CGAffineTransformTranslate (
CGAffineTransform t,
CGFloat tx,
CGFloat ty
);
简单来说就是在变化 t 上在加上平移


2、CGAffineTransformScale //为一个Transformation再加上缩放

CGAffineTransform CGAffineTransformScale (
CGAffineTransform t,
CGFloat sx,
CGFloat sy);

3、CGAffineTransformRotate //为一个Transformation再加上旋转

CGAffineTransform CGAffineTransformRotate (
CGAffineTransform t,
CGFloat angle
);

4、CGAffineTransformInvert //返回Transformation的反向

CGAffineTransform CGAffineTransformInvert (CGAffineTransform t);

5、CGAffineTransformConcat //合并两个Transformation

CGAffineTransform CGAffineTransformConcat (CGAffineTransform t1, CGAffineTransform t2);
返回一个由 t1 和 t2 合并而成的Transformation


三、运用Transformations

1、CGPointApplyAffineTransform //把变化应用到一个点上

CGPoint CGPointApplyAffineTransform (
CGPoint point,
CGAffineTransform t );
这个方法的返回值还是一个CGPoint，在我看来由于是一个点，
这个方法最终也只会影响这个点所在的位置。


2、CGSizeApplyAffineTransform //运用到一个区域中

CGSize CGSizeApplyAffineTransform (
CGSize size,
CGAffineTransform t);
只会改变区域的大小

3、CGRectApplyAffineTransform //运用到一个带原点的区间

CGRect CGRectApplyAffineTransform (
CGRect rect,
CGAffineTransform t);


这个我亲自试验过，三个属性 放缩、旋转和平移都有的一个Transformation ，
但处理之后只会改变这个区域原点的位置，和宽、高的大小，并不会旋转


四、检测一个Transformation

1、CGAffineTransformIsIdentity //检测一个Transformation是不是恒等变换，也就是说不变

bool CGAffineTransformIsIdentity ( CGAffineTransform t);//其结果返回一个BOOL值


2、CGAffineTransformEqualToTransform //检测两个Transformation是否相等。

bool CGAffineTransformEqualToTransform (
CGAffineTransform t1,

CGAffineTransform t2);

View Code 关于2D转换函数的知识

//代码：

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *image;

@property (weak, nonatomic) IBOutlet UITextField *boundsTf;

@property (weak, nonatomic) IBOutlet UIImageView *ballon;

@end

/*

 UIView 的四个动画样式

 UIlayer 的四个动画样式

 */

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

}

- (IBAction)but1:(id)sender {

    // CABaseAnimation

    CABasicAnimation * baseAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];

    //开始值

    baseAnimation.fromValue = @(0);//需一个对象类型

    //结束值

    baseAnimation.toValue = @(400);

    baseAnimation.duration = 5.0;//动画持续时长单位秒

    baseAnimation.repeatCount = 2;//动画持续次数

    

    //添加动画到视图的 layer上

    [self.image.layer addAnimation:baseAnimation forKey:nil];//需要添加一个标志

}

- (IBAction)but2:(id)sender {

    //使用关键帧动画

    CAKeyframeAnimation * keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    CGPoint po1 = self.image.center;

    CGPoint po2 = CGPointMake(200, 400);

    CGPoint po3 = CGPointMake(400, 100);

    NSValue * value1 = [NSValue valueWithCGPoint:po1 ];//将其他类型转化为对应的 Value

    NSValue * value2 = [NSValue valueWithCGPoint:po2];

    NSValue * value3 = [NSValue valueWithCGPoint:po3];

    keyframe.values = @[value1,value2,value3,value1];//存储路径中变化的多个值

    keyframe.duration = 6;//持续时间

    keyframe.repeatCount = 2;

    [self.image.layer addAnimation:keyframe forKey:nil];

}

- (IBAction)but3:(id)sender {

    //动画元素01

    CAKeyframeAnimation *keyframe1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    //贝塞尔曲线

    //参数1 绕转的中心点坐标 参数2：圆角设为直径的一半 参数3：开始角度 参数4：结束角度 参数5：环绕的方向 YES就是按照时钟的方向 NO就是时钟的反方向转动

    //沿着圆形移动

    CGPoint po1 =CGPointMake(0, self.view.frame.size.height/2);

    UIBezierPath * bezierPath = [UIBezierPath bezierPathWithArcCenter:po1 radius:self.view.frame.size.height/2 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];

        keyframe1.repeatCount = 5;

    //以贝塞尔曲线作为移动的路径

    keyframe1.path = bezierPath.CGPath;
 

    //动画元素02

    //让气球缩放效果

    CAKeyframeAnimation * keyframe2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];

    keyframe2.values = @[@(1.0),@(1.2),@(1.5),@(1.8),@(8),@(1.2),@(1.0),@(0.8),@(0.6),];

    keyframe2.repeatCount = 2;

    

    //创建动画分组

    CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];

    groupAnimation.animations = @[keyframe1,keyframe2];

    groupAnimation.duration = 10;//持续时间

    groupAnimation.repeatCount = 20;//持续次数

    //将动画添加到 layer 层

    [self.ballon.layer addAnimation:groupAnimation forKey:nil];


}



//CATransition 动画 CALayer 层的过度动画

- (IBAction)but4:(id)sender {

    //这对layer 切换效果，可以设置切换动画的样式

    CATransition * transition = [CATransition animation];

    transition.type = kCATransitionPush;

    /*类型有：

     cube立方体  pageCurl翻页的类型

     下面的类型是文档中的，上面的是OC的字符串，他也能识别

     kCATransitionFade ;

     kCATransitionMoveIn ;

     kCATransitionPush ;

     kCATransitionReveal;

     */

    transition.subtype = kCATransitionFromLeft;//给一个切换的方向

    transition.duration = 1;//持续时间

    transition.repeatCount = 2;

    [self.view.layer addAnimation:transition forKey:nil];//添加到要是实现的动画上

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

 @end

View Code UILayer 在图层创建的时候创键的动画方法

posted @ 2015-10-08 10:40 ywda 阅读(322) 评论(0) 收藏举报

刷新页面返回顶部

FOREVER IS NOW !

UI：动画

公告