【iOS】仿抖音，小红书视频引导动画

MapleYe

发布于 2020-03-30 17:06:34

1.8K0

发布于 2020-03-30 17:06:34

文章被收录于专栏：MapleYe MapleYeMapleYe

1、效果图

2、分析

从效果图来看，我们可以知道这个动画一共分为两部分： 1、滚动提示动画 2、点赞动画

2.1、滚动提示动画

该部分应该分为两步 1、scrollView设置偏移量 2、手指设置偏移量

代码：

CGPoint offset = self.tableView.contentOffset;
    CGPoint newOffset = offset;
    newOffset.y += [UIScreen mainScreen].bounds.size.height * 0.5;
    CGRect frame = self.guideView.frame;
    CGRect newFrame = frame;
    newFrame.origin.y = 88;
    [UIView animateWithDuration:2 animations:^{
        self.tableView.contentOffset = newOffset;
        self.guideView.frame = newFrame;
    } completion:^(BOOL finished) {
        [self.tableView setContentOffset:offset animated:YES];
        [UIView animateWithDuration:0.5 animations:^{
            self.guideView.alpha = 0;
        } completion:^(BOOL finished) {
            self.guideView.frame = frame;
        }];
    }];

2.2、点赞动画

动画拆分： 1、圆形缩小 -> 放大 -> 缩小 -> 放大 -> 消失 2、手指缩小 -> 放大 -> 缩小 -> 放大

因此，对于这种动画，我们最好使用帧动画。代码如下:

CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    animation.beginTime = CACurrentMediaTime() + delay;
    animation.duration = duration;
    NSMutableArray *values = [NSMutableArray array];[values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 2, 1.0)]];
    
    animation.values = values;
    [self.circleView.layer addAnimation:animation forKey:nil];
    
    CAKeyframeAnimation *animation2 = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    animation2.duration = duration;
    animation2.beginTime = CACurrentMediaTime() + delay;
    animation2.values = @[@(0.8), @(0.5)];
    animation2.delegate = self;
    [self.circleView.layer addAnimation:animation2 forKey:nil];
    
    CAKeyframeAnimation* animation3 = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    animation3.duration = duration;
    animation3.beginTime = CACurrentMediaTime() + delay;
    NSMutableArray *values3 = [NSMutableArray array];[values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1.0)]];
    [values3 addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.7, 0.7, 1.0)]];
    [values3 addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1.0)]];
    [values3 addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.7, 0.7, 1.0)]];
    [values3 addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1.0)]];
    animation3.values = values3;
    [self.fingerImgV.layer addAnimation:animation3 forKey:nil];