iOS动画效果三:CABAsicAnimation实现平移、旋转和放大

iOS动画效果三:CABAsicAnimation实现平移、旋转和放大,第1张

使用CABAsicAnimation来实现动画的放缩和旋转是比较常用的,这篇主要介绍CABasicAnimation实现简单的动画效果

最终的效果图为:

Demo地址

对应的实现文件是SecondViewController

首先,我们先定义一个UIView以及三个button按钮,分别对应平移、放大和旋转

在.h文件中定义相应的属性

之后,在.m文件中实现相应的懒加载

将UIView以及button添加到界面上

之后,我们先来实现平移动画,实现下面的方法

这里面遇到挺多坑的,下面逐条说明一下

接下俩,我们类似添加相应的放大和旋转的动画效果

这样,我们就完成了CABasicAnimation实现平移、放大和旋转的动画效果

这种动画效果使用挺多的

另外,我们阅读苹果开发文档时,我们可以看到协议CAAnimationDelegate,通过这个协议我们可以观察动画的开始和结束。

在平移动画中,让CABasicAnimation遵守这个协议

实现相应的协议方法

比较重要的是,我们通过协议方法可以判断动画是否正常完成还是被打断,这个我以前就碰到过动画过程被UITableView 的reloadData打断,导致动画表现异常,具体可以看下这篇文章

CAnimationGroup动画执行时间比duration小

)

最终效果图为:

Demo地址

我写的同一系列的其他文章

iOS开发中动画效果的探究(一)

iOS动画效果的探究二:UIView Animation实现动画

iOS动画效果三:CABAsicAnimation实现平移、旋转和放大

ios动画效果四:使用Pop框架实现d簧效果

iOS动画效果五:CABasicAnimation实现绕定点旋转的效果 ]

iOS动画效果六:实现自定义的push转场动画

iOS动画效果七:实现自定义present转场动画效果

iOS动画效果八:实现类似系统的测滑返回效果

项目当中要实现一个电子档案,效果呢是类似小说翻页的效果。很简单,先来说一下实现思路

写一个用来接收你想展示信息的控件,如果只是文字展示,那就label,如果带图片什么的,那就自定义一个view

然后就是左右滑动的手势,在左右手势实现方法中做数据判断展示,加上动画效果就ok 了

1、在self.view 上创建label

2、添加左右手势

3、根据左右手势实现方法,给 label.text 数组判断赋值

4、执行翻页动画

- ( void )viewDidLoad {

    [ super viewDidLoad]

     self .view.backgroundColor = [UIColor whiteColor]

    _arr = @[@"11111",  @"22222", @"33333",@"44444",@"55555"]

    [ self buildLable]

    [ self configTapGes]

    _count=0

}

#pragma mark - label

- ( void )buildLable {

    _labelView= [[UIViewalloc]init]

    [ self .view addSubview:_labelView]

    [_labelView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerX.equalTo( self .view.mas_centerX)

        make.centerY.equalTo( self .view.mas_centerY)

        make.width.mas_offset(WIDTH-40)

        make.height.mas_offset(500)

    }]

    _labelView.backgroundColor = [UIColor orangeColor]

    _label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, WIDTH-40, 500)]

    _label.backgroundColor = [UIColor grayColor]

    _label.numberOfLines = 0

    _label.text = [_arr objectAtIndex:0]

    [ self .labelView addSubview:_label]

}

#pragma mark - 手势

- ( void )configTapGes {

    _fromRightSwip= [[UISwipeGestureRecognizeralloc]initWithTarget: self action: @selector (nextPage:)]

    _fromRightSwip.direction = UISwipeGestureRecognizerDirectionLeft

    [ self .view addGestureRecognizer:_fromRightSwip]

    _fromLeftSwip= [[UISwipeGestureRecognizeralloc]initWithTarget: self action: @selector (forwardPage:)]

    _fromLeftSwip.direction = UISwipeGestureRecognizerDirectionRight

    [ self .view addGestureRecognizer:_fromLeftSwip]

}

#pragma mark - 下一页按钮响应事件

- ( void )nextPage:(UIButton*)btn {

     if (_count<_arr.count-1) {

        _label.text= [_arrobjectAtIndex:_count+1]

        NSString*subtypeString

        subtypeString =kCATransitionFromRight

        [ self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:_labelView]

        _count=_count+1

    } else {

        _count=_arr.count-1

//        [self showAlert:@"已经是最后一页"]

    }

    NSLog(@"下一页:%ld", ( long )_count)

}

#pragma mark - 上一页按钮响应事件

- ( void )forwardPage:(UIButton*)btn {

     if (_count>0) {

        _label.text= [_arrobjectAtIndex:_count-1]

        NSString*subtypeString

        subtypeString =kCATransitionFromLeft

        [ self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:_labelView]

        _count=_count-1

    } else {

        _count=0

//        [self showAlert:@"已经是第一页"]

    }

    NSLog(@"上一页:%ld", ( long )_count)

}

#pragma CATransition动画实现

/**

 *  动画效果实现

 *

 *  @param type    动画的类型 在开头的枚举中有列举,比如 CurlDown//下翻页,CurlUp//上翻页

,FlipFromLeft//左翻转,FlipFromRight//右翻转 等...

 *  @param subtype 动画执行的起始位置,上下左右

 *  @param view    哪个view执行的动画

 */

- ( void )transitionWithType:(NSString*) typeWithSubtype:(NSString*) subtypeForView: (UIView*) view {

    CATransition *animation = [CATransition animation]

    animation.duration=0.7f

    animation.type= type

    if (subtype != nil ) {

        animation.subtype= subtype

    }

    animation.timingFunction = UIViewAnimationOptionCurveEaseInOut

    [view.layeraddAnimation:animationforKey:@"animation"]

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11414821.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存