学习动画总结——视觉效果

圆角

CALayer有一个叫做conrnerRadius的属性控制着图层角的曲率。它是一个浮点数,默认为0(为0的时候就是直角),但是你可以把它设置成任意值。默认情况下,这个曲率值只影响背景颜色而不影响背景图片或是子图层。不过,如果把masksToBounds设置成YES的话,图层里面的所有东西都会被截取。

当设置view 或者 layer的圆角的时候是相互不会影响的。

    UIView *temp = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 200, 200)];
    [self.view addSubview:temp];
    temp.backgroundColor = [UIColor blueColor];

    CALayer * layer = [CALayer layer];
    layer.frame = CGRectMake(50, 50 , 100, 100);
    layer.backgroundColor = [UIColor yellowColor].CGColor;
    [temp.layer addSublayer:layer];
    layer.cornerRadius = 20.0f;

    UIView *temp2 = [[UIView alloc]initWithFrame:CGRectMake(50, 400, 200, 200)];
    [self.view addSubview:temp2];
    temp2.backgroundColor = [UIColor blueColor];
    temp2.layer.cornerRadius = 20.f;

    CALayer * layer2 = [CALayer layer];
    layer2.frame = CGRectMake(50, 50 , 100, 100);
    layer2.backgroundColor = [UIColor yellowColor].CGColor;
    [temp2.layer addSublayer:layer2];

当将两个view的layer层的位置改成 -50 ,-50 时候,此时的layer就在view的外边。

当不想要外边的时候可以设置masksToBounds 属性为yes。我将temp2的masksToBounds设置为yes乐。就变成了如下效果。

图层边框

CALayer另外两个非常有用属性就是borderWidth和borderColor。二者共同定义了图层边的绘制样式。这条线(也被称作stroke)沿着图层的bounds绘制,同时也包含图层的角。

borderWidth是以点为单位的定义边框粗细的浮点数,默认为0.borderColor定义了边框的颜色,默认为黑色。

borderColor是CGColorRef类型,而不是UIColor,所以它不是Cocoa的内置对象。不过呢,你肯定也清楚图层引用了borderColor,虽然属性声明并不能证明这一点。CGColorRef在引用/释放时候的行为表现得与NSObject极其相似。但是Objective-C语法并不支持这一做法,所以CGColorRef属性即便是强引用也只能通过assign关键字来声明。

我将temp的边框设置下看下效果。

    temp.layer.borderWidth = 10.0f;

temp的变化时加上了边框,但是边框并不会把寄宿图或子图层的形状计算进来,如果图层的子图层超过了边界,或者是寄宿图在透明区域有一个透明蒙板,边框仍然会沿着图层的边界绘制出来

阴影

阴影往往可以达到图层深度暗示的效果。也能够用来强调正在显示的图层和优先级(比如说一个在其他视图之前的弹出框),不过有时候他们只是单纯的装饰目的。

给shadowOpacity属性一个大于默认值(也就是0)的值,阴影就可以显示在任意图层之下。shadowOpacity是一个必须在0.0(不可见)和1.0(完全不透明)之间的浮点数。如果设置为1.0,将会显示一个有轻微模糊的黑色阴影稍微在图层之上。若要改动阴影的表现,你可以使用CALayer的另外三个属性:shadowColor,shadowOffset和shadowRadius。

显而易见,shadowColor属性控制着阴影的颜色,和borderColor和backgroundColor一样,它的类型也是CGColorRef。阴影默认是黑色,大多数时候你需要的阴影也是黑色的。

shadowOffset属性控制着阴影的方向和距离。它是一个CGSize的值,宽度控制这阴影横向的位移,高度控制着纵向的位移。shadowOffset的默认值是 {0, -3},意即阴影相对于Y轴有3个点的向上位移。

为什么要默认向上的阴影呢?尽管Core Animation是从图层套装演变而来(可以认为是为iOS创建的私有动画框架),但是呢,它却是在Mac OS上面世的,前面有提到,二者的Y轴是颠倒的。这就导致了默认的3个点位移的阴影是向上的。在Mac上,shadowOffset的默认值是阴影向下的,这样你就能理解为什么iOS上的阴影方向是向上的了。

shadowRadius属性控制着阴影的模糊度,当它的值是0的时候,阴影就和视图一样有一个非常确定的边界线(黑乎乎的,和之前的边框很相似)。当值越来越大的时候,边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影,所以一个非零值再合适不过了。

再设置阴影的时候一定要设置shadowOpacity,我一开始就没设置显示不出来(。。。。)。

我将temp2和layer2 都设置阴影了。对于temp寄宿图石油透明的话,通过阴影剪裁会计算出阴影形状,通过这些来完美搭配图层形状从而创建一个阴影,效果如下图。

    temp.layer.contents = (__bridge id _Nullable)(im.CGImage);
    temp.layer.shadowOpacity = 5.0f;
    temp.layer.shadowOffset = CGSizeMake(2, 5);
    temp.layer.shadowRadius = 10.0f;

    layer2.shadowOpacity = 5.f;
    layer2.shadowOffset = CGSizeMake(- 5 , 9);
    layer2.shadowRadius = 10.0f;
    temp2.layer.shadowOpacity = 5.f;
    temp2.layer.shadowOffset = CGSizeMake(-5, 9);
    temp2.layer.shadowRadius = 10.0f;

