如何为 UIImageview 添加弹跳动画？

Posted 2023-03-13

【中文标题】如何为 UIImageview 添加弹跳动画？

【英文标题】：How to add bouncing animation for UIImageview?

【发布时间】：2016-03-16 12:15:01

【问题描述】：

动画对我来说不熟悉，但现在我想学习它。所以我用谷歌搜索并获得了 spring 和 CAanimation，gravity，collition 之类的。

我的尝试：

-(void)longpress:(UILongPressGestureRecognizer *)longg



    UIGestureRecognizerState state =[longg state];
    if(state ==UIGestureRecognizerStateBegan ||state ==UIGestureRecognizerStateChanged)
    
        int temptag=[longg.view tag];
        UIImageView *views=(UIImageView *)arrimgstore[temptag];
                NSLog(@"got it to super view %@",views);
        [UIImageView animateWithDuration:0.1 delay:1 usingSpringWithDamping:2 initialSpringVelocity:2 options:UIViewAnimationOptionLayoutSubviews animations:^

            [_imgfull bringSubviewToFront:views];
         completion:nil];
    

当将bringsubviewtoFront 动作发生时，我喜欢添加一些吸引人的动画。

上面的代码有问题，请帮我实现这一点:) 谢谢。

【问题讨论】：

如果它已经在前面了怎么办？例如。不透明度从 0 到 1

弹跳也没问题，但没有得到@zcui93

使用 CAKeyFrameAnimation 来获得对动画的更多控制。您可以使用它制作许多自定义动画。

@TejaNandamuri 哪个最适合做 spring、cakeyframe、uidynamicanimator？

对于重力类型的动画，很容易使用 UIKitDynamics，如果你想逐帧自定义动画......你必须使用 CAKeyFrameAnimation。

【参考方案1】：

对于简单的弹跳动画，可以使用CAKeyFrameAnimation：

CAMediaTimingFunction *linearTiming = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
CAMediaTimingFunction *easeOutTiming = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

CAKeyframeAnimation *fbTranslationYAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.y"];
fbTranslationYAnimation.duration = 0.700;
fbTranslationYAnimation.values = @[@(0.000), @(-35.000), @(-55.000), @(-45.000), @(-35.000), @(-39.000), @(-43.000), @(-39.000), @(-35.000), @(-37.000), @(-35.000)];
fbTranslationYAnimation.keyTimes = @[@(0.000), @(0.143), @(0.286), @(0.429), @(0.571), @(0.643), @(0.714), @(0.786), @(0.857), @(0.929), @(1.000)];
fbTranslationYAnimation.timingFunctions = @[easeOutTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming];
fbTranslationYAnimation.beginTime = CACurrentMediaTime()+delay;
fbTranslationYAnimation.fillMode = kCAFillModeBoth;
fbTranslationYAnimation.removedOnCompletion = removedOnCompletion;
[[self.imgView layer] addAnimation:fbTranslationYAnimation forKey:@"BounceAnimation_TranslationY"];

这给出了效果：

有关CoreAnimation时间的更多信息，请阅读this

如果你想使用 UIKitDynamics 来做，你可以避免这么多代码。你可以这样做：

   - (void)viewDidLoad

    [super viewDidLoad];

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

然后将重力（下降），碰撞（当它接触到其他视图时做出反应），弹性（反弹）到图像视图：

 UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.imgView]];

[self.animator addBehavior:gravityBehavior];

UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.imgView]];

[collisionBehavior addBoundaryWithIdentifier:@"tabbar"
                                   fromPoint:self.tabBarController.tabBar.frame.origin
                                     toPoint:CGPointMake(self.tabBarController.tabBar.frame.origin.x + self.tabBarController.tabBar.frame.size.width, self.tabBarController.tabBar.frame.origin.y)];

[self.animator addBehavior:collisionBehavior];

UIDynamicItemBehavior *bounceBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.imgView]];
    bounceBehavior.elasticity = 0.75;
[self.animator addBehavior:bounceBehavior];