POP按钮动画

效果

源码

https://github.com/YouXianMing/Animations

//
// ButtonPressViewController.m
// Facebook-POP-Animation
//
// Created by YouXianMing on 15/11/16.
// Copyright © 2015年 ZiPeiYi. All rights reserved.
// #import "ButtonPressViewController.h"
#import "POP.h"
#import "UIColor+CustomColors.h"
#import "StrokeCircleLayerConfigure.h"
#import "FillCircleLayerConfigure.h"
#import "GCD.h" @interface ButtonPressViewController () @property (nonatomic, strong) UIButton *button;
@property (nonatomic, strong) CAShapeLayer *circleShape1;
@property (nonatomic, strong) CAShapeLayer *circleShape2; @property (nonatomic, strong) UILabel *label; @end @implementation ButtonPressViewController - (void)viewDidLoad { [super viewDidLoad]; [self setup];
} #pragma mark - setup
- (void)setup { self.view.backgroundColor = [UIColor whiteColor]; // 完整显示按住按钮后的动画效果
_button = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
_button.layer.cornerRadius = .f;
_button.backgroundColor = [UIColor cyanColor];
_button.center = self.view.center;
[self.view addSubview:_button]; self.label = [[UILabel alloc] initWithFrame:_button.bounds];
self.label.font = Font_HYQiHei();
self.label.textAlignment = NSTextAlignmentCenter;
self.label.text = @"0%";
[self.button addSubview:self.label]; // 按住按钮后没有松手的动画
[_button addTarget:self
action:@selector(scaleToSmall)
forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter]; // 按住按钮松手后的动画
[_button addTarget:self
action:@selector(scaleAnimations)
forControlEvents:UIControlEventTouchUpInside]; // 按住按钮后拖拽出去的动画
[_button addTarget:self
action:@selector(scaleToDefault)
forControlEvents:UIControlEventTouchDragExit]; // 圆环1
{
self.circleShape1 = [CAShapeLayer layer];
self.circleShape1.strokeEnd = .f;
StrokeCircleLayerConfigure *config = [StrokeCircleLayerConfigure new];
config.lineWith = 0.5f;
config.startAngle = ;
config.endAngle = M_PI * ;
config.radius = .f;
config.circleCenter = self.view.center;
[config configCAShapeLayer:self.circleShape1];
[self.view.layer addSublayer:self.circleShape1];
} // 圆环2
{
self.circleShape2 = [CAShapeLayer layer];
self.circleShape2.strokeEnd = .f;
StrokeCircleLayerConfigure *config = [StrokeCircleLayerConfigure new];
config.lineWith = 0.5f;
config.startAngle = ;
config.endAngle = M_PI * ;
config.radius = .f;
config.clockWise = YES;
config.circleCenter = self.view.center;
[config configCAShapeLayer:self.circleShape2];
[self.view.layer addSublayer:self.circleShape2];
}
} #pragma mark - Button events
- (void)scaleToSmall { [_button.layer pop_removeAllAnimations]; // 变小尺寸
POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.7f, 0.7f)];
scaleAnimation.delegate = self;
[_button.layer pop_addAnimation:scaleAnimation forKey:nil]; // 颜色
POPSpringAnimation *backgroundColor = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];
backgroundColor.toValue = (id)[UIColor magentaColor].CGColor;
[_button.layer pop_addAnimation:backgroundColor forKey:@"magentaColor"];
} - (void)scaleAnimations { [_button.layer pop_removeAllAnimations]; // 恢复尺寸
POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(.f, .f)];
scaleAnimation.delegate = self;
[_button.layer pop_addAnimation:scaleAnimation forKey:nil]; // 颜色
POPSpringAnimation *backgroundColor = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];
backgroundColor.toValue = (id)[UIColor cyanColor].CGColor;
[_button.layer pop_addAnimation:backgroundColor forKey:nil];
} - (void)scaleToDefault{ [_button.layer pop_removeAllAnimations]; // 恢复尺寸
POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(.f, .f)];
scaleAnimation.delegate = self;
[_button.layer pop_addAnimation:scaleAnimation forKey:nil]; // 颜色
POPSpringAnimation *backgroundColor = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];
backgroundColor.toValue = (id)[UIColor cyanColor].CGColor;
[_button.layer pop_addAnimation:backgroundColor forKey:nil];
} #pragma mark - POP delegate
- (void)pop_animationDidStart:(POPAnimation *)anim { NSLog(@"pop_animationDidStart %@", anim);
} - (void)pop_animationDidReachToValue:(POPAnimation *)anim { NSLog(@"pop_animationDidReachToValue %@", anim);
} - (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished { NSLog(@"pop_animationDidStop %@", anim); } - (void)pop_animationDidApply:(POPAnimation *)anim { NSLog(@"pop_animationDidApply %@", anim); NSValue *toValue = (NSValue *)[anim valueForKeyPath:@"currentValue"];
CGSize size = [toValue CGSizeValue]; CGFloat percent = (size.height - calculateConstant(, , , 0.7))/calculateSlope(, , , 0.7);
_circleShape1.strokeEnd = percent;
_circleShape2.strokeEnd = percent; double showValue = fabs(percent * );
self.label.text = [NSString stringWithFormat:@"%.f%%", showValue];
} #pragma mark - Y = kX + b
CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2) { return (y2 - y1) / (x2 - x1);
} CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2) { return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1);
} @end

