UIView 바운스 애니메이션을 만드는 방법은 무엇입니까?


92

라는 UIView에 대해 다음과 같은 CATransition이있어 finalScoreView맨 위에서 화면으로 들어갑니다.

CATransition *animation = [CATransition animation];
animation.duration = 0.2;
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromBottom;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[gameOver.layer addAnimation:animation forKey:@"changeTextTransition"];
[finalScoreView.layer addAnimation:animation forKey:@"changeTextTransition"];

아래로 내려온 후 한 번 튀어 나온 다음 가만히 있도록하려면 어떻게해야합니까? 여전히 상단에서 화면으로 들어가야하지만 아래로 내려 오면 튀어 오릅니다.

어떤 도움이라도 대단히 감사하겠습니다, 감사합니다!


3
iOS7 이상을 타겟팅하고 있습니까? 그렇다면 UIKit Dynamics
WDUK

답변:


144

iOS7에와 UIKit 동성으로 사용하기 위해 필요 더 이상 없다 CAKeyframeAnimations또는 UIView애니메이션!

Apple의 UIKit Dynamics Catalog 앱을 살펴보십시오 . 또는 Teehanlax는 github전체 프로젝트에 대한 명확하고 간결한 튜토리얼 을 제공합니다 . 다이나믹에 대한 더 자세한 튜토리얼을 원한다면 Ray Winderlich 튜토리얼 이 좋습니다. 항상 그렇듯이 Apple 문서는 훌륭한 첫 번째 목적지 이므로 문서에서 UIDynamicAnimator 클래스 참조 를 확인하십시오 .

다음은 Teenhanlax 튜토리얼의 코드입니다.

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior* gravityBehavior = 
                [[UIGravityBehavior alloc] initWithItems:@[self.redSquare]];
[self.animator addBehavior:gravityBehavior];

UICollisionBehavior* collisionBehavior = 
                [[UICollisionBehavior alloc] initWithItems:@[self.redSquare]]; 
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior:collisionBehavior];

UIDynamicItemBehavior *elasticityBehavior = 
                [[UIDynamicItemBehavior alloc] initWithItems:@[self.redSquare]];
elasticityBehavior.elasticity = 0.7f;
[self.animator addBehavior:elasticityBehavior];

그리고 여기에 결과가 있습니다

스퀘어 바운스

UIKit Dynamics는 iOS7에 추가 된 정말 강력하고 사용하기 쉬운 추가 기능으로 멋진 UI를 얻을 수 있습니다.

다른 예 :

버튼 바운스 바운스 슬라이드 스프링 컬렉션 WWDC 스프린트 컬렉션

UIKit 역학을 구현하는 단계는 항상 동일합니다.

  1. 를 작성 UIDynamicAnimator하고 강한 특성에 저장
  2. 하나 이상의 UIDynamicBehaviors. 각 동작에는 하나 이상의 항목이 있어야하며 일반적으로 애니메이션을 적용 할 뷰가 있어야합니다.
  3. 에 사용 된 항목의 초기 상태가 시뮬레이션 UIDynamicBehaviors내에서 유효한 상태 인지 확인합니다 UIDynamicAnimator.

1
안녕 마이클, 도와 주셔서 감사합니다! 이것은 확실히하기 매우 쉽습니다! 나는 그것을 시도했고 그것이보기의 맨 아래에 도달했을 때 작동하지만 다른보기에서는 작동하지 않습니다 -stackoverflow.com/questions/21895674/…- 당신이 저를 도울 수 있다면 사랑하고 싶습니다! :) 감사합니다
user3127576 2014

2
거대한 튜토리얼이지만 바운스를 위해 한 줄의 코드, usingSpringWithDamping을 사용합니다!
Fattie 2014-06-08

2
위와 같이 Uitableview 바운스 애니메이션에 대한 일부 코드 샘플을 공유 할 수 있습니까? UITableview로 시도하고 있지만 어디서부터 시작해야할지 모르겠습니다.
Dinesh

1
UIKit Dynamics는 예제 사례를 다룰 때 유용합니다. 그러나 실제 작업에 관해서는 그것이 얼마나 원시적이고 제한적인지 알 수 있습니다. 한 가지 큰 문제는 UIDynamicItemBehavior(동작이 아니라 실제로 속성 인 ) 재정의입니다 . 다른 행동에 다른 물리적 특성을 사용할 수는 없습니다. 또 다른 경우는 UIScrollView와 같은 고무 경계를 구현하는 것입니다. 매우 복잡합니다. 더 많이 쓸 수 있지만 댓글이 너무 짧습니다.
kelin

