仅对UIBarButtonItem中的图像进行动画处理

Question

我已经在2个应用程序中看到了这种效果，我真的很想找到方法。

动画位于UIBarButtonItem中，并且仅针对图像。该图像是一个+符号，并且旋转为X。

如果要查看效果，您必须与某人开始对话，并且在文本输入旁边有用于图像和表情符号的+按钮。或者在另一个应用程序中播放有关该效果的视频，在他点击条形按钮之后，您会看到它旋转为X，http://www.youtube.com/watch?v=S8JW7euuNMo。

我已经找到了如何实现效果的方法，但是仅在UIImageView上，我必须关闭所有自动调整大小功能，并且必须将视图模式居中，然后对其应用旋转变换。我已经尝试了多种方法来尝试使其在酒吧项目中工作，到目前为止，最好的方法是添加图像视图实例，然后对其进行设置并设置视图模式居中并自动调整大小，然后将该图像视图用于自定义酒吧项目视图。但是，当我执行此操作时，效果会起作用，但执行此操作时，图像会稍微偏向侧面，而不是停留在原位置。香港专业教育学院试图获得动画之前的中心，并在动画中设置它，但没有做任何事情。

Answer 1

因此，答案是您必须创建一个Image视图的实例，然后将其设置为没有调整大小并且视图模式居中。然后将图像视图添加到具有自定义类型的UIButton，然后将该按钮用作条形项目的自定义视图。

- (IBAction)animate {
    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
        imageView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(45));
    } completion:^(BOOL finished) {
        imageView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(0));
        if ([imageView.image isEqual:[UIImage imageNamed:@"Add.png"]]) {
            imageView.image = [UIImage imageNamed:@"Close.png"];
        }
        else imageView.image = [UIImage imageNamed:@"Add.png"];
    }];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Add.png"]];
    imageView.autoresizingMask = UIViewAutoresizingNone;
    imageView.contentMode = UIViewContentModeCenter;
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(0, 0, 40, 40);
    [button addSubview:imageView];
    [button addTarget:self action:@selector(animate) forControlEvents:UIControlEventTouchUpInside];
    imageView.center = button.center;
    barItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    navItem.rightBarButtonItem = barItem;
}

Answer 2

最近不得不在Swift中做同样的事情。我created a tutorial包括入门项目和最终项目，并逐步注入了一些技巧。代码如下所示：

@IBOutlet weak var rightBarButton: UIBarButtonItem! {
    didSet {
        let icon = UIImage(named: "star")
        let iconSize = CGRect(origin: CGPointZero, size: icon!.size)
        let iconButton = UIButton(frame: iconSize)
        iconButton.setBackgroundImage(icon, forState: .Normal)
        rightBarButton.customView = iconButton
        rightBarButton.customView!.transform = CGAffineTransformMakeScale(0, 0)

        UIView.animateWithDuration(1.0,
            delay: 0.5,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 10,
            options: .CurveLinear,
            animations: {
                self.rightBarButton.customView!.transform = CGAffineTransformIdentity
            },
            completion: nil
        )    

        iconButton.addTarget(self, action: "tappedRightButton", forControlEvents: .TouchUpInside)        
    }
}

func tappedRightButton(){
    rightBarButton.customView!.transform = CGAffineTransformMakeRotation(CGFloat(M_PI * 6/5))
    UIView.animateWithDuration(1.0) {
        self.rightBarButton.customView!.transform = CGAffineTransformIdentity
    }
}

Answer 3

我想保留本机UIBarButtonItem视图提供的扩展分接尺寸（例如-initWithBarButtonSystemItem:target:action:与-initWithCustomView:）。

这是我的代码的基本实现。

- (void)setup {
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(navigationBarRightAction)];
}

- (void)navigationBarRightAction {
    UIView *itemView = [self.navigationItem.rightBarButtonItem performSelector:@selector(view)];
    UIImageView *imageView = [itemView.subviews firstObject];

    if (self.shouldRotate) {
        imageView.contentMode = UIViewContentModeCenter;
        imageView.autoresizingMask = UIViewAutoresizingNone;
        imageView.clipsToBounds = NO;
        imageView.transform = CGAffineTransformMakeRotation(M_PI_4);

    } else {
        imageView.transform = CGAffineTransformIdentity;
    }
}

Answer 4

我制作了一个“铃声”栏按钮项目，当有通知时，它会叮当响。但是我为此苦苦挣扎了很长时间，直到我将其与我想要的所有功能一起使用。您不必将按钮用作自定义视图，实际上，使用简单的UIImageView并添加UITapGestureRecognizer即可使用更少的代码。

这是我的解决方案（快速5）：

    func updateNumNotesAndAnimateBell(_ numNotes: Int) {

    guard let image = UIImage(named: "alertBellFill_\(numNotes)_90x90") else { return }
    let imageView = UIImageView(image: image)
    notifyBell.customView = imageView
    notifyBell.customView?.contentMode = .center
    let tap = UITapGestureRecognizer(target: self, action: #selector(notifyBellPressed))
    notifyBell.customView?.addGestureRecognizer(tap)

    let scaleTransformA = CGAffineTransform(scaleX: 0.8, y: 0.8)
    let rotateTransformA = CGAffineTransform(rotationAngle: 0.0)
    let hybridTransformA = scaleTransformA.concatenating(rotateTransformA)
    let rotateTransformB = CGAffineTransform(rotationAngle: -1*CGFloat.pi*20.0/180.0)
    let hybridTransformB = scaleTransformA.concatenating(rotateTransformB)

    notifyBell.customView?.transform = hybridTransformA
    UIView.animate(withDuration: 3,
                   delay: 1,
        usingSpringWithDamping: 0.1,
        initialSpringVelocity: 10,
        options: [.allowUserInteraction, .curveEaseInOut],
        animations: {
            self.notifyBell.customView?.transform = numNotes > 0 ? hybridTransformB : scaleTransformA
        },
        completion: nil
    )

}
@objc func notifyBellPressed(_ sender: UIBarButtonItem) {
    performSegue(withIdentifier: "goToNotificationsTVC", sender: self)
}

对我来说，主要发现是.allowUserInteraction必须包含在动画选项中，否则UIBarButtonItem在动画完成之前不会处于活动状态。另外，使用CGAffineTransform（rotationAngle：）时，您可能必须声明YourBarButtonItem.customView？.contentMode = .center，否则在尝试旋转时会扭曲图像。