POP的Stroke动画

简介:

POP的Stroke动画

 

效果

源码

https://github.com/YouXianMing/Animations


//
//  PopStrokeController.m
//  Animations
//
//  Created by YouXianMing on 15/11/17.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "PopStrokeController.h"
#import "GCD.h"
#import "POP.h"
#import "StrokeCircleLayerConfigure.h"

@interface PopStrokeController ()

@property (nonatomic, strong) CAShapeLayer  *circleShape;
@property (nonatomic, strong) GCDTimer      *timer;

@end

@implementation PopStrokeController

- (void)viewDidLoad {
    
    [super viewDidLoad];
}

- (void)setup {
    
    [super setup];
    
    self.circleShape = [CAShapeLayer layer];
    self.circleShape.strokeEnd = 0.f;
    self.circleShape.lineCap   = kCALineCapRound;
    StrokeCircleLayerConfigure *config = [StrokeCircleLayerConfigure new];
    config.lineWidth    = 4.f;
    config.startAngle   = 0;
    config.endAngle     = M_PI * 2;
    config.radius       = 55.f;
    config.circleCenter = self.view.center;
    config.strokeColor  = [UIColor cyanColor];
    [config configCAShapeLayer:self.circleShape];
    [self.view.layer addSublayer:self.circleShape];
    
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];

    [_timer event:^{
        
        CGFloat value1 = arc4random() % 101 / 100.f;
        CGFloat value2 = arc4random() % 101 / 100.f;
        
        POPSpringAnimation *strokeAnimationEnd = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
        strokeAnimationEnd.toValue             = @(value1 > value2 ? value1 : value2);
        strokeAnimationEnd.springBounciness    = 12.f;
        
        POPSpringAnimation *strokeAnimationStart = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeStart];
        strokeAnimationStart.toValue             = @(value1 < value2 ? value1 : value2);
        strokeAnimationStart.springBounciness    = 12.f;
        
        POPBasicAnimation *strokeAnimationColor  = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeColor];
        strokeAnimationColor.toValue             = (__bridge id)([self randomColor].CGColor);
        
        [self.circleShape pop_addAnimation:strokeAnimationEnd forKey:@"layerStrokeAnimation"];
        [self.circleShape pop_addAnimation:strokeAnimationStart forKey:@"layerStrokeAnimation1"];
        [self.circleShape pop_addAnimation:strokeAnimationColor forKey:@"layerStrokeAnimation2"];
        
    } timeIntervalWithSecs:1];
    
    [_timer start];
}

- (UIColor *)randomColor {

    return [UIColor colorWithRed:arc4random() % 101 / 100.f
                           green:arc4random() % 101 / 100.f
                            blue:arc4random() % 101 / 100.f
                           alpha:1];
}

@end

细节

 


目录
相关文章
|
7月前
|
移动开发 前端开发 API
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke)
97 3
|
3月前
keyframes、animation-name属性、animation-duration属性
【10月更文挑战第6天】keyframes、animation-name属性、animation-duration属性。
31 4
|
6月前
|
前端开发
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
|
前端开发
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
总所周知,transform 是 CSS3 中最强大的属性之一,它有这么三个函数属性值:scale、translate 和 rotate,它们分别是缩放、位移和旋转,但是你有没有想过有这么一天它们三个
349 0
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
|
前端开发
transition和animation的区别
transition和animation的区别
Core Animation - 摇动+循环动态画圆
Core Animation - 摇动+循环动态画圆
94 0
Core Animation - 摇动+循环动态画圆
Core Animation - 渐变色CAGradientLayer
Core Animation - 渐变色CAGradientLayer
105 0
|
缓存 定位技术
解决Leaflet.draw中polyline绘制无法结束的问题
通过本文,可以了解如何自定义Draw.PolyLine对象,以及在扩展时需要注意的一些坑,知道如何调试函数并定位问题,最终完成需求。
365 0
解决Leaflet.draw中polyline绘制无法结束的问题
|
前端开发
canvas 中 rotate 是怎么旋转的
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
canvas 中 rotate 是怎么旋转的
|
容器 JavaScript Web App开发
如何不用 transition 和 animation 也能做网页动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/BxbQJj 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1139 0