iOS核心动画之图片旋转、脉冲动画、水波纹动画

下边有整体效果,希望能帮助到你!

定义一个视图

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

一、图片旋转三种方式:

第一种:根据CGPathAddArc 绘画图片旋转路线:

/*

     1、<#CGMutablePathRef  _Nullable path#> 路线

     2、确定圆心<#CGFloat x#> <#CGFloat y#>

     3、半径<#CGFloat radius#>

     4、起点 <#CGFloat startAngle#> 结束 <#CGFloat endAngle#>

    */

 CGPathAddArc(path, NULL, self.view.center.x, self.view.center.y, 0.1, 0, M_PI *2, 1);

    CAKeyframeAnimation * frameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    frameAnimation.path= path;

    CGPathRelease(path);

    frameAnimation.delegate=self;

    frameAnimation.duration=10;// 持续时间

    frameAnimation.repeatCount = -1;// 重复次数 如果为0表示不执行,-1表示不限制次数,默认为0

    frameAnimation.autoreverses=NO;

    frameAnimation.rotationMode = kCAAnimationRotateAuto;// 样式

    frameAnimation.fillMode = kCAFillModeForwards;

    [self.imageView.layeraddAnimation:frameAnimationforKey:nil];


第二种:

 [UIView animateWithDuration:20.0f animations:^{

        if (self.imageView) {

           self.imageView.transform = CGAffineTransformMakeRotation(M_PI*5);

         }

   }];


第三种:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    //默认是顺时针效果,若将fromValue和toValue的值互换,则为逆时针效果

    animation.fromValue = [NSNumber numberWithFloat:0.f];

    animation.toValue = [NSNumber numberWithFloat: M_PI *2];

    animation.duration=30;

    animation.autoreverses=NO;

    animation.fillMode = kCAFillModeForwards;

    animation.repeatCount = MAXFLOAT; //如果这里想设置成一直自旋转,可以设置为MAXFLOAT,否则设置具体的数值则代表执行多少次

    [self.imageView.layer addAnimation:animation forKey:nil];


持续旋转:

@property(nonatomic,assign) double angle;

 CGAffineTransform endAngle = CGAffineTransformMakeRotation(self.angle * (M_PI / 180.0f));


    [UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{

        self.imageView.transform= endAngle;

    }completion:^(BOOLfinished) {

        self.angle+=10;

        [self startAnimation2];// 上边任意一种方法回调

    }];

// 当视图停止转动时调用此方法重新转动

-(void)endAnimation {

    self.angle+=4;

    [self startAnimation2];

}

二、水波纹动画

属性定义:几个波纹定义几个X 宽度可以用一个 也可以分开定义

   @property (weak, nonatomic) IBOutlet UIView *backView;

@property(nonatomic,strong) CAShapeLayer * waterLayer1;

@property(nonatomic,strong) CAShapeLayer * waterLayer2;

@property(nonatomic,assign) CGFloat x;

@property(nonatomic,assign) CGFloat y;

@property(nonatomic,assign) CGFloat waveHeight;

@property(nonatomic,assign) CGFloat waveWidth;

@property(nonatomic,assign) int speedWave;

@property(nonatomic,assign) CGFloat waveAmplitude;

@property(nonatomic,assign) int speed;

@property(nonatomic,assign) CGFloat speed_H;

@property(nonatomic,assign) CGFloat offsetXT;


-(instancetype)init {// 给个初始值,下边被除数不能为0

    if (self == [super init]) {

         self.speedWave = 3;

        self.waveAmplitude = 3;

        self.speed=3;

        self.waveWidth = self.backView.frame.size.width;

        self.waveHeight = self.backView.frame.size.height;

        self.speed_H = self.backView.frame.size.height-20;

    }

return self;

}

-(void)waterAnimation {

//    CGFloat y = _waveHeight*sinf(2.5*M_PI*i/_waveWidth + 3*_offset*M_PI/_waveWidth + M_PI/4) + _h;

    self.waterLayer1 = [CAShapeLayer layer];

    self.waterLayer1.fillColor = [UIColor yellowColor].CGColor;

    [self.backView.layer addSublayer:self.waterLayer1];

    self.waterLayer2 = [CAShapeLayer layer];

     self.waterLayer2.fillColor = [UIColor redColor].CGColor;

    [self.backView.layer addSublayer: self.waterLayer2];

    //创建一个新的 CADisplayLink 对象,把它添加到一个runloop中,并给它提供一个 target 和selector 在屏幕刷新的时候调用

    //CADispayLink相当于一个定时器 会一直绘制曲线波纹 看似在运动,其实是一直在绘画不同位置点的余弦函数曲线

    CADisplayLink * waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave)];

    [waveDisplayLinkaddToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

}

