特效！特效！特效！重要的事情说三遍

1.tabbar 点击按钮 特效

在

@interface TabBar : UITabBar

方法中 添加上这个方法 就可以做出 点击 tabbar 图标弹起来收回去再弹起来的效果 至于效果图 不好意思 gif不会做。。。。。

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    for (UIControl *tabBarButton in self.subviews) {
        if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            
            [tabBarButton addTarget:self action:@selector(tabBarButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        }
    }
}


- (void)tabBarButtonClick:(UIControl *)tabBarButton
{
    for (UIView *imageView in tabBarButton.subviews) {
        if ([imageView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
            //需要实现的帧动画
            CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
            animation.keyPath = @"transform.scale";
            animation.values = @[@1.0,@1.3,@0.9,@1.15,@0.95,@1.02,@1.0];
            animation.duration = 1;
            animation.calculationMode = kCAAnimationCubic;
            //把动画添加上去
            [imageView.layer addAnimation:animation forKey:nil];
        }
    }
}

---

2 tableview 下拉背景图拉伸不现实空白

截图

WeChat_1484284543.jpeg

好 下面来说一下思路

首先 这是一个可以滑动的tableview

那么 其实这是一个视觉欺骗

星空背景 跟 头像名字 其实不是一个东西～

头像跟名字是tableview的第0个cell
而星空背景 是贴在tableview上面的一张图片

下面我们就需要 让tableview 继承代理

//HeadViewH 这是图片的高度
//Gato_Width 屏幕宽
//underImage 背景图片（星空）

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsety = scrollView.contentOffset.y+scrollView.contentInset.top;
    if (offsety <= 0)
    {

        //放大
        CGRect frame= underImage.frame;
        frame.size.height = HeadViewH - offsety;
        frame.origin.x = offsety / 2;
        frame.size.width = Gato_Width - offsety;
        
        underImage.frame = frame;
        
    }
    else
    {
    }

}

然后你就可以随意拉了。。。当然 你需要一张高清的图片当作背景 然后被拉伸以后 他会变得很丑！

当然 你可能会想要另一种效果 就是 起初UINavigationBar 看不到 上滑页面以后 UINavigationBar慢慢显示出来

网上也有很多demo 其实很简单

只需要在 scrollviewdidscroll方法中 根据高度进行隐藏就好

贴上代码

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //1。拿到y值
    CGFloat contentOffY = scrollView.contentOffset.y;
    
    if (contentOffY > - 20) {
        self.navigationController.navigationBar.alpha = 20 / contentOffY;
        if (20 / contentOffY < 0.1) {
            self.navigationController.navigationBar.alpha = 0;
        }
    }else{
        self.navigationController.navigationBar.alpha = 1;
    }
}

---

3 关于下拉 头像跟背景改变，这是两种状态

效果图⬇️⬇️

下拉头像改变效果图

思路
利用了 scrollView 的滑动监听 动态改变 image view 属性

P1.NavgationBar 代码

#import "NavgationBarViewController.h"
#define MaxIconWH  70.0  //用户头像最大的尺寸
#define MinIconWH  30.0  // 用户头像最小的头像
#define MaxIconCenterY  44 // 头像最大的centerY
#define MinIconCenterY 22
#define maxScrollOff 180
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

@interface NavgationBarViewController ()<UITableViewDelegate>

/**
 *  用户头像
 */
@property (strong, nonatomic) UIImageView * titleIMg;

/**
 *  tableview
 */
@property (weak, nonatomic) IBOutlet UIScrollView * tableVIew;

@end

@implementation NavgationBarViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.automaticallyAdjustsScrollViewInsets = NO;
   // self.tableVIew.bounces = NO;
    self.tableVIew.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT+ 50);
    
    
}


-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [self.navigationController.navigationBar addSubview:self.titleIMg];

}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.titleIMg removeFromSuperview];
}





- (UIImageView *)titleIMg{
    if(_titleIMg == nil){
        UIImageView * img = [[UIImageView alloc] init];
        img.image = [UIImage imageNamed:@"1.jpg"];
        img.bounds = CGRectMake(0, 0, MaxIconWH, MaxIconWH);
        img.center = CGPointMake(SCREEN_WIDTH*0.5, MaxIconCenterY);
        img.contentMode = UIViewContentModeScaleAspectFill;
        img.layer.borderColor = [UIColor whiteColor].CGColor;
        img.layer.borderWidth = 1.2;
        img.layer.cornerRadius = MaxIconWH/2.0;
        img.layer.masksToBounds = YES;
        _titleIMg = img;
    }
    return _titleIMg;
}


- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    
    // 是scrollview的偏移量
    CGFloat updateY = scrollView.contentOffset.y ;
    NSLog(@"%f",scrollView.contentOffset.y);
    
    
    //  随着scrollview 的滚动， 改变bounds
    CGRect bound = _titleIMg.bounds;
    // 随着滚动缩减的头像的尺寸
    CGFloat reduceW =  updateY  *(MaxIconWH - MinIconWH)/(maxScrollOff - 64);
    reduceW = reduceW < 0 ? 0 : reduceW;
    // 宽度缩小的幅度要和headview偏移的幅度成比例，但是最小的宽度不能小于MinIconWH
    CGFloat yuanw =  MAX(MinIconWH, MaxIconWH - reduceW);
    _titleIMg.layer.cornerRadius = yuanw/2.0;
    bound.size.height = yuanw;
    bound.size.width  = yuanw;
    _titleIMg.bounds = bound;
    
    
    // 改变center  max - min 是滚动 center y值 最大的偏差
    CGPoint center = _titleIMg.center;
    CGFloat yuany =  MAX(MinIconCenterY, MaxIconCenterY - updateY * (MaxIconCenterY - MinIconCenterY)/(maxScrollOff - 64) ) ;
    yuany = yuany > MaxIconCenterY ? MaxIconCenterY : yuany;
    
    center.y = yuany;
    _titleIMg.center = center;
    

    
}

@end

P2.自定义View

#define HeadHeight 278 // headView的高度
#define MaxIconWH  100.0  //用户头像最大的尺寸
#define MinIconWH  30.0  // 用户头像最小的头像
#define MaxIconCenterY 120 // 头像最大的centerY
#define MinIconCenterY 42
#define HeadContentOffset @"contentOffset"
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
#define DRHColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *backScroll;
/**
 *  表头的view
 */
@property (strong, nonatomic) UIView * headView;
/**
 *  代替navigationbar 的自定义view
 */
@property (weak, nonatomic) IBOutlet UIView *navbarView;

/**
 *  用户头像
 */
@property (strong, nonatomic) UIImageView * titleIMg;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setUpScrollViewHeadView];
    [self.backScroll addSubview:self.headView];
    [self.navbarView addSubview:self.titleIMg];

}

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    self.navigationController.navigationBarHidden = YES;
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.navigationController.navigationBarHidden = NO;
}


/**
 *  初始化headview
 */
- (void)setUpScrollViewHeadView{
    
    self.backScroll.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT + 2);
    self.backScroll.contentInset = UIEdgeInsetsMake(HeadHeight, 0, 0, 0);
    // KVO
    [self.backScroll addObserver:self forKeyPath:HeadContentOffset  options:NSKeyValueObservingOptionNew context:nil];
    [self.backScroll setContentOffset: CGPointMake(0, -HeadHeight) animated:YES];
}


- (UIStatusBarStyle)preferredStatusBarStyle{
    return UIStatusBarStyleLightContent;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    if(![keyPath isEqualToString:HeadContentOffset])
        return;
    [self scrollViewDidScroll:self.backScroll];
}


- (UIView *)headView{
    if(_headView == nil){
        _headView = [[UIView alloc] initWithFrame:CGRectMake(0, -HeadHeight, SCREEN_WIDTH, HeadHeight)];
        _headView.backgroundColor = DRHColor(233, 73, 71);
    }
    return _headView;
}


- (UIImageView *)titleIMg{
    if(_titleIMg == nil){
        UIImageView * img = [[UIImageView alloc] init];
        img.center = CGPointMake(SCREEN_WIDTH/2.0, MaxIconCenterY);
        img.bounds = CGRectMake(0, 0, MaxIconWH ,MaxIconWH );
         img.image = [UIImage imageNamed:@"1.jpg"];
        img.contentMode = UIViewContentModeScaleAspectFill;
        img.layer.borderColor = [UIColor whiteColor].CGColor;
        img.layer.borderWidth = 1.2;
        img.layer.cornerRadius = MaxIconWH/2.0;
        img.layer.masksToBounds = YES;
        _titleIMg = img;
    }
    return _titleIMg;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat offsetY = scrollView.contentOffset.y;
    if(offsetY < -HeadHeight) {
        CGRect currentFrame = self.headView.frame;
        currentFrame.origin.y = offsetY;
        currentFrame.size.height = -1*offsetY;
        self.headView.frame = currentFrame;
    }
    
    // 是scrollview的偏移量
    CGFloat updateY = scrollView.contentOffset.y + HeadHeight;
    //NSLog(@"%f_____________%f",scrollView.contentOffset.y, updateY);

    
    //  随着scrollview 的滚动， 改变bounds
      CGRect bound = _titleIMg.bounds;
    // 随着滚动缩减的头像的尺寸
     CGFloat reduceW = updateY  *(MaxIconWH - MinIconWH)/(HeadHeight - 64);
    // 宽度缩小的幅度要和headview偏移的幅度成比例，但是最小的宽度不能小于MinIconWH
     CGFloat yuanw =  MAX(MinIconWH, MaxIconWH - reduceW);
    
    NSLog(@"-----%f+++++++%f",reduceW,yuanw);
    
    
    _titleIMg.layer.cornerRadius = yuanw/2.0;
    bound.size.height = yuanw;
    bound.size.width  = yuanw;
    _titleIMg.bounds = bound;

    
    // 改变center  max - min 是滚动 center y值 最大的偏差
    CGPoint center = _titleIMg.center;
    CGFloat yuany =  MAX(MinIconCenterY, MaxIconCenterY - updateY * (MaxIconCenterY - MinIconCenterY)/(HeadHeight - 64) ) ;
    
    center.y = yuany;
    _titleIMg.center = center;

}
@end

