Facebook开源动画库 POP-POPDecayAnimation运用
关于POPDecayAnimation的介绍先引用别人写的一些内容,基本上把它的一些注意点都说明了;
Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果。这个动画有一个重要的参数 velocity(速率),一般并不用于物体的自发动画,而是与用户的交互共生。这个和 iOS7 引入的 UIDynamic 非常相似,如果你想实现一些物理效果,这个也是非常不错的选择。
Decay 的动画没有 toValue 只有 fromValue,然后按照 velocity 来做衰减操作。如果我们想做一个刹车效果,那么应该是这样的。
POPDecayAnimation *anim = [POPDecayAnimation animWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = @(100.0);
anim.fromValue = @(25.0);
//anim.deceleration = 0.998;
anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
if (finished) {NSLog(@"Stop!");}};
这个动画会使得物体从 X 坐标的点 25.0 开始按照速率 100点/s 做减速运动。 这里非常值得一提的是,velocity 也是必须和你操作的属性有相同的结构,如果你操作的是 bounds,想实现一个水滴滴到桌面的扩散效果,那么应该是 [NSValue valueWithCGRect:CGRectMake(0, 0,20.0, 20.0)]
如果 velocity 是负值,那么就会反向递减。
deceleration (负加速度) 是一个你会很少用到的值,默认是就是我们地球的 0.998,如果你开发给火星人用,那么这个值你使用 0.376 会更合适。
实例1:创建一个POPDecayAnimation动画 实现X轴运动 减慢速度的效果
//1:初始化第一个视图块
if (self.myView==nil) {
self.myView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
self.myView.backgroundColor=[UIColor redColor];
[self.view addSubview:self.myView];
} //创建一个POPDecayAnimation动画 实现X轴运动 减慢速度的效果 通过速率来计算运行的距离 没有toValue属性
POPDecayAnimation *anSpring = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anSpring.velocity = @(); //速率
anSpring.beginTime = CACurrentMediaTime() + 1.0f;
[anSpring setCompletionBlock:^(POPAnimation *prop, BOOL fint) {
if (fint) {
NSLog(@"myView=%@",NSStringFromCGRect(self.myView.frame));
}
}];
[self.myView pop_addAnimation:anSpring forKey:@"myViewposition”];
打印出来的值为:myView={{247.00485229492188, 80}, {30, 30}},说明X轴当前已经到247左右的;
实例2:创建一个POPDecayAnimation动画 连续不停的转动
//2:初始化一个视图块
if(self.myRotationView==nil)
{
self.myRotationView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
self.myRotationView.backgroundColor=[UIColor redColor];
[self.view addSubview:self.myRotationView];
} //创建一个POPDecayAnimation动画 连续不停的转动
[self performAnimation]; 封装的方法: -(void)performAnimation
{
[self.myRotationView.layer pop_removeAllAnimations];
POPDecayAnimation *anRotaion=[POPDecayAnimation animation];
anRotaion.property=[POPAnimatableProperty propertyWithName:kPOPLayerRotation]; if (self.animated) {
anRotaion.velocity = @(-);
}else{
anRotaion.velocity = @();
anRotaion.fromValue = @(25.0);
} self.animated = !self.animated; anRotaion.completionBlock = ^(POPAnimation *anim, BOOL finished) {
if (finished) {
[self performAnimation];
}
}; [self.myRotationView.layer pop_addAnimation:anRotaion forKey:@"myRotationView"];
}
注意像常量kPOPLayerRotation它是作用在层上,所以我们在使用时要把它加载到相应视图的layer上面;
实例3:实现一个拖动视图运行,将拖动结束后它有减速的效果,当点击视图时它将停所有的动画效果;在减速动画结束后会有一个判断,当前视图的位置是否是触在屏壁,若有则反弹;
#import "DecayViewController.h"
#import <POP.h> @interface DecayViewController() <POPAnimationDelegate>
@property(nonatomic) UIControl *dragView;
- (void)addDragView;
- (void)touchDown:(UIControl *)sender;
- (void)handlePan:(UIPanGestureRecognizer *)recognizer;
@end @implementation DecayViewController - (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self addDragView];
} #pragma mark - POPAnimationDelegate - (void)pop_animationDidApply:(POPDecayAnimation *)anim
{
//判断是否触屏壁
BOOL isDragViewOutsideOfSuperView = !CGRectContainsRect(self.view.frame, self.dragView.frame);
if (isDragViewOutsideOfSuperView) {
CGPoint currentVelocity = [anim.velocity CGPointValue];
CGPoint velocity = CGPointMake(currentVelocity.x, -currentVelocity.y);
POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];
positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];
positionAnimation.toValue = [NSValue valueWithCGPoint:self.view.center];
[self.dragView.layer pop_addAnimation:positionAnimation forKey:@"layerPositionAnimation"];
}
} #pragma mark - Private Instance methods - (void)addDragView
{
//拖动
UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self
action:@selector(handlePan:)]; self.dragView = [[UIControl alloc] initWithFrame:CGRectMake(, , , )];
self.dragView.center = self.view.center;
self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/;
self.dragView.backgroundColor = [UIColor redColor];
[self.dragView addTarget:self action:@selector(touchDown:) forControlEvents:UIControlEventTouchDown];
[self.dragView addGestureRecognizer:recognizer]; [self.view addSubview:self.dragView];
} //点击时将停所有的动画效果
- (void)touchDown:(UIControl *)sender {
[sender.layer pop_removeAllAnimations];
} - (void)handlePan:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(, ) inView:self.view]; //手势结束
if(recognizer.state == UIGestureRecognizerStateEnded) {
CGPoint velocity = [recognizer velocityInView:self.view];
POPDecayAnimation *positionAnimation = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
positionAnimation.delegate = self;
positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];
[recognizer.view.layer pop_addAnimation:positionAnimation forKey:@"layerPositionAnimation"];
}
} @end
实例中还动用到了POPAnimationDelegate
<POPAnimatorDelegate> - (void)pop_animationDidStart:(POPAnimation *)anim;
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
- (void)pop_animationDidReachToValue:(POPAnimation *)anim;
- (void)pop_animationDidApply:(POPAnimation *)anim;
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