细节

处理好POP动画的代理即可.

POP按钮动画的更多相关文章

  1. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  2. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  3. iOS利用Runtime自定义控制器POP手势动画

    前言 苹果在iOS 7以后给导航控制器增加了一个Pop的手势,只要手指在屏幕边缘滑动,当前的控制器的视图就会跟随你的手指移动,当用户松手后,系统会判断手指拖动出来的大小来决定是否要执行控制器的Pop操 ...

  4. pop弹簧动画实现

    POP是一个在iOS与OS X上通用的极具扩展性的动画引擎.它在基本的静态动画的基础上增加的弹簧动画与衰减动画,使之能创造出更真实更具物理性的交互动画.POP的API可以快速的与现有的ObjC代码集成 ...

  5. POP缩放动画

    POP缩放动画 效果 源码 https://github.com/YouXianMing/Animations // // SpringScaleViewController.m // Animati ...

  6. POP数值动画

    POP数值动画 效果 源码 https://github.com/YouXianMing/Animations // // PopNumberController.m // Animations // ...

  7. 简单的UIButton按钮动画效果iOS源码

    这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 使用时把ButtonA ...

  8. uwp - 做一个相对炫酷的动画按钮/按钮动画

    原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...

  9. Unity中的动画系统和Timeline(2) 按钮动画和2D精灵动画

    按钮动画 1 创建按钮后,按钮的Button组件中,Transition我们平时用的时Tint,这次选择Animation 选择Auto Generate Animation,创建一个按钮动画 2 后 ...

随机推荐

  1. hdu 5078(2014鞍山现场赛 I题)

    数据 表示每次到达某个位置的坐标和时间 计算出每对相邻点之间转移的速度(两点间距离距离/相隔时间) 输出最大值 Sample Input252 1 9//t x y3 7 25 9 06 6 37 6 ...

  2. mongo 运维管理学习

    1 如何在线修改chunk大小 https://docs.mongodb.com/manual/tutorial/modify-chunk-size-in-sharded-cluster/ 2 chu ...

  3. USACO 5.5 Twofive

    TwofiveIOI 2001 In order to teach her young calvess the order of the letters in the alphabet, Bessie ...

  4. 继承的基本概念: (1)Java不支持多继承,也就是说子类至多只能有一个父类。 (2)子类继承了其父类中不是私有的成员变量和成员方法,作为自己的成员变量和方法。 (3)子类中定义的成员变量和父类中定义的成员变量相同时,则父类中的成员变量不能被继承。 (4)子类中定义的成员方法,并且这个方法的名字返回类型,以及参数个数和类型与父类的某个成员方法完全相同,则父类的成员方法不能被继承。 分析以上程

    继承的基本概念: (1)Java不支持多继承,也就是说子类至多只能有一个父类. (2)子类继承了其父类中不是私有的成员变量和成员方法,作为自己的成员变量和方法.(3)子类中定义的成员变量和父类中定义的 ...

  5. 《Android源码设计模式》--工厂方法模式

    No1: 对于一个应用程序来说,其真正的入口是在ActivityThread类中,ActivityThread中含有我们熟悉的main方法.ActivityThread是一个final类,不能被继承. ...

  6. 磁盘清理-安全转移C盘中软件的缓存文件

    C盘飘红啦~~~ 安装软件时,默认会安装到C盘,并不会特意去改(尤其C盘是固态硬盘时).或者,根本就没有给你修改的机会. 可是啊,有些软件的缓存数据目录会比较大,实在太占C盘空间.想移出去,但又不想重 ...

  7. Spring技术内幕:设计理念和整体架构概述(转)

    程序员都很崇拜技术大神,很大一部分是因为他们发现和解决问题的能力,特别是线上出现紧急问题时,总是能够快速定位和解决. 一方面,他们有深厚的技术基础,对应用的技术知其所以然,另一方面,在采坑的过程中不断 ...

  8. Highmaps网页图表教程之绘图区显示标签显示数据标签定位

    Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. H ...

  9. BeautifulSoup与Xpath解析库总结

    一.BeautifulSoup解析库 1.快速开始 html_doc = """ <html><head><title>The Dor ...

  10. android httpUrlConnection HttpClient

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha httpUrlConnection    超文本传输协议统一资源定位器连接 http 超 ...