美文网首页iOS学习开发iOS程序猿工具癖
仿写淘宝个人中心上面的波纹效果

仿写淘宝个人中心上面的波纹效果

作者: c4ibD3 | 来源:发表于2016-12-29 11:21 被阅读693次

    DoubleWaves

    一个正弦&&余弦波纹图

    创作来源

    双十一买东西的时候突然发现淘宝的顶部有一个微小的动画效果,感觉很炫。 实现这个效果的方案就是在一个View上面添加两个View 一个是sin函数图,另一个是cos函数图

    使用方法

    DoubleWaves *doubleWaves = [[DoubleWaves alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 26)]; 
    
    [self.view addSubview:doubleWaves];
    

    就是最简单的创建视图的方法就可以了。

    参数

    CGFloat waveA;//水纹振幅
    CGFloat waveW ;//水纹周期
    CGFloat offsetX1; //位移
    CGFloat currentK; //当前波浪高度Y
    CGFloat offsetX2; //位移
    CGFloat wavesSpeed;//水纹速度
    CGFloat WavesWidth; //水纹宽度
    

    可以根据自己项目的需求,去调整相应的参数,实现相应的效果。

    效果图

    DoubleWaves.gif

    github:https://github.com/cAibDe/DoubleWaves

    相关文章

      网友评论

        本文标题:仿写淘宝个人中心上面的波纹效果

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