Facebook开源动画库 POP-POPDecayAnimation运用的更多相关文章
- Facebook 开源动画库 pop
官网:https://github.com/facebook/pop Demo: https://github.com/callmeed/pop-playground 一:pop的基本构成: POPP ...
- 使用 Facebook开源动画库 POP 实现真实衰减动画
1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatom ...
- Facebook开源动画库 POP-POPBasicAnimation运用
动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...
- Facebook开源动画库 POP-小实例
实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gest ...
- Facebook开源动画库 POP-POPSpringAnimation运用
POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/ ...
- rebound是facebook的开源动画库
网址:http://www.jcodecraeer.com/a/opensource/2015/0121/2338.html 介绍: rebound是facebook的开源动画库.可以认为这个动画库是 ...
- 第三方开源动画库EasyAnimation中一个小bug的修复
看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...
- [转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?
iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 ...
- Lottie安卓开源动画库使用
碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...
随机推荐
- CSS布局:水平居中
前言 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type=& ...
- 用Visual Studio Code 开发应用之 安装 Visual Studio Code
最近研究微软的ASP.NET 新一代产品 ASP.NET Core1.0. 发先Visual Studio Code是一个很好的很强大的开源编辑器.是编辑器而不是IDE.之所以强大是因为他可以说是一个 ...
- C# 可空值类型
一个值类型永远不可能为null,但是当数据库中的某列数据允许为空时,或者另一种语言中的数据类型(引用类型)对应C#的是值类型,当需要和另外的语言交互时,就有可能需要处理空值的问题. 所以,CLR中引用 ...
- RDLC报表打印
如果你的报表能正常显示,会看到RDLC工具条下的打印图标: 如果在客户端,第一次去点击此铵钮,如果当前操作者没有管理权限,会提示: Unable to load client print contro ...
- 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度
在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...
- JS数组添加字典的方法
var ary_RoleType = []; //申明数组变量 for(var j = 0;j<treeData.length;j++){ if($.inArray(treeData[j].v ...
- Cygwin的安装
Android开发要用到NDK,装了一个虚拟机,老是不行. 后来安装了一个cygwin,安装完毕后unset home,再export NDK,就可以使用了,非常方便,不用像虚拟机那样经常切换.
- VirtualBox网络设置的问题
在VirtualBox里新建了一个虚拟Linux系统,默认的连接方式是网络地址转换(NAT).发现主机不能访问虚拟机的samba服务器,ping了一下,虚拟机可以ping主机,但是主机不能ping虚拟 ...
- Mysql调试存储过程最简单的方法
以前同事告诉我用临时表插入变量数据来查看,但是这种方法过于麻烦,而且Mysql没有比较好的调试存储过程的工具.今天google了下发现可以用select + 变量名的方法来调试...真是让我汗颜啊. ...
- php ci 2.0框架 ORM
很早知道ci出了2.0版本了.这几天正好有项目要用ci开发 虽然项目不大.不过也从开发项目的过程中熟悉了CI框架 因为是个电商项目 本来想用个YII2 的. 封装的虽然厉害不过功能强大 因为另个兄弟坚 ...