1. 程式人生 > >iOS:給標簽欄控制器的UITabbarItem添加點擊動效

iOS:給標簽欄控制器的UITabbarItem添加點擊動效

icontrol 標簽 tabbar com 1.0 gif alt gif動畫 transform

一、介紹

現在很多app,附帶很炫的點擊效果,讓用戶享受到非常棒的體驗,例如動畫、漸變、音效等。

當然,市面上大多數app的標簽欄點擊還是挺中規中矩的,只是切換圖片而已。然而,這個是可以優化的,附帶點特效能極大為app增色。

例如音效和波動,淘寶和今日頭條就是這麽實現的,效果特別棒。這裏實現一下UITabbarItem波動的動畫。

二、代碼

1、遍歷標簽欄控制器的UITabbarItem,給其每一個子視圖按鈕添加點擊事件

    for (UIControl *tabBarButton in [UITabBarController tabBar].subviews) {
        
if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")] || [tabBarButton isKindOfClass:NSClassFromString(@"UIButton")]) { [tabBarButton addTarget:self action:@selector(tabBarButtonClick:) forControlEvents:UIControlEventTouchUpInside]; } }

2、在點擊事件中實現波動動畫

- (void)tabBarButtonClick:(UIControl *)tabBarButton {
    for (UIView *imageView in tabBarButton.subviews) {
        if ([imageView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")] ||
            [imageView isKindOfClass:NSClassFromString(@"UIImageView")]) {
            CAKeyframeAnimation 
*continueAimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; continueAimation.duration = 0.4f; NSMutableArray *continueValues = [NSMutableArray array]; [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]]; [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.6, 0.6, 1.0)]]; [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)]]; [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]]; [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1.0)]]; [continueValues addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]]; continueAimation.values = continueValues; continueAimation.removedOnCompletion = NO; continueAimation.fillMode = kCAFillModeForwards; [imageView.layer addAnimation:continueAimation forKey:nil]; } } }

三、效果 (參看淘寶的就行,gif動畫不太明顯,可以自己打開淘寶看看)

技術分享圖片

iOS:給標簽欄控制器的UITabbarItem添加點擊動效