iOS 動畫 第四章 視覺效果

[self conrnerRadiusTest];
    
    //shadowPath
[self shadowPathTest];
    
    //mask
[self maskTest];

//拉伸過濾
[self filterTest];
    
    //alpha
[self alphaTest];

圓角conrnerRadius:默認情況下衣洁,這個曲率值只影響背景顏色而不影響背景圖片或是子圖層。不過攒读,如果把masksToBounds設置成YES的話绸贡,圖層里面的所有東西都會被截取。

- (void)conrnerRadiusTest {
    UIView *layerView1 = [[UIView alloc] init];
    layerView1.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    layerView1.backgroundColor = [UIColor redColor];
    
    UIView *layerView2 = [[UIView alloc] init];
    layerView2.frame = CGRectMake(20.0f, 20.0f, 100.0f, 100.0f);
    layerView2.backgroundColor = [UIColor blueColor];
    [layerView2 addSubview:layerView1];
    
    UIView *shadowView = [[UIView alloc] init];
    shadowView.frame = CGRectMake(20.0f, 20.0f, 100.0f, 100.0f);
    shadowView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:shadowView];
    [self.view addSubview:layerView2];


    //set the corner radius on our layers
    layerView1.layer.cornerRadius = 20.0f;
    layerView2.layer.cornerRadius = 10.0f;
    shadowView.layer.cornerRadius = 10.0f;
    
    //add a border to your layers
    layerView1.layer.borderWidth = 2.0f;
    layerView2.layer.borderWidth = 2.0f;
    
    //add a shadow to layerView1
    layerView2.layer.shadowOpacity = 0.5f;
    layerView2.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
    layerView2.layer.shadowRadius = 5.0f;
    
    //add same shadow to shadowView (not layerView2)
    shadowView.layer.shadowOpacity = 0.5f;
    shadowView.layer.shadowOffset = CGSizeMake(-10.0f, 10.0f);
    shadowView.layer.shadowRadius = 5.0f;
    
    //enable clipping on the second layer
    layerView2.layer.masksToBounds = YES;
}

圖層邊框

//borderWidth:以點為單位的定義邊框粗細的浮點數(shù)凛辣,默認為0.
//borderColor:定義了邊框的顏色抱既,默認為黑色。 CGColorRef

陰影

//shadowOpacity:是一個必須在0.0(不可見)和1.0(完全不透明)之間的浮點數(shù) 默認值0
//CALayer的另外三個屬性:shadowColor(CGColorRef)扁誓,shadowOffset(CGSize)默認值是 {0, -3}和shadowRadius屬性控制著陰影的模糊度防泵。

陰影裁剪

//圖層的陰影繼承自內(nèi)容的外形,而不是根據(jù)邊界和角半徑來確定
//一個只畫陰影的空的外圖層蝗敢,和一個用masksToBounds裁剪內(nèi)容的內(nèi)圖層

shadowPath屬性

//shadowPath是一個CGPathRef類型(一個指向CGPath的指針)捷泞。CGPath是一個Core Graphics對象,用來指定任意的一個矢量圖形寿谴。我們可以通過這個屬性單獨于圖層形狀之外指定陰影的形狀锁右。

- (void)shadowPathTest {
    UIView *layerView1 = [[UIView alloc] init];
    layerView1.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    layerView1.backgroundColor = [UIColor redColor];
    
    UIView *layerView2 = [[UIView alloc] init];
    layerView2.frame = CGRectMake(200.0f, 200.0f, 100.0f, 100.0f);
    layerView2.backgroundColor = [UIColor blueColor];
    
    [self.view addSubview:layerView1];
    [self.view addSubview:layerView2];
    
    //enable layer shadows
    layerView1.layer.shadowOpacity = 0.5f;
    layerView2.layer.shadowOpacity = 0.5f;
    
    //create a squre shadow
    CGMutablePathRef squarePath = CGPathCreateMutable();
    CGPathAddRect(squarePath, NULL, layerView1.bounds);
    layerView1.layer.shadowPath = squarePath;
    CGPathRelease(squarePath);
    
    //create a cirular shadow
    CGMutablePathRef circlePath = CGPathCreateMutable();
    CGPathAddEllipseInRect(circlePath, NULL, layerView2.bounds);
    layerView2.layer.shadowPath = circlePath;
    CGPathRelease(circlePath);
}

圖層蒙板

//mask:CALayer類型 mask圖層定義了父圖層的部分可見區(qū)域

- (void)maskTest {
    UIImageView *mealView = [[UIImageView alloc] init];
    mealView.frame = CGRectMake(50.0f, 50.0f, 200.0f, 200.0f);
    mealView.image = [UIImage imageNamed:@"Meal"];
    [self.view addSubview:mealView];
    
    //create mask layer
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = CGRectMake(10.0f, 10.0f, 60.0f, 60.0f);
    UIImage *maskImage = [UIImage imageNamed:@"Meal"];
    maskLayer.contents = (__bridge id)maskImage.CGImage;

    //apply mask to image layer
    mealView.layer.mask = maskLayer;
}

拉伸過濾

//minificationFilter:縮小圖片
//magnificationFilter:放大圖片
/*
CALayer為此提供了三種拉伸過濾方法,他們是:
kCAFilterLinear: 默認 雙線性濾波算法
kCAFilterNearest: 三線性濾波算法
kCAFilterTrilinear:最近過濾 就是取樣最近的單像素點而不管其他的顏色
*/

