developer tip

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

copycodes 2020. 9. 8. 08:11
반응형

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


라는 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"];

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

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


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. Create one or more UIDynamicBehaviors. Each behavior should have one or more items, typically a view to animate.
  3. Make sure that the initial state of the items used in the UIDynamicBehaviors is a valid state within the UIDynamicAnimator simulation.

A simpler alternative to UIDynamicAnimator in iOS 7 is Spring Animation (a new and powerful UIView block animation), which can give you nice bouncing effect with damping and velocity: Objective C

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

Swift

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
        })

Swift 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 == very bouncy. 1.0 makes it smoothly decelerate without overshooting.

initialSpringVelocity is, roughly, "desired distance, divided by desired seconds". 1.0 corresponds to the total animation distance traversed in one second. Example, total animation distance is 200 points and you want the start of the animation to match a view velocity of 100 pt/s, use a value of 0.5.

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


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

SpringDampingDemo

여기에 이미지 설명 입력


- (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) {
    }];
}
}

참고 URL : https://stackoverflow.com/questions/21892105/how-to-create-a-uiview-bounce-animation

반응형