iOS 틱 톡 동 영상 에 애니메이션 효 과 를 불 러 오 는 실현 방법

머리말
요 며칠 동안 계속 오픈 소스 의 틱 톡 demo 두 지 두 용 과 함께 했 습 니 다.오늘 여러분 과 공유 하 는 것 은 틱 톡 이나 빠 른 손 에 동 영상 을 불 러 오 는 애니메이션 입 니 다.이 로 딩 효 과 는 실 용적 입 니 다.다음 과 같은 말 은 많이 하지 않 겠 습 니 다.편집장 님 과 함께 공부 하 겠 습 니 다.
위의 그림 에서 완제품 을 보다.

실현 원리
우선 보 기 를 만 들 겠 습 니 다.

@interface ViewController ()
@property (nonatomic, strong) UIView *playLoadingView;
@end
@implementation ViewController
- (void)viewDidLoad {
 [super viewDidLoad];
 
 //init player status bar
 self.playLoadingView = [[UIView alloc]init];
 self.playLoadingView.backgroundColor = [UIColor whiteColor];
 [self.playLoadingView setHidden:YES];
 [self.view addSubview:self.playLoadingView];
 
 //make constraintes
 [self.playLoadingView mas_makeConstraints:^(MASConstraintMaker *make) {
 make.center.equalTo(self.view);
 make.width.mas_equalTo(1.0f); //  1 dp
 make.height.mas_equalTo(0.5f); //  0.5 dp
 }];
 
 [self startLoadingPlayAnimation:YES]; //      
}

여기 서 우 리 는 우리 가 실제로 만 든 1pt 너비 0.5 pt 너비 의 보 기 를 볼 수 있다.
애니메이션 에 이 어 실 현 된 코드

- (void)startLoadingPlayAnimation:(BOOL)isStart {
 if (isStart) {
 self.playLoadingView.backgroundColor = [UIColor whiteColor];
 self.playLoadingView.hidden = NO;
 [self.playLoadingView.layer removeAllAnimations];
 
 CAAnimationGroup *animationGroup = [[CAAnimationGroup alloc] init];
 animationGroup.duration = 0.5;
 animationGroup.beginTime = CACurrentMediaTime() + 0.5;
 animationGroup.repeatCount = MAXFLOAT;
 animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 
 CABasicAnimation *scaleAnimation = [CABasicAnimation animation];
 scaleAnimation.keyPath = @"transform.scale.x";
 scaleAnimation.fromValue = @(1.0f);
 scaleAnimation.toValue = @(1.0f * ScreenWidth);
 
 CABasicAnimation *alphaAnimation = [CABasicAnimation animation];
 alphaAnimation.keyPath = @"opacity";
 alphaAnimation.fromValue = @(1.0f);
 alphaAnimation.toValue = @(0.5f);
 
 [animationGroup setAnimations:@[scaleAnimation, alphaAnimation]];
 [self.playLoadingView.layer addAnimation:animationGroup forKey:nil];
 } else {
 [self.playLoadingView.layer removeAllAnimations];
 self.playLoadingView.hidden = YES;
 }
}

끝나 면 이 몇 줄 의 코드 로 끝 냅 니 다.
사실 핵심 은 4 줄 코드 밖 에 없어 요.

CABasicAnimation *scaleAnimation = [CABasicAnimation animation];
scaleAnimation.keyPath = @"transform.scale.x";
scaleAnimation.fromValue = @(1.0f);
scaleAnimation.toValue = @(1.0f * ScreenWidth);

관건 은scaleAnimation.keyPath = @"transform.scale.x"; 여기 서 우 리 는 x 를 따라 크기 를 조정 해 야 한다.
크기 조정 값 은 1~화면 너비 입 니 다.물론 값 이 얼마 인지 스스로 제어 할 수 있 습 니 다.
하면,만약,만약...
물론@"transform.scale.y" 이 라 고 쓰 면 X,Y 와 함께 크기 를 조정 해 보 세 요.
총결산
이 애니메이션 기법 은 크기 조정@"transform.scale" 입 니 다.한 점 에서 layer 크기 조정 을 하면 로 딩 효과 가 나타 납 니 다.
마지막 으로 첨부demo （ 로 컬 다운로드 ）
자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.