- (void)filterTest {
    UIImage *digits = [UIImage imageNamed:@"Meal"];
    
    //set up digit views
    for (int k = 0; k < 6; k++) {
        UIView *view = [[UIView alloc] init];
        view.frame = CGRectMake(0.0, 110 * k, 100.0f, 100.0f);
        view.layer.contents = (__bridge id)digits.CGImage;
        view.layer.contentsRect = CGRectMake(0.0, 0.0f, 0.1f, 1.0f);
        view.layer.contentsGravity = kCAGravityResizeAspect;
        //filter
        view.layer.magnificationFilter = kCAFilterNearest;
        [self.view addSubview:view];
    }
    
    timerDigit = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(tickDigit) userInfo:nil repeats:YES];
    
    //set initial clock time
    [self tickDigit];
}

- (void)setDigit:(NSInteger)digit forView:(UIView *)view {
    //adjust contentsRect to select correct digit
    view.layer.contentsRect = CGRectMake(digit * 0.1, 0, 0.1, 1.0);
}

- (void)tickDigit {
    //convert time to hours, minutes and seconds
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    NSUInteger units = NSCalendarUnitHour| NSCalendarUnitMinute | NSCalendarUnitSecond;
    NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
    
    //set hours
    [self setDigit:components.hour / 10 forView:digitViews[0]];
    [self setDigit:components.hour % 10 forView:digitViews[1]];
    
    //set minutes
    [self setDigit:components.minute / 10 forView:digitViews[2]];
    [self setDigit:components.minute % 10 forView:digitViews[3]];
    
    //set second
    [self setDigit:components.second / 10 forView:digitViews[4]];
    [self setDigit:components.second % 10 forView:digitViews[5]];
}

組透明

//UIView有一個叫做alpha的屬性來確定視圖的透明度讶泰。CALayer有一個等同的屬性叫做opacity咏瑟,這兩個屬性都是影響子層級的

//設置了一個圖層的透明度,它包含的整個圖層樹像一個整體一樣的透明效果
//1種Info.plist文件中的UIViewGroupOpacity為YES來達到峻厚,但是這個設置會影響到這個應用响蕴,整個app可能會受到不良影響。
//2種設置CALayer的一個叫做shouldRasterize屬性
//為了啟用shouldRasterize屬性惠桃,我們設置了圖層的rasterizationScale屬性浦夷。默認情況下,所有圖層拉伸都是1.0辜王, 所以如果你使用了shouldRasterize屬性劈狐,你就要確保你設置了rasterizationScale屬性去匹配屏幕,以防止出現(xiàn)Retina屏幕像素化的問題呐馆。
//shouldRasterize和UIViewGroupOpacity一起的時候肥缔,性能問題就出現(xiàn)了

- (UIButton *)customButton {
    //creat button
    CGRect frame = CGRectMake(0, 0, 150, 150);
    UIButton *button = [[UIButton alloc] initWithFrame:frame];
    button.backgroundColor = [UIColor redColor];
    button.layer.cornerRadius = 10;
    
    //add label
    frame = CGRectMake(20, 10, 110, 30);
    UILabel *label = [[UILabel alloc] initWithFrame:frame];
    label.text = @"Hello Word";
    label.textAlignment = NSTextAlignmentCenter;
    [button addSubview:label];
    return button;
}

- (void)alphaTest {
    //create opaque button
    UIButton *button1 = [self customButton];
    button1.center = CGPointMake(50, 150);
    [self.view addSubview:button1];
    
    //create translucent button
    UIButton *button2 = [self customButton];
    button2.center = CGPointMake(250, 150);
    button2.alpha = 0.5;
    [self.view addSubview:button2];
    
    //enable rasterization for the translucent button
    button2.layer.shouldRasterize = YES;
    button2.layer.rasterizationScale = [UIScreen mainScreen].scale;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市汹来,隨后出現(xiàn)的幾起案子续膳,更是在濱河造成了極大的恐慌,老刑警劉巖收班,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坟岔,死亡現(xiàn)場離奇詭異,居然都是意外死亡摔桦,警方通過查閱死者的電腦和手機社付,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鸥咖,你說我怎么就攤上這事燕鸽。” “怎么了啼辣?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵啊研,是天一觀的道長。 經(jīng)常有香客問我熙兔,道長悲伶,這世上最難降的妖魔是什么艾恼? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任住涉,我火速辦了婚禮,結(jié)果婚禮上钠绍,老公的妹妹穿的比我還像新娘舆声。我一直安慰自己,他們只是感情好柳爽,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布媳握。 她就那樣靜靜地躺著,像睡著了一般磷脯。 火紅的嫁衣襯著肌膚如雪蛾找。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天赵誓,我揣著相機與錄音打毛,去河邊找鬼。 笑死俩功,一個胖子當著我的面吹牛幻枉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播诡蜓,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼熬甫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蔓罚?” 一聲冷哼從身側(cè)響起椿肩,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎豺谈,沒想到半個月后郑象,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡核无,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年扣唱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡噪沙,死狀恐怖炼彪,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情正歼,我是刑警寧澤辐马,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站局义,受9級特大地震影響喜爷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜萄唇,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一檩帐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧另萤,春花似錦湃密、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至忿危,卻和暖如春达箍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背铺厨。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工缎玫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人努释。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓碘梢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親伐蒂。 傳聞我的和親對象是個殘疾皇子煞躬,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容