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

细节

时间: 2024-08-24 14:57:07

POP的Stroke动画的相关文章

[翻译] POP Facebook的动画开源库

Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration wit

iOS_SN_push/pop转场动画封装和一般动画封装

封装类中的方法: 1 #import <Foundation/Foundation.h> 2 3 #import <UIKit/UIKit.h> 4 5 6 7 8 9 @interface AnimationEffect : NSObject 10 11 12 13 14 15 /** 16 17 * push/pop转场动画封装 18 19 * 20 21 * @param type 动画类型 22 23 * @param subType 动画子类型 24 25 * @para

更改navigationController push和pop界面切换动画

有时候我们需要自定义navigationController push和pop界面切换动画,用到的代码如下: For Push: [cpp] view plaincopy MainView *nextView=[[MainView alloc] init]; [UIView  beginAnimations:nil context:NULL]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; [UIView setAnimati

POP的spring动画各个参数详解

效果 源码 https://github.com/YouXianMing/POPSpring // // RangeValueView.h // POPSpring // // Created by YouXianMing on 15/5/14. // Copyright (c) 2015年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @interface RangeValueView : UIView /** *

iOS7 push/pop转场动画

前言 iOS 7之后,苹果提供了自定义转场动画的API,我们可以自己去定义任意动画效果.本篇为笔者学习push.pop自定义转场效果的笔记,如何有任何不正确或者有指导意见的,请在评论中留下您的宝贵意见!!! 请注意:如果要求支持iOS 7以下版本,则不可使用此效果. 实现目标效果 我们本篇文章目标效果: 视图切换种类 如下效果图,这是有两大类视图切换动画的,一种是交互式的,另一种就是自定义的. 本篇只讲其中的UIViewControllerAnimatedTransitioning协议,来实现p

贝塞尔曲线 &amp; CAShapeLayer &amp; Stroke 动画 浅谈

转载自:http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qiaoqiaoqiao2014/article/details/46928787 1.CAShapeLayer简介  1.1CAShapeLayer继承于CALayer,可以使用CALayer的所有属性值:    1.2CAShapeLayer需要贝塞尔曲线配合使用才有意义(也就是说才有效果)    1.3使用CAShapeLayer(属于CoreAnimati

贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

1.贝塞尔曲线与CAShapeLayer的关系    1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环.    1.2贝塞尔曲线作为CAShapeLayer的path,其path是一个首尾相接的闭环的曲线. 2.实际应用 2.2画椭圆        2.2画矩形,画圆形的方法和上边的一致,仅仅是绘图时调用的方法不一致而已. 3.注意:贝塞尔曲线与CAShapeLayer的frame值互不干扰,贝塞尔曲线仅

POP动画[1]

POP动画[1] pop动画是facebook扩展CoreAnimation的,使用及其方便:) 1:Spring系列的弹簧效果(两个动画kPOPLayerBounds与kPOPLayerCornerRadius同时运行) #import "RootViewController.h" #import "YXEasing.h" #import "POP.h" #import "YXGCD.h" @interface RootVi

iOS开发——图形与动画篇OC篇&amp; POP简单介绍及使用

POP简单介绍及使用 前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有过相关开发经验的同学肯定知道在iOS中 动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Facebook的动画引擎(其实我不喜欢把POP定义为动画引擎 我愿意称它为函数发生器) 介绍 官方地址 ht