실행중인 애니메이션을 부드럽게 업데이트

Question

연속 된 애니메이션을 실행하는 이미지가 여러 개 있습니다. 애니메이션의 일부가 아닌 한, 이들 애니메이션을 매끄럽게 업데이트하여 애니메이션 사이에 눈에 띄는 변화가 없도록하는 방법은 무엇입니까?

이미지를 회전 및 크기 조절 한 다음 애니메이션을 그대로 회전하여 업데이트하지만 약간 확대 할 수 있습니다. 현재 눈에 띄는 변화가 있습니다.

스케일링은 애니메이션 블록 내에서 수행되어야하며 회전 애니메이션을 이전처럼 실행해야한다고 생각할 수 있습니다. 문제는 회전하는 동안 비례가 멈추는 것입니다.

나는 매끄러 워야합니다. 예 : 이 코드 블록은 사용자가 런타임에 UIView 애니메이션에서이 상태 변경됩니다 귀하의 의견에 연속 애니메이션을해야 할 것 경우가 UIViewAnimationOptionBeginFromCurrentState

[UIView animateWithDuration:0.5 
         delay:0 
        options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseOut //| UIViewAnimationOptionRepeat 
       animations:(void (^)(void)) ^{ 
        imageViewToScale.transform = CGAffineTransformMakeScale(1.2, 1.2); 
       } 
       completion:^(BOOL finished){ 
        //imageViewToScale.transform=CGAffineTransformIdentity; 
       }]; 

Answer 1

는 솔직히 사용 그가 가장 아니더라도, 부드러운 스케일링가 발생하지 않습니다 완료 처리기가 반복적으로 호출되는 동안 지터가 발생할 수 있습니다.

그러나 블록에서 2 개의 애니메이션을 수행하려는 경우 동일한 블록에서 축척과 회전을 설정하면 동시에 발생합니다. 또는 블록을 시작하는 함수를 호출하고 완료시 해당 뷰에 대한 새로운 애니메이션이 있는지 다시 호출 할 수 있습니다. 아무 것도 없다면 완성 블록이 멈추고 일종의 재귀 적으로 사용합니다. 비록 많은 연속적인 뷰에서 많은 애니메이션을 수행하는 경우에는 권장하지 않는 접근 방식은 아니지만 반복적으로 사용하는 것이 좋습니다.

OpenGLES에서는 NSTimer를 사용하여 앱의 모든 애니메이션 업데이트를 처리하는 연속 애니메이션을 실행합니다. 이 경로를 더 열심히한다면 원활한 애니메이션을 위해 easing/quadratic curve 함수를 직접 구현해야합니다. 그러나 클립을 확장하면 각 이미지에 대한 상태를 설정 한 다음 타이머가 작동하면 상태를 기반으로 변환을 업데이트 할 수 있습니다. 그래서 그것이도/라디안의 특정 양만큼 회전하면 스케일을 설정할 수 있습니다. 애니메이션을 부드럽게 유지하려면 NSTimerIntervals를 사용하여 경과 된 시간만큼 이동 한 거리를 곱하여 부드러운 애니메이션을 얻으십시오. 개인적으로 이것은 내가 화면에서 계속 움직이고 있을지 모르는 것들에 대해 사용하는 경로이지만, 두 번 움직이면 끝날 수도 있습니다.

편집 : 요청한대로 두 번째 단계를 수행하기위한 코드!

따라서 애니메이션 단계와 NSTimeInterval을 폴링하여 각 단계를 경과 한 시간만큼만 업데이트하도록 NSTimer를 선언해야합니다.

- (void)startAnimation 
{ 
    animationTimer = [NSTimer scheduledTimerWithTimeInterval:animationInterval target:self selector:@selector(drawView:) userInfo:nil repeats:YES]; 
} 

- (void)stopAnimation 
{  
    [animationTimer invalidate]; 
    animationTimer = nil; 
} 

그런 다음 당신은 당신이 anmation 뭔가를 시작할 때 일을 할 때보기 시작하거나 걷어해야합니다

NSTimer *animationTimer; 
NSTimeInterval animationInterval; 
NSTimeInterval lastUpdateTime; 
float currentRotation; 
float current scale; 

는 세 번째로 당신은 당신의 뷰의 업데이트를 해고하는 NSTimer를 설정해야 이것은 당신의 drawView에서 다음

- (void)setAnimationInterval:(NSTimeInterval)interval 
{ 
    animationInterval = interval; 

    if(animationTimer) 
    { 
     [self stopAnimation]; 
     [self startAnimation]; 
    } 
} 

작동과 같은 : 애니메이션이 부드럽고 단점이되도록 방법을 사용하면 타이머의 각 화재 사이에 경과 시간에 따라 변환을 업데이트해야 시간이지 나면서. 본질적으로 선형 변환.

- (void)drawView:(id)sender 
{ 
    if(lastUpdateTime == -1) 
    { 
     lastUpdateTime = [NSDate timeIntervalSinceReferenceDate]; 
    } 

    NSTimeInterval timeSinceLastUpdate = [NSDate timeIntervalSinceReferenceDate] - lastUpdateTime; 

    currentRotation = someArbitrarySCALEValue * timeSinceLastUpdate; 
    currentScale = someArbitraryROTATIONValue * timeSinceLastUpdate; 

    CGAffineTransform scaleTrans = CGAffineTransformMakeScale(currentScale,currentScale); 
    CGAffineTransform rotateTrans = CGAffineTransformMakeRotation(currentRotation * M_PI/180); 

    imageViewToScale.transform = CGAffineTransformConcat(scaleTrans, rotateTrans); 


    lastUpdateTime = [NSDate timeIntervalSinceReferenceDate]; 
} 

참고로 애니메이션에 여유가 생기지 않으며 물리학에서 멈추지 않아도됩니다. 또한 회전이 360을 넘을 때 0으로 재설정하고 각도와 라디안 사이를 각각 변환해야합니다.

바운스 (bounces) 및 마찰 (friction)과 같은 것들을 물리학을 사용하여 멋지게 느리게 만듭니다.

시간이 지남에 따라 부드럽게 움직이는 이퀄라이저, 2 차 보간을 자연스럽게 진행하기위한 2 차 그래프를 살펴보십시오.