4

我已經在2個應用程序中看到了這種效果,我真的很想找到如何去做。僅在UIBarButtonItem中設置動畫效果

該動畫位於UIBarButtonItem中,僅適用於圖像。圖像是一個+符號,它旋轉到X.

如果你想看到效果,你必須開始與某人的對話,並在文本旁邊輸入theres圖標和表情符號的+按鈕。或者在另一個應用程序中查看效果視頻,點按酒吧按鈕後,您會看到它旋轉到X,http://www.youtube.com/watch?v=S8JW7euuNMo

我已經找到了如何做的效果,但只對UIImageView,我必須關閉所有的自動調整和視圖模式必須居中,然後將旋轉變換應用到它。我嘗試了很多方法來嘗試讓它在條形圖項中工作,到目前爲止,最好的方法是添加圖像視圖實例,然後設置它並設置視圖模式居中並自動關閉,然後將該圖像視圖用於自定義酒吧項目視圖。但是當我這樣做的時候,除了在做它的時候,這個效果會起作用,那麼這個圖像就會停留在一邊,而不是停留在已經存在的地方。我曾嘗試在動畫之前獲得中心,並在動畫期間設置它,但是它沒有做任何事情。

回答

6

所以這個答案是你必須做一個圖像視圖的實例,然後設置它沒有調整大小和視圖模式居中。然後將圖像視圖添加到具有自定義類型的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; 
} 
4

最近不得不在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 
    } 
} 
+2

如果您希望按鈕在動畫過程中可點擊,添加'.AllowUserInteraction'選項 – Jon 2016-08-26 14:47:31

1

我想繼續擴大攻大小的原生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; 
    } 
} 
相關問題