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

• 2020 年 3 月 30 日
• 筆記

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];

3、github地址

https://github.com/maple1994/RedBookGuideAnimation