美文网首页iOS开发iOS新手学习
iOS 带有渐变色波纹动画

iOS 带有渐变色波纹动画

作者: iBlocker | 来源:发表于2017-08-22 17:22 被阅读241次

  最近有个朋友的项目里面做了波浪动画效果,刚好我的项目里也有这个需求,就把他的代码拿来改了,主要是实现了颜色渐变的效果。
  Github
  CocoaChina


  废话不多话,说一下实现过程:
  1、波纹动画主要依赖于CAShapeLayer的绘制,使用帧动画实现;需要使用多个CAShapeLayer通过y值变换组成(这里我只是用了2个CAShapeLayer)。
  2、渐变色由CAGradientLayer完成。
- (void)changeFirstWaveLayerPath {
    CGMutablePathRef path = CGPathCreateMutable();
    CGFloat y = _wavePointY;
    
    CGPathMoveToPoint(path, nil, 0, y);
    for (float x = 0.0f; x <= _waveWidth; x ++) {
        y = _waveAmplitude * 1.6 * sin((250 / _waveWidth) * (x * M_PI / 180) - _waveOffsetX * M_PI / 270) + _wavePointY;
        CGPathAddLineToPoint(path, nil, x, y);
    }
    
    CGPathAddLineToPoint(path, nil, _waveWidth, 0);
    CGPathAddLineToPoint(path, nil, 0, 0);
    CGPathCloseSubpath(path);
    
    _shapeLayer1.path = path;
    CGPathRelease(path);
}

- (void)changeSecondWaveLayerPath {
    CGMutablePathRef path = CGPathCreateMutable();
    CGFloat y = _wavePointY;
    CGPathMoveToPoint(path, nil, 0, y);
    for (float x = 0.0f; x <= _waveWidth; x ++) {
        
        y = _waveAmplitude * 1.6 * sin((250 / _waveWidth) * (x * M_PI / 180) - _waveOffsetX * M_PI / 180) + _wavePointY;
        CGPathAddLineToPoint(path, nil, x, y);
    }
    
    CGPathAddLineToPoint(path, nil, _waveWidth, 0);
    CGPathAddLineToPoint(path, nil, 0, 0);
    CGPathCloseSubpath(path);
    
    _shapeLayer2.path = path;
    
    CGPathRelease(path);
}

  调用:

_waveOffsetX += _waveSpeed;
[self changeFirstWaveLayerPath];
[self changeSecondWaveLayerPath];
   
[self.layer addSublayer:self.gradientLayer1];
self.gradientLayer1.mask = _shapeLayer1;
   
[self.layer addSublayer:self.gradientLayer2];
self.gradientLayer2.mask = _shapeLayer2;

  如果需要纯色背景的话 可以删除CAGradientLayer,给View和CAShapeLayer设置背景色;或者2个Color颜色值给相同的。

相关文章

  • iOS 带有渐变色波纹动画

      最近有个朋友的项目里面做了波浪动画效果,刚好我的项目里也有这个需求,就把他的代码拿来改了,主要是实现了颜色渐变...

  • iOS 渐变色水波纹

    因项目需求封装了一个带有渐变色水波视图,水波视图相信大家可以在网上搜到很多,但是绘制一个波浪是渐变色的,且背景也可...

  • iOS源码博文集锦1

    精彩的iOS源码与博文,不容错过。 iOS精选源码 iOS一种弹出视图效果带动画 导航栏显示渐变色,类似qq一样 ...

  • iOS 实现波纹Mask动画

    层级介绍 代码实现

  • iOS动画-扩散波纹效果

    最终效果 实现思路 动画的表现形式是颜色以及大小的变化,整体效果可以看做多个单独的波纹效果的叠加。因此我们可以创建...

  • iOS水波纹动画

    最近在学习动画,就做了一个简单的水波纹动画。这个效果可以用在部分个人中心页的边界或者进度的显示。 先附上githu...

  • iOS 水波纹动画

    春节后经过数天的努力上架了公司一个项目后,暂时又进入了空闲期,于是就着手整理一下项目中遇到的一些有意思的需求。废话...

  • iOS-制作波纹动画

    在网易新闻和其他的APP中,大家可能都观察到了在个人中心里面,有一个水波纹一样的动画效果,这个功能还是非常的有用的...

  • iOS一个方法搞定view渐变色

    iOS一个方法搞定view渐变色 iOS一个方法搞定view渐变色

  • iOS view以及image的渐变色处理

    1.设置view的渐变色 2.制作一张带有渐变色的image

网友评论

    本文标题:iOS 带有渐变色波纹动画

    本文链接:https://www.haomeiwen.com/subject/prbldxtx.html