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;

@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

细节

 

IE6下面，为什么不能设置height:1px的元素 在用DIV构建网页的时候，有时候需要的高度很小，这时候就可能会出现问题，因为，IE6下DIV有个默认的高度，大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。
canvas 中 rotate 是怎么旋转的 在今天之前，我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转，但那是在他人的基础上直接修改的，至于为啥会这样..讲真，还真没注意过，但是今天又需要用到这块了，实在搞不定了，找了各种资料，终于明白了.. 坐标系的问题。
css动画的动画制作没有什么特别高深的地方，引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的，但我想要强调的是掌握并深入的理解css的基础，以及灵活的运用是做出一个画面美观、代码简洁、性能高效的css动画的必备技能。
每个制作出来的css3动画都凝结了设计者和创作者智慧的结晶，以此，我们要向前辈致敬；动画的出现给单调的网页平添了活性，是单纯的展示页面变得不再那么枯燥，所以，作为一个web前端的开发者能够创作出属于自己的特有的动画，我感到很高兴。