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

细节

 


目录
相关文章
|
4月前
|
移动开发 前端开发 API
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke)
75 3
|
1月前
|
前端开发 JavaScript
鼠标移动淡入淡出Canvas小球效果_TS版本
使用TypeScript重新实现鼠标移动产生淡入淡出Canvas小球效果。涉及到TS的数据类型、泛型定义、函数与接口定义、类的实现及作为接口的使用,以及枚举类型。通过定义Ball类实现小球的属性和行为,使用事件监听鼠标移动并创建小球实例,然后使用requestAnimationFrame实现动画效果。
25 0
鼠标移动淡入淡出Canvas小球效果_TS版本
|
3月前
|
前端开发
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
字体颜色改变实例,线性渐变 -webkit-linear-gradient讲解
字体颜色改变实例,线性渐变 -webkit-linear-gradient讲解
|
5月前
transform实现按钮边框旋转效果
transform实现按钮边框旋转效果
|
前端开发
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
总所周知,transform 是 CSS3 中最强大的属性之一,它有这么三个函数属性值:scale、translate 和 rotate,它们分别是缩放、位移和旋转,但是你有没有想过有这么一天它们三个
254 0
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
Core Animation - 渐变色CAGradientLayer
Core Animation - 渐变色CAGradientLayer
91 0
Core Animation - 如何来绘制三个圆角一个直角的矩形
Core Animation - 如何来绘制三个圆角一个直角的矩形
72 0
|
图形学
Unity【DoTween】- 如何使Transform Tween动画序列可编辑
Unity【DoTween】- 如何使Transform Tween动画序列可编辑
484 0
Unity【DoTween】- 如何使Transform Tween动画序列可编辑
|
前端开发
canvas 中 rotate 是怎么旋转的
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
canvas 中 rotate 是怎么旋转的