-(void)getCurrentWave {

    // x位置

    self.x+=self.speed;

    //声明第一条波曲线的路径

    CGMutablePathRef path = CGPathCreateMutable();

    //设置起始点

    CGPathMoveToPoint(path,nil,0,self.waveHeight);

    CGFloaty =0.f;

    //第一个波纹的公式

    for(floatx =0.f; x <=self.waveWidth; x++) {

        y =self.waveAmplitude*sin((200/self.waveWidth) * (x *M_PI/70) -self.x*M_PI/170) +self.speed_H*1;

        CGPathAddLineToPoint(path,nil, x, y);

        x++;

    }

    //把绘图信息添加到路径里

    CGPathAddLineToPoint(path, nil, self.waveWidth, self.backView.frame.size.height);

    CGPathAddLineToPoint(path, nil, 0, self.backView.frame.size.height);

    //结束绘图信息

    CGPathCloseSubpath(path);

    self.waterLayer1.path= path;

    //释放绘图路径

    CGPathRelease(path);

    [self    X2];

}

/// 第二条水波

-(void)X2 {

    self.offsetXT += self.speedWave;

    CGMutablePathRef pathT = CGPathCreateMutable();

    CGPathMoveToPoint(pathT,nil,0,self.waveHeight+50);

    CGFloatyT =0.f;

    for(floatx =0.f; x <=self.waveWidth; x++) {

        yT =self.waveAmplitude*1.6*sin((200/self.waveWidth) * (x *M_PI/100) -self.offsetXT*M_PI/170) +self.waveHeight;

        CGPathAddLineToPoint(pathT,nil, x, yT-10);

    }

    CGPathAddLineToPoint(pathT, nil, self.waveWidth, self.backView.frame.size.height);

    CGPathAddLineToPoint(pathT, nil, 0, self.backView.frame.size.height);

    CGPathCloseSubpath(pathT);

    self.waterLayer2.path= pathT;

    CGPathRelease(pathT);

}

三、脉冲效果动画

@property (weak, nonatomic) IBOutlet UIView *pulseView;

@property(nonatomic,strong) CAShapeLayer * pulseLayer;

-(void)pulseAnimation {

    CGFloat width = self.pulseView.bounds.size.width;

    self.pulseLayer = [CAShapeLayer layer];

    self.pulseLayer.bounds=CGRectMake(0,0, width, width);

    self.pulseLayer.position=CGPointMake(width/2, width/2);

    self.pulseLayer.backgroundColor = [UIColor clearColor].CGColor;

    self.pulseLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.pulseLayer.bounds].CGPath;

    self.pulseLayer.fillColor = [UIColor colorWithRed: 0.3490196078 green:0.737254902 blue:0.8039215686 alpha:1].CGColor;

    self.pulseLayer.opacity = 0.0;


    CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];

    replicatorLayer.bounds=CGRectMake(0,0, width, width);

    replicatorLayer.position=CGPointMake(width/2, width/2);

    replicatorLayer.instanceCount=4;// 复制层

    replicatorLayer.instanceDelay=1;/// 频率

    [replicatorLayeraddSublayer:self.pulseLayer];


    [self.pulseView.layeraddSublayer:replicatorLayer];

    [self.pulseView.layerinsertSublayer:replicatorLayeratIndex:0];

}

-(void)startPulseAnimation {

    CABasicAnimation * opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

    opacityAnimation.fromValue=@20;// 起始值 (strong 修饰的id值)

    opacityAnimation.toValue=@30;// 结束值(strong 修饰的id值)


    CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

    scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.0, 0.0, 0.0)];

    scaleAnimation.toValue =[NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 1.0)];


    CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];

    groupAnimation.animations=@[opacityAnimation, scaleAnimation];

    groupAnimation.duration=20;

    groupAnimation.autoreverses=NO;

    groupAnimation.repeatCount=HUGE;

    [self.pulseLayeraddAnimation:groupAnimationforKey:nil];

}


在此附上效果:

听说有好得三方库,我还没有去找过,欢迎各位大佬推荐一个优质的三方。。。。。

喜欢的朋友点个赞呗!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容