特效！特效！特效！重要的事情說三遍
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
