水波动画

作者: c048e8b8e3d7 | 来源:发表于2016-10-18 14:52 被阅读33次
动画效果

分析

每一个水波都是一个CAShapeLayer的实例,然后使用CADisplayLink来刷新界面,每次刷新的时候,CAShapeLayer的形状不一样,在每秒60帧的情况下,看起来就产生了动画效果。

代码

下面的示例只创建了一个水波

@interface JCWaterWave ()
@property(nonatomic, strong) CADisplayLink *displayLink;
@property(nonatomic, strong) CAShapeLayer *shapeLayer;
@property(nonatomic, assign) CGFloat offset;

@end

@implementation JCWaterWave

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setup];
    }
    return self;
}

- (void)setup
{
    [self.layer addSublayer:self.shapeLayer];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)startWave
{
    self.offset += 5;
    [self setFirstLayer];
}

- (void)setFirstLayer
{
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    CGFloat rate = M_PI * 2 / width;//水平上只显示一个波周期
    
    for (CGFloat i = 0.0; i <= width; i++) {
        //5表示振幅
        CGFloat y = sin(rate * (i + self.offset)) * 5 + height / 2.0f;
        if (i > 0.0) {
            CGPathAddLineToPoint(path, nil, i, y);
        } else {
            CGPathMoveToPoint(path, nil, i, y);
        }
    }
    
    CGPathAddLineToPoint(path, nil, width, height);
    CGPathAddLineToPoint(path, nil, 0, height);
    CGPathCloseSubpath(path);
    
    self.shapeLayer.path = path;
    
    CGPathRelease(path);
}

- (CADisplayLink *)displayLink
{
    if (!_displayLink) {
        _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(startWave)];
    }
    return _displayLink;
}

- (CAShapeLayer *)shapeLayer
{
    if (!_shapeLayer) {
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.fillColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.4].CGColor;
    }
    return _shapeLayer;
}

相关文章

  • 水波动画

    分析 每一个水波都是一个CAShapeLayer的实例,然后使用CADisplayLink来刷新界面,每次刷新的时...

  • 那些年收藏的Android开源库集合(UI效果)

    动画效果 粒子动画效果https://github.com/glomadrian/Grav 水波式loading等...

  • iOS 水波动画

    最近遇到了水波波动的动画效果,看书资料学习下,做了个小demo,希望别人有所帮助。这里我是用CAShapeLaye...

  • 水波纹动画

    CAShapeLayer *shaper = [CAShapeLayer layer]; shaper.fillC...

  • iOS动画之水波动画

    前言:现在很多app为了提供好的交互效果给用户,通常都会通过添加动画效果来达到目的。一个好的动画效果往往会起到神来...

  • Material Design动画

    Material Design中特有的动画效果,如水波纹,Activity转场动画等 1.Touch FeedBa...

  • iOS水波纹动画

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

  • iOS水波动画实现

    效果如下: 实现这个水波动画主要还是要利用下初中的知识:正弦函数 A 表示振幅,也就是使用这个变量来调整波浪的高度...

  • iOS 水波纹动画

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

  • 九、Flutter水波动画

    目录一、效果展示二、CustomPaint三、CustomPainter四、水波效果五、文字效果六、动起来 一、效...

网友评论

    本文标题:水波动画

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