shadowPath

shadowPath属性指定任意阴影形状,shadowPath是一个CGPathRef类型(一个指向CGPath的指针)。CGPath是一个Core Graphics对象,用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。

    CGMutablePathRef squarePath = CGPathCreateMutable();
    CGPathAddEllipseInRect(squarePath, NULL, temp.bounds);
    temp.layer.shadowPath = squarePath;

如果是一个矩形或者是圆,用CGPath会相当简单明了。但是如果是更加复杂一点的图形,UIBezierPath类会更合适,它是一个由UIKit提供的在CGPath基础上的Objective-C包装类。

图层蒙板(这个地方理解不深)

CALayer有一个属性叫做mask可以解决这个问题。这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。它类似于一个子图层,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子图层。不同于那些绘制在父图层中的子图层,mask图层定义了父图层的部分可见区域。

mask图层的Color属性是无关紧要的,真正重要的是图层的轮廓。mask属性就像是一个饼干切割机,mask图层实心的部分会被保留下来,其他的则会被抛弃。如果mask图层比父图层要小,只有在mask图层里面的内容才是它关心的,除此以外的一切都会被隐藏起来。(这个mask后续补充)

    UIImageView *ima = [[UIImageView alloc]initWithImage:[UIImage  imageNamed:@"10.pic_hd"]];
    ima.frame = CGRectMake(0, 0, 150, 150);
    [temp addSubview:ima];
    //遮罩
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = ima.bounds;
    UIImage *maskIamge = [UIImage imageNamed:@"1"];
    maskLayer.contents = (__bridge id _Nullable)(maskIamge.CGImage);

    temp.layer.mask = maskLayer;

时间: 2024-07-31 07:42:30

学习动画总结——视觉效果的相关文章

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &

iOS动画详解(学习动画看这一篇就够了)

iOS动画详解(学习动画看这一篇就够了) 一.基础知识 CAAnimation.png 二.CABasicAnimation 1. 动画的属性和解释 2.属性值的解释 repeatCount : 如果在swift中需要一直不断重复:Float.infinity,OC:HUGE_VALF timingFunction: timingFunction.png kCAMediaTimingFunctionLinear--在整个动画时间内动画都是以一个相同的速度来改变.也就是匀速运动.一个线性的计时函数

收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation

阅读目录 交互篇 1.SlidingUpPanelLayout 2.FoldableLayout 3.android-flip 4.SwipeBackLayout 5.AndroidImageSlider 6.Android-ParallaxHeaderViewPager 7.FragmentTransactionExtended 8.FragmentTransactionExtended 9.floatlabelededittext 10.QuickReturn 11.VNTNumberPic

[转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation

原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2.视觉篇 交互篇 1.SlidingUpPanelLayout 项目介绍:他的库提供了一种简单的方式来添加一个可拖动滑动面板(由谷歌音乐推广,谷歌地图和Rdio)你的Android应用程序. 项目地址:https://github.com/umano/AndroidSlidingUpPanelDEMO

android上开源的酷炫的交互动画和视觉效果

android上开源的酷炫的交互动画和视觉效果 交互篇 1.SlidingUpPanelLayout 2.FoldableLayout 3.android-flip 4.SwipeBackLayout 5.AndroidImageSlider 6.Android-ParallaxHeaderViewPager 7.FragmentTransactionExtended 8.FragmentTransactionExtended 9.floatlabelededittext 10.QuickRet

[Canvas学习]动画

学习目的:通过JavaScript操控<canvas>对象,实现交互动画. 动画的基本步骤 1. 清空canvas,使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态 操控动画Controlling an animation setInterval(function, delay) setTimeout(function, delay) requestAnimationFrame(callback) 太阳系运动的小例子 <canvas

ios 学习动画的套路 (一)

你也肯定喜欢炫酷的动画! 在APP中,动画就是一个点睛之笔!可以给用户增加一些独特的体验感,估计也有许多的和我一样的,看着那些觉得不错的动画,也就只能流口水的孩子,毕竟~不知道从哪里下手去写!会连续的发两篇博客,总结一下iOS中动画的一个学习套路或者说是一个自己的学习的过程,以及当中出现的一些问题也会和大家分享. 一:从那里开始?这里 Quartz2D! 在我的学习过程中,我是先从 Quartz2D 开始学习的,它里面的贝塞尔曲线在我们创造精美的动画的过程中是必不可少的,Quartz 2D 它首

【总结整理】JQuery基础学习---动画

jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数

【小超_Android】android上开源的酷炫的交互动画和视觉效果:Interactive-animation

1.交互篇 2.视觉篇 交互篇 1.SlidingUpPanelLayout 项目介绍:他的库提供了一种简单的方式来加入一个可拖动滑动面板(由谷歌音乐推广,谷歌地图和Rdio)你的Android应用程序. 项目地址:https://github.com/umano/AndroidSlidingUpPanel DEMO演示: 2.FoldableLayout 项目介绍:折叠展开点击的ITEM 项目地址:https://github.com/alexvasilkov/FoldableLayout D