2
전체 코드를 추가하십시오. 코드는 만드는 방법에 대해 설명 UIDynamicAnimator하고 그와 관련된 객체하지만 사용 방법에 응답하지 않습니다
Vyachaslav Gerchicov

261

UIDynamicAnimatoriOS 7에서 더 간단한 대안 은 Spring Animation (새롭고 강력한 UIView 블록 애니메이션)으로, 감쇠 및 속도로 멋진 바운싱 효과를 제공 할 수 있습니다. Objective C

[UIView animateWithDuration:duration
  delay:delay
  usingSpringWithDamping:damping
  initialSpringVelocity:velocity
  options:options animations:^{
    //Animations
    }
  completion:^(BOOL finished) {
    //Completion Block
}];

빠른

UIView.animateWithDuration(duration,
     delay: delay,
     usingSpringWithDamping: damping,
     initialSpringVelocity: velocity,
     options: options,
     animations: {
            //Do all animations here
            }, completion: {
            //Code to run after animating
                (value: Bool) in
        })

스위프트 4.0

UIView.animate(withDuration:duration,
     delay: delay,
     usingSpringWithDamping: damping,
     initialSpringVelocity: velocity,
     options: options,
     animations: {
            //Do all animations here
            }, completion: {
            //Code to run after animating
                (value: Bool) in
        })

usingSpringWithDamping 0.0 == 매우 탄력 있습니다. 1.0은 오버 슈트없이 부드럽게 감속합니다.

initialSpringVelocity대략 "원하는 거리를 원하는 시간으로 나눈 값"입니다. 1.0은 1 초 동안 이동 한 총 애니메이션 거리에 해당합니다. 예를 들어 총 애니메이션 거리가 200 포인트이고 애니메이션 시작이 뷰 속도 100pt / s와 일치하도록하려면 값 0.5를 사용합니다.

더 자세한 자습서 및 샘플 앱은이 자습서 에서 찾을 수 있습니다 . 누군가에게 유용하기를 바랍니다.


2
바로 애니메이션을 얻을 수 있도록 제가 만든 데모 프로젝트입니다. 즐겨! github.com/jstnheo/SpringDampingDemo
jstn 2015

그 데모 프로젝트를 응원합니다. 이러한 값은 매우 둔감하기 때문에 이러한 값을 알아내는 데 정말 도움이됩니다. 나는 애플은 분명 그들에게 만들었다 소원
kakubei

32

바로 애니메이션을 얻을 수 있도록 제가 만든 데모 프로젝트입니다. 즐겨!

SpringDampingDemo

여기에 이미지 설명 입력


그 데모 프로젝트를 응원합니다. 이러한 값은 매우 둔감하기 때문에 이러한 값을 알아내는 데 정말 도움이됩니다. 나는 애플은 분명 그들에게 만들었다 소원
kakubei

-1
- (IBAction)searchViewAction:(UIButton*)sender
{
  if(sender.tag == 0)
  {
    sender.tag = 1;

    CGRect optionsFrame2 = self.defaultTopView.frame;
    optionsFrame2.origin.x = -320;

    CGRect optionsFrame = self.searhTopView.frame;
    optionsFrame.origin.x = 320;
    self.searhTopView.frame = optionsFrame;

    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:1.0 options:0 animations:^{

        CGRect optionsFrame = self.searhTopView.frame;

        optionsFrame.origin.x = 0;
        self.searhTopView.frame = optionsFrame;
        self.defaultTopView.frame = optionsFrame2;
    } completion:^(BOOL finished) {
    }];        
}
else
{
    sender.tag = 0;

    CGRect optionsFrame2 = self.defaultTopView.frame;
    optionsFrame2.origin.x = 0;

    CGRect optionsFrame = self.searhTopView.frame;
    optionsFrame.origin.x = 320;

    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:1.0 options:0 animations:^{

        CGRect optionsFrame = self.searhTopView.frame;

        optionsFrame.origin.x = 320;
        self.searhTopView.frame = optionsFrame;
        self.defaultTopView.frame = optionsFrame2;
    } completion:^(BOOL finished) {
    }];
}
}

1
코드에 설명과 주석이 없습니다. 이것은 도움이되지 않습니다
로렌조
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.