美文网首页
水纹波浪效果实现

水纹波浪效果实现

作者: 木子木木易 | 来源:发表于2018-03-26 17:41 被阅读27次

#import "FirstWaves.h"

@interface FirstWaves ()

@property (nonatomic,strong)CADisplayLink *wavesDisplayLink;

@property (nonatomic,strong)CAShapeLayer *firstWavesLayer;

@property (nonatomic,strong)UIColor *firstWavesColor;

@end

@implementation FirstWaves
{
    CGFloat waveA;//水纹振幅
    CGFloat waveW ;//水纹周期
    CGFloat offsetX; //位移
    CGFloat currentK; //当前波浪高度Y
    CGFloat wavesSpeed;//水纹速度
    CGFloat WavesWidth; //水纹宽度
}

/*
 y =Asin(ωx+φ)+C
 A表示振幅,也就是使用这个变量来调整波浪的高度
 ω表示周期,也就是使用这个变量来调整在屏幕内显示的波浪的数量
 φ表示波浪横向的偏移,也就是使用这个变量来调整波浪的流动
 C表示波浪纵向的位置,也就是使用这个变量来调整波浪在屏幕中竖直的位置。
 */

- (instancetype)initWithFrame:(CGRect)frame{
   
    self = [super initWithFrame:frame];
   
    if (self) {
       
        self.backgroundColor = [UIColor clearColor];
       
        self.layer.masksToBounds = YES;
       
        [self setUpWaves];
    }

    return self;
}


- (void)setUpWaves{

    //设置波浪的宽度
    WavesWidth = self.frame.size.width;
   
    //第一个波浪颜色
    self.firstWavesColor = RGBA(38, 176, 236, 1.0);

    //设置波浪的速度
    wavesSpeed = 1/M_PI;
   
    //初始化layer
    if (self.firstWavesLayer == nil) {
       
        //初始化
        self.firstWavesLayer = [CAShapeLayer layer];
        //设置闭环的颜色
        self.firstWavesLayer.fillColor = self.firstWavesColor.CGColor;
       
//        self.firstWavesLayer.fillColor = [UIColor clearColor].CGColor;
        //设置边缘线的颜色
//        self.firstWavesLayer.strokeColor = [UIColor blueColor].CGColor;
        //设置边缘线的宽度
        //self.firstWavesLayer.lineWidth = 1.0;
//        self.firstWavesLayer.strokeStart = 0.0;
//        self.firstWavesLayer.strokeEnd = 0.8;
       
        [self.layer addSublayer:self.firstWavesLayer];
    }

   
    //设置波浪流动速度
    wavesSpeed = 0.02;
    //设置振幅
    waveA = 12;
    //设置周期
    waveW = 0.5/30.0;
   
    //设置波浪纵向位置
    currentK = self.frame.size.height/2;//屏幕居中
   
    //启动定时器
    self.wavesDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave:)];
   
    [self.wavesDisplayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

-(void)getCurrentWave:(CADisplayLink *)displayLink{
   
    //实时的位移
    //实时的位移
    offsetX += wavesSpeed;

    [self setCurrentFirstWaveLayerPath];
}

-(void)setCurrentFirstWaveLayerPath{

    //创建一个路径
    CGMutablePathRef path = CGPathCreateMutable();

    CGFloat y = currentK;
    //将点移动到 x=0,y=currentK的位置
    CGPathMoveToPoint(path, nil, 0, y);

    for (NSInteger i =0.0f; i<=WavesWidth; i++) {
        //正弦函数波浪公式
        y = waveA * sin(waveW * i+ offsetX)+currentK;
       
        //将点连成线
        CGPathAddLineToPoint(path, nil, i, y);
    }
    CGPathAddLineToPoint(path, nil, WavesWidth, self.frame.size.height);
    CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);
//    CGPathAddLineToPoint(path, nil, WavesWidth, 0);
//    CGPathAddLineToPoint(path, nil, 0, 0);
   
    CGPathCloseSubpath(path);
    self.firstWavesLayer.path = path;
   
    //使用layer 而没用CurrentContext
    CGPathRelease(path);
   
}


-(void)dealloc
{
    [self.wavesDisplayLink invalidate];
}
@end

相关文章

  • 水纹波浪效果实现

    #import "FirstWaves.h"@interface FirstWaves ()@property (...

  • 模拟水纹波动效果

    功能 模拟水纹波动效果 实现双层水纹一起运动效果 实现增长的效果 展示 效果展示 代码戳这里

  • iOS实现波浪效果

    iOS实现波浪效果

  • iOS 波浪效果

    效果波浪效果 WaveView.h WaveView.m 实现

  • iOS实现波浪效果

    这篇文章主要为大家详细介绍了iOS实现波浪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分...

  • 波浪效果的实现

    1.创建layer _shapeLayer= [CAShapeLayer layer];_shapeLayer.f...

  • 潮湿效果之水纹

    水纹 疫情肆掠,在家坐月子坐到傻了,开始写点文章找回状态。 本文是关于我们游戏 水纹 效果的实现细节。 这里的 水...

  • IOS波浪效果的实现

    做ios 好几年了也没写过什么,我开始写一下这个吧! 首先定义一个waves继承于UIView 的类Waves.h...

  • Android实现波浪效果 - WaveView

    效果图 先上效果图 实现 WaveView的属性 Wate Level(水位) - 波浪静止时水面距离底部的高度A...

  • iOS波浪效果实现

    为了使界面看起来高大上,很多app都会加入各种各样的动态效果。本篇文章就简单谈谈波浪效果的实现,效果如下所示: 实...

网友评论

      本文标题:水纹波浪效果实现

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