tab点击,图片放大缩小动画

作者: 灯红酒绿映不出的落寞 | 来源:发表于2017-11-27 16:17 被阅读59次

项目中这次改版应产品要求加入tabbar点击做放大缩小动画,只改变图片,标题不做动画。先看效果图 未命名.gif

Demo地址

图片做放大缩小动画,很好做。用CoreAnimation的帧动画就可以实现。不过貌似系统并没有开出开关于tabbar上的imageView这个属性。其实我们找到在tab上的imageView,这一切问题就好解决了。
直接上代码
声明一个tab继承系统tabbar
#import <UIKit/UIKit.h>

@interface FFTabBar : UITabBar

@end
.m文件里可以通过layoutSubviews找到需要做动画的tabItem
- (void)layoutSubviews{
    [super layoutSubviews];
    for (UIControl *tabBarButton in self.subviews) {
        if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            [tabBarButton addTarget:self action:@selector(tabBarButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        }
    }
}

实现点击方法,找系统的私有属性UITabBarSwappableImageView 。这个就是我们今天要找的tab上的imageView
- (void)tabBarButtonClick:(UIControl *)tabBarButton
{
    NSInteger index = [self.items indexOfObject:self.selectedItem];
    if (index != self.selectTabBarTag) {
        for (UIView *imageView in tabBarButton.subviews) {
            if ([imageView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
                [FFTabModel selectTabBarDoScaleAnimationWithView:imageView];
            }
        }
    }
    
    self.selectTabBarTag = index;
}

#pragma mark - Associated Object
- (void)setSelectTabBarTag:(NSInteger)object{
    objc_setAssociatedObject(self, @selector(selectTabBarTag), @(object), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    
}

- (NSInteger)selectTabBarTag{
    return [objc_getAssociatedObject(self, @selector(selectTabBarTag)) integerValue];
}
上边通过私有属性UITabBarSwappableImageView 找到我们想要的imageView然后做相应的动画效果,这里通过runtime运行时,添加属性为NSInteger的selectTabBarTag。目的就是防止重复点击动画,
但是有时候我们项目中往往第一次进入App选择的并不是第0个item,有存在其他情况。这时候我们就要考虑动画保障点击item无论是任何一个的时候都要肯定出现动画,这里我做了一个判断
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        //为保证动画不会重复以及点击动画的正确性,特增加selectTabBarTag, 保证selectTabBarTag和当前tabBarController.selectedIndex一致。
        self.selectTabBarTag = 1;
    }
    return self;
}

到这里就写完了,Demo为项目源码。可放心直接拿去使用

Demo地址

相关文章

  • tab点击,图片放大缩小动画

    项目中这次改版应产品要求加入tabbar点击做放大缩小动画,只改变图片,标题不做动画。先看效果图未命名.gif D...

  • 点击图片放大缩小(遮罩)

    前言 想通过js做一个点击图片,将图片放大到屏幕中间,并遮罩其他地方,再点击图片或遮罩部分,还原图片的功能。 1....

  • iOS 中实现图片点击全屏预览

    点击单张图片的全屏预览和双指捏合缩小放大

  • vue 点击当前图片放大缩小

    如果是点击一张图,弹出一张大图,那自然是简单的,但是如果只在当前区域放大缩小,该怎么做呢? 一、html中事件绑定...

  • PS的简单使用

    快捷键 ctrl + alt + 空格 按住不放,点击鼠标放大缩小图片 alt + delete ...

  • PS学习1

    2020.3.21 好习惯:背景图层复制一层 放大镜:单击放大图片,按住Alt同时单击缩小图片 抓手:移动画布查看...

  • 转场动画(三) --交互式转场缩小动画

    一 捏合放大的图片自动缩小隐藏 在点击放大的视图容器中有scrollView 可以缩放 在scrollView的...

  • Swift Demo

    *1> 简单实现列表折叠效果 * 2. 图片的放大缩小,移动 * 3. 购买详情动画

  • javascript案例

    1 图片的放大和缩小效果演示 1 图片的放大和缩小效果演示原理说明:图片逐渐放大和逐渐缩小是指在一定时间内图片发生...

  • PS常用快捷键

    吸色 点击字母 i 拖动点击字母 v 放大图层 放大缩小 修改画布大小 修改图片背景色选中图层,右击图层-混合选项...

网友评论

    本文标题:tab点击,图片放大缩小动画

    本文链接:https://www.haomeiwen.com/subject/jesdbxtx.html