ios 动画 利用CAGradientLayer实现动画

先看下效果图片

分析步骤:

1.  先画一个方形的layer,如果:

代码如下:

CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.backgroundColor = [UIColor blueColor].CGColor;
    colorLayer.frame    = (CGRect){CGPointZero, CGSizeMake(200, 200)};
    colorLayer.position = self.view.center;
    [self.view.layer addSublayer:colorLayer];

    // 颜色分配
    colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                          (__bridge id)[UIColor whiteColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor];
    // 开始的位置 设置成超出界面这样默认就没有效果
    colorLayer.locations  = @[@(-0.2), @(-0.1), @(0)];

    // 起始点
    colorLayer.startPoint = CGPointMake(0, 0);

    // 结束点
    colorLayer.endPoint   = CGPointMake(1, 0);

2.设置光栅滑动效果

代码如下:

    CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
    // 起始位置 左侧外边
    fadeAnim.fromValue = @[@(-0.2), @(-0.1), @(0)];
    // 结束位置 右侧外边
    fadeAnim.toValue   = @[@(1.0), @(1.1), @(1.2)];
    fadeAnim.duration  = 1.5;
    [colorLayer addAnimation:fadeAnim forKey:nil];

3.设置layer的mask遮罩,只显示圆圈

   UIBezierPath* bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:80 startAngle:DEGREES(0) endAngle:DEGREES(360) clockwise:YES];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path =bezierPath.CGPath;
    // 位置
    layer.position = CGPointMake(102, 100);
    // 填充颜色为透明
    layer.fillColor = [UIColor clearColor].CGColor;
    // 边框颜色为红色
    layer.strokeColor = [UIColor redColor].CGColor;
    // 设置遮罩,这就就显示遮罩内容
    colorLayer.mask = layer;

这样就完成最终效果了。

时间: 2024-09-30 07:06:51

ios 动画 利用CAGradientLayer实现动画的相关文章

iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果

先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue #3. 设置动画最终停留的位置 #4. 将配置好的动画添加到layer层中 举个例子, 比如实现一个圆形从上往下移动, 上代码: 1 //设置原始画面 2 UIView *showView = [[UIView alloc] initWithFrame

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

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

iOS动画开发之一——UIViewAnimation动画的使用

iOS动画开发之一--UIViewAnimation动画的使用 一.简介 一款APP的成功与否,除了完善的功能外,用户体验也占有极大的比重,动画的合理运用,可以很好的增强用户体验.iOS开发中,常用的动画处理有UIView动画编程和核心动画编程,其中UIView动画使用简便,开发中应用十分广泛.这篇博客,主要讨论UIView的动画使用. 二.UIView动画的几个方法 + (void)animateWithDuration:(NSTimeInterval)duration animations:

IOS开发-UIView之动画效果的实现方法(合集)

http://www.cnblogs.com/GarveyCalvin/p/4193963.html 前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量.像QQ.微信.新浪微博等APP,动画效果就很好了,至少我很喜欢它们的动画,让我使用起来感觉很顺畅,心情很开朗.本文会介绍UIView效果的实现方法,非核心动画. 一.使用UIView类实现动画 基本写法,代码必须放在Begin和Commit之间: [UIView beg

iOS:核心动画之转场动画CATransition

转场动画——CATransition CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 动画属性: –type:动画过渡类型 –subtype:动画过渡方向 –startProgress:动画起点(在整体动画的百分比) –endProgress:动画终点(在整体动画的百分比

iOS中的几种动画模式(iOS动画)

iOS中有许许多多的动画方式今天先给大家介绍最简单的两种:头尾式动画和帧动画 一. 所谓头尾式动画,顾名思义,就是在需要动画的代码开始的时候设置开始动画,在需要动画的代码结束的时候结束动画,这就是简单的头尾式动画,二话不多说,上代码: //开始动画 [UIView beginAnimations:nil context:nil]; //这里加需要动画的代码 //结束动画 [UIView commitAnimations]; 二. 帧动画,相信对做flash的人来说帧动画相当熟悉,相信大家都记得小

利用手势控制动画的进度

最近在研究一个项目,利用手势控制动画的进度,发现简单的还可以,如果遇到了复杂的情况就比较麻烦了,ios7新出了一个特性,可以利用NavigationController的自定义转场动画,提供进度来控制. //这个方法控制转场动画的进度 - (id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController               

iOS 自定义页面的切换动画与交互动画

在iOS7之前,开发者为了寻求自定义Navigation Controller的Push/Pop动画,只能受限于子类化一个UINavigationController,或是用自定义的动画去覆盖它.但是随着iOS7的到来,Apple针对开发者推出了新的工具,以更灵活地方式管理UIViewController切换. 自定义导航栏的Push/Pop动画 为了在基于UINavigationController下做自定义的动画切换,先建立一个简单的工程,这个工程的rootViewController是一个

iOS开发——动画篇Swift篇&amp;动画效果的实现

Swift - 动画效果的实现 在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用animateWithDuration来实现动画 (1)此方法共有5个参数: duration:动画从开始到结束的持续时间,单位是秒 delay:动画开始前等待的时间 options:动画执行的选项.里面可以设置动画的效果.可以使用UIViewAnimationOpt