美文网首页
ios 翻页效果动画

ios 翻页效果动画

作者: 肉肉要次肉 | 来源:发表于2020-06-18 15:11 被阅读0次

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

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

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

1、在self.view 上创建label

2、添加左右手势

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

4、执行翻页动画

一、声明属性

@interface FilesViewController ()

@property(nonatomic, strong) NSArray *arr;

@property(nonatomic, strong) UILabel *label;

@property(nonatomic, strong) UIView *labelView;

@property(nonatomic, strong) UISwipeGestureRecognizer *fromRightSwip;

@property(nonatomic, strong) UISwipeGestureRecognizer *fromLeftSwip;

@property(nonatomic, assign) NSInteger count;

@property(nonatomic, strong) UIBarButtonItem *nextBtn;

@property(nonatomic, strong) UIBarButtonItem *forwardBtn;

@end

二、创建label,手势

- (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:selfaction:@selector(nextPage:)];

    _fromRightSwip.direction = UISwipeGestureRecognizerDirectionLeft;

    [self.view addGestureRecognizer:_fromRightSwip];

    _fromLeftSwip= [[UISwipeGestureRecognizeralloc]initWithTarget:selfaction:@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"];

}

相关文章

网友评论

      本文标题:ios 翻页效果动画

      本文链接:https://www.haomeiwen.com/subject/xgsuxktx.html