注意:本段代码 来自于CocoaChina 作者 [风飘飘的油菜花] 如果作者感觉侵权请联系我，我会及时删除侵权信息

---

4.点击按钮 弹出阴影选择框

效果图：

例子

demo ：传送门--点击我跳转下载链接

关键代码：

- (IBAction)btnTitleTapAction:(UIButton *)btn
{
    YJPopoverContentController *contentController = [[YJPopoverContentController alloc] init];
    
    YJPopoverController *popController = [[YJPopoverController alloc] initWithContentViewController:contentController popoverContentSize:CGSizeMake(150, 35 * 3 + 10)];
    [popController presentPopoverFromRect:btn.frame inView:btn.superview permitterArrowDirections:YJPopoverArrowDirection_up animated:YES];
}

- (IBAction)btnPopDownTapAction:(UIButton *)btn
{
    YJPopoverContentController *contentController= [[YJPopoverContentController alloc] init];
    
    YJPopoverController *popController = [[YJPopoverController alloc] initWithContentViewController:contentController popoverContentSize:CGSizeMake(150, 35 * 3 + 10)];
    [popController presentPopoverFromRect:btn.frame inView:btn.superview permitterArrowDirections:YJPopoverArrowDirection_down animated:YES];
}

- (IBAction)btnPopLeftTapAction:(UIButton *)btn
{
    YJPopoverContentController *contentController = [[YJPopoverContentController alloc] init];
    
    YJPopoverController *popController = [[YJPopoverController alloc] initWithContentViewController:contentController popoverContentSize:CGSizeMake(150, 35 * 3 + 10)];
    [popController presentPopoverFromRect:btn.frame inView:btn.superview permitterArrowDirections:YJPopoverArrowDirection_left animated:YES];
}

- (IBAction)btnPopRightTapAction:(UIButton *)btn
{
    YJPopoverContentController *contentController = [[YJPopoverContentController alloc] init];
    
    YJPopoverController *popController = [[YJPopoverController alloc] initWithContentViewController:contentController popoverContentSize:CGSizeMake(150, 35 * 3 + 10)];
    [popController presentPopoverFromRect:btn.frame inView:btn.superview permitterArrowDirections:YJPopoverArrowDirection_right animated:YES];
}

简单说一下这个demo跟三方的思路

点开的阴影部分 是一个新的controller 里面有一个tableview「这样就方便更改点开阴影部分样式了」

当然 大小也都是可以控制的

然后就是利用

YJPopoverController *popController = [[YJPopoverController alloc] initWithContentViewController:contentController popoverContentSize:CGSizeMake(150, 35 * 3 + 10)];

[popController presentPopoverFromRect:btn.frame inView:btn.superview permitterArrowDirections:YJPopoverArrowDirection_up animated:YES];

这行代码搞定
其中呢

YJPopoverController  == 三方Controller
contentController == 弹出样式controller 【可以是任何东西 只要你想得到】
CGSizeMake = 弹出controller的坐标
typedef NS_ENUM(NSUInteger, YJPopoverArrowDirection) {
    YJPopoverArrowDirection_up,         //箭头向上
    YJPopoverArrowDirection_left,       //箭头向左
    YJPopoverArrowDirection_down,       //箭头向下
    YJPopoverArrowDirection_right       //箭头向右
};

好 这个特效结束。

---

5 综合案例动画

4.综合案例

综合案例-path

综合案例-path.gif

综合案例-钉钉按钮

综合案例-钉钉按钮.gif

综合案例-点赞

综合案例-点赞.gif