ios之oc中库iOS开发-PopAnimation动画教程

iOS开发-Pop动画教程

https://www.jianshu.com/p/47ce70f3bf59

本文资料来自http://www.appcoda.com/facebook-pop-framework-intro/如有错误欢迎各位指出

如果你使用 CocoaPods，你可以添加下面这句话到你的工程中的Podfile文件中；

pod ‘pop’

如果你没有CocoaPods，你能下载Pop这个框架在https://github.com/facebook/pop之后添加pop这个文件夹到你的工程中，并且确保你的工程中的“Other Linker Flags”选项已经添加了“-lc++”;

5BAD58AF-BE99-4A65-954D-90C7CD300FB9.png

使用Pop

首先导入头文件

#import "POP.h"

例子一：UITableViewCell Animation

pop-animation-1-1.gif

我们创建一个动画在tableViewCell上，首先添加一个放大的动画当我们点击cell的时候，当我们手离开屏幕的时候，我们用将cell上缩回原先的大小用spring animation；

重写cell中的setHighlighted方法，代码如下：

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
    [super setHighlighted:highlighted animated:animated];
    if (self.highlighted) {
        POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY];
        scaleAnimation.duration = 0.1;
        scaleAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(1, 1)];
        [self.textLabel pop_addAnimation:scaleAnimation forKey:@"scalingUp"];
        
        
        
    } else {
        POPSpringAnimation *sprintAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
        sprintAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0.9, 0.9)];
        sprintAnimation.velocity = [NSValue valueWithCGPoint:CGPointMake(2, 2)];
        sprintAnimation.springBounciness = 20.f;
        [self.textLabel pop_addAnimation:sprintAnimation forKey:@"springAnimation"];
    }
}

Pop为我们提供许多创建动画的预定义属性，你能找到这些属性在“POPAnimatableProperty.h”文件中；

例子二：Animating a Like Button

pop-animation-2.gif

创建一个controller在storyBoard中，在controller中创建一个UITextField，之后添加一个send和like按钮，like按钮在send按钮的上面，默认的情况下我们展示like按钮，当用户输入文字在textField中我们隐藏like按钮，展示send按钮用一个动画；
创建一个名为FacebookButtonAnimationViewController的类继承UIViewController；在这个类中添加like和send按钮，还有textField的变量；

@interface FacebookButtonAnimationViewController ()
@property (weak, nonatomic) IBOutlet UITextField *msgTextField;
@property (weak, nonatomic) IBOutlet UIButton *likeButton;
@property (weak, nonatomic) IBOutlet UIButton *sendButton;

@end

实现UITextField的代理方法：

-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string

在这个方法中我们可以监控用户输入和删除文字，内部的实现如下：

-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
    NSString *comment;
    if(range.length == 0)
    {
        comment = [NSString stringWithFormat:@"%@%@", textField.text, string];
    }
    else
    {
        comment = [textField.text substringToIndex:textField.text.length - range.length];
    }
    
    if (comment.length == 0) {
        //Show like
        [self showLikeButton];
    }
    else
    {
        //Show Send
        [self showSendButton];
    }
    return YES;
}

之后我们实现showLikeButton和showSendButton

-(void)showLikeButton
{
    self.likeButton.hidden = NO;
    self.sendButton.hidden = YES;
    
    POPSpringAnimation *spin = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
   
    spin.fromValue = @(M_PI / 4);
    spin.toValue = @(0);
    spin.springBounciness = 20;
    spin.velocity = @(10);
    [self.likeButton.layer pop_addAnimation:spin forKey:@"likeAnimation"];
}

-(void)showSendButton
{
    if (self.sendButton.isHidden) {
        
        self.likeButton.hidden = YES;
        self.sendButton.hidden = NO;
        POPSpringAnimation *sprintAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
        
        sprintAnimation.velocity = [NSValue valueWithCGPoint:CGPointMake(8, 8)];
        sprintAnimation.springBounciness = 20.f;
        [self.sendButton pop_addAnimation:sprintAnimation forKey:@"sendAnimation"];
    }
}

例子三：Wrong Password Animation

pop-animation-3-2.gif

首先在storyBoard中新建一个controller，在controller中添加textField和一个button；
接下来创建一个继承UIViewControll名位WrongPasswordViewController的类，在类中创建一个UITextField的变量与storyBoard中的textField关联，命名为passwordTextField；

@interface WrongPasswordViewController ()
@property (weak, nonatomic) IBOutlet UITextField *passwordTextField;

@end

之后我们创建一个名位login的方法为Login Button,在这个方法中我们校验密码是否正确，如果不正确我们为textField添加一个摇晃动画；

-(void)login{
    POPSpringAnimation *shake = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    
    shake.springBounciness = 20;
    shake.velocity = @(3000);
    
    [self.passwordTextField.layer pop_addAnimation:shake forKey:@"shakePassword"];
}

例子四：Custom View Controller Transition

pop-animation-4.gif

这个例子将教你们怎么跳转到一个控制器用自定义动画，我们在控制器中建一个按钮“present”，当用户点击这个按钮，app跳转到另一个控制器中用一个自定义动画，从iOS7开始，你能够自定义控制器的过渡动画用UIViewController的transitioningDelegate.在这个代理中，我们要实现UIViewControllerTransitioningDelegate的代理方法，还有提供过渡动画的实现；

首先，创建在storyBoard中创建俩个controller和俩个新类，命名为 “CustomVCTransitionViewController”和 “CustomModalViewController”
UI设计如下：

custom-view-controller-ui-hd.jpg

现在我们实现CustomVCTransitionViewController中Present按钮的点击，首先是添加UIViewControllerTransitioningDelegate的声明；
在CustomVCTransitionViewController.m 我们引入一下头文件：

#import "CustomModalViewController.h"

#import "PresentingAnimationController.h"
#import "DismissingAnimationController.h"

接下来实现Present按钮的action和代理方法：

- (IBAction)didClickOnPresent:(id)sender {
    
    CustomModalViewController *modalVC = [self.storyboard instantiateViewControllerWithIdentifier:@"customModal"];
    
    
    modalVC.transitioningDelegate = self;

    modalVC.modalPresentationStyle = UIModalPresentationCustom;
    
    [self.navigationController presentViewController:modalVC animated:YES completion:nil];
}

#pragma mark - UIViewControllerTransitionDelegate -

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    return [[PresentingAnimationController alloc] init];
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    return [[DismissingAnimationController alloc] init];
}

当Present按钮被点击的时候，didClickOnPresent会响应点击事件，在这个方法中我们初始化CustomModalViewController，并且设置过度代理方法对于当前这个controller；
我们必须实现 UIViewControllerTransitioningDelegate中俩个必须实现的代理方法，animationControllerForPresentedController方法返回跳转到CustomModalViewController的过渡动画.相反，animationControllerForDismissedController返回动画为了要dismiss的控制器；
现在我们创建一个继承NSObject的新类叫做PresentingAnimationController，在这个类中我们遵守UIViewControllerAnimatedTransitioning协议.
在PresentingAnimationController.m中我们添加下面的方法：

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.5f;
}



- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    
    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
    fromView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
    fromView.userInteractionEnabled = NO;
    
    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
    toView.frame = CGRectMake(0,
                              0,
                              CGRectGetWidth(transitionContext.containerView.bounds) - 100.f,
                              CGRectGetHeight(transitionContext.containerView.bounds) - 280.f);
    CGPoint p = CGPointMake(transitionContext.containerView.center.x, -transitionContext.containerView.center.y);
    toView.center = p;
    
    [transitionContext.containerView addSubview:toView];
    
    POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    positionAnimation.toValue = @(transitionContext.containerView.center.y);
    positionAnimation.springBounciness = 10;
    [positionAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
        [transitionContext completeTransition:YES];
    }];
    
    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.springBounciness = 20;
    scaleAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(1.2, 1.4)];
    
    [toView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];
    [toView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation"];

    
}

第一个方法返回过渡时间，为了实现动画，我们实现animateTransition方法，这里我们将实现怎么去跳转。

现在我们创建一个继承NSObject的新类叫做DismissingAnimationController，在这个类中我们遵守UIViewControllerAnimatedTransitioning协议.
相似，我们在DismissingAnimationController.m添加如下方法：

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.5f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
    toView.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
    toView.userInteractionEnabled = YES;
    
    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
    
    
    POPBasicAnimation *closeAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    closeAnimation.toValue = @(-fromView.layer.position.y);
    [closeAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
        [transitionContext completeTransition:YES];
    }];
    
    POPSpringAnimation *scaleDownAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleDownAnimation.springBounciness = 20;
    scaleDownAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    
    [fromView.layer pop_addAnimation:closeAnimation forKey:@"closeAnimation"];
    [fromView.layer pop_addAnimation:scaleDownAnimation forKey:@"scaleDown"];
 
}

来到CustomModalViewController.m中，更新viewDidLoad方法并且实现didClickOnClose方法：

-(void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.layer.cornerRadius = 8.f;
}

- (IBAction)didClickOnClose:(id)sender {
    [self dismissViewControllerAnimated:YES completion:nil];
}

其它参考资料：http://adad184.com/2015/03/11/intro-to-pop/

作者：张xd
链接：https://www.jianshu.com/p/47ce70f3bf59
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

用POP动画引擎实现弹簧动画(POPSpringAnimation)

#import "ViewController.h"

#import <POP.h>

@interface ViewController ()

@property (nonatomic, weak) UIView *testView;

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

self.view.backgroundColor = [UIColor blackColor];

// 初始化测试控件

UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

testView.center = self.view.center;

testView.backgroundColor = [UIColor redColor];

self.testView = testView;

[self.view addSubview:testView];

}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event

{

// 初始化弹簧动画

POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

springAnimation.springSpeed = 0; // 设置动画速度(常用)

springAnimation.springBounciness = 20; // 设置弹性大小(常用)

// springAnimation.dynamicsFriction = 10; // 设置阻止弹性的阻力(选用)

// springAnimation.dynamicsTension = 100; // 设置弹性的张力(可以理解为每次变大的程度, 选用)

if (self.testView.frame.size.width == 100) {

springAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 50, 50)];

} else {

springAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 100, 100)];

}

// 添加动画

[self.testView.layer pop_addAnimation:springAnimation forKey:nil];

}

@end

github:https://github.com/RinpeChen/POPSpringAnimationDemo

FaceBook POP（PopAnimation）介绍与使用

https://www.jianshu.com/p/ac955997949f

2017.05.17 20:30* 字数 1330 阅读 679评论 0喜欢 5

掘金主页欢迎关注和提问，以后也会不定期回答简书上的提问

本文简单介绍了FaceBook开原动画框架POP的内容及基本使用

Demo下载地址：https://github.com/iOSAppleBea/PopAnimationDemo

推荐一份参考文献《iOS核心动画高级技巧》：https://zsisme.gitbooks.io/ios-/content/chapter1/layers-and-trees.html

使用POP可以创建的 4 类动画：

Spring （弹性）动效可以赋予物体愉悦的弹性效果；
Decay （衰减) 动效可以用来逐渐减慢物体的速度至停止；
Basic （基本）传统动画，可以在给定时间的运动中插入数值调整运动节奏，支持默认、线性、淡入、淡出、淡入淡出动画；
Custom （自定义）自定义动画，让设计值创建自定义动效，只需简单处理CADisplayLink，并联系时间-运动关系，使用难度略大于前三者；

它们的继承关系为

NSObject

|- POPAnimation

|- POPPropertyAnimation

|- POPBasicAnimation

|- POPDecayAnimation

|- POPSpringAnimation

|- POPCustomAnimation

所有的动画属性分为两大类：作用于View与作用于Layer

View系：

不透明度 - kPOPViewAlpha

颜色 - kPOPViewBackgroundColor

大小 - kPOPViewBounds

中心点 - kPOPViewCenter

位置与尺寸 - kPOPViewFrame

尺寸 - kPOPViewScaleXY

尺寸（按比例变化） - kPOPViewSize

Layer系：

颜色 - kPOPLayerBackgroundColor

大小 - kPOPLayerBounds、kPOPLayerScaleXY、kPOPLayerSize

不透明度 - kPOPLayerOpacity

位置 - kPOPLayerPosition

X 坐标 - kPOPLayerPositionX

Y 坐标 - kPOPLayerPositionY

旋转 - kPOPLayerRotation

POP动画常用属性

这里简单介绍几个使用过程中常用的属性

beginTime ：动画开始时间，一般用animation.beginTime = CACurrentMediaTime() + 0.5;动画延迟0.5秒后执行；
duration ：动画持续时长，多用于基础动画；
timingFunction ：决定动画节奏；
fromValue ：动画的起始状态；
toValue ：动画的终止状态；
springBounciness ：弹簧弹力(幅度) 取值范围为[0, 20]，默认值为4；
springSpeed ：弹簧速度，速度越快，动画时间越短 [0, 20]，默认为12，和springBounciness一起决定着弹簧动画的效果；
velocity ：速率，常用于衰减动画中，速率被用来计算运行的距离；
deceleration ：负加速度，Default = 0.998，如果你开发给火星人用，那么这个值使用 0.376 会更合适。减速效果增强（缩小动画幅度）<< 0.998 << 减速效果降低（加大动画幅度）；
completionBlock ：动画完成后的回调，completionBlock 提供了一个 Callback，动画的执行过程会不断调用这个 block，finished 这个布尔变量可以用来做动画完成与否的判断；

附：

· dynamicsTension 弹簧的张力，影响回弹力度及速度；

· dynamicsFriction 弹簧摩擦力，开启后，动画会不断重复，并且幅度逐渐削弱，直到停止；

· dynamicsMass 质量，细微地影响动画的回弹力度和速度；

这三者可以从更细的粒度上替代springBounciness和springSpeed控制弹簧动画的效果。

POP动画的介绍与使用

1. POPBasicAnimation基础动画

基本动画，接口方面和CABasicAniamtion很相似，使用可以提供初始值fromValue，这个终点值toValue，动画时长duration以及决定动画节奏的timingFunction。timingFunction直接使用的CAMediaTimingFunction,是使用一个横向纵向都为一个单位的拥有两个控制点的贝赛尔曲线来描述的，横坐标为时间，纵坐标为动画进度。

POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY];

basicAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(3.0, 3.0)];

basicAnimation.duration = 1;

basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[self.ZView pop_addAnimation: basicAnimation forKey:@"basicAnimation"];

对timingFunction的设置也可以使用另外一种方法

POPBasicAnimation *offscreenAnimation = [POPBasicAnimation easeInAnimation];

offscreenAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerPositionX];

...

此处需要说明的：p

- (void)pop_addAnimation:(POPAnimation *)anim forKey:(NSString *)key方法中Key的赋值，保证在动画载体中Key的唯一性即可；

2. PopSpringAnimation

弹簧动画是Bezier曲线无法表述的，所以无法使用PopBasicAniamtion来实现。PopSpringAnimation便是专门用来实现弹簧动画的。

POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

springAnimation.beginTime = CACurrentMediaTime() + 2;

springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(2.0, 2.0)];

springAnimation.springBounciness = 5.f;

springAnimation.springSpeed = 10;

springAnimation.completionBlock = ^(POPAnimation *anim, BOOL finished) {

POPSpringAnimation *resetAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

resetAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.0, 1.0)];

resetAnimation.springBounciness = 20.f;

resetAnimation.springSpeed = 10;

[self.ZView.layer pop_addAnimation:scaleAnimation forKey:@"resetAnimation"];

};

[self.ZView.layer pop_addAnimation: springAnimation forKey:@"springAnimation"];

如果你想让视图在原地抖动，产生吸引用户的效果，那么给velocity属性一个初值，并设置其弹簧洗漱类似下面这样：

POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];

positionAnimation.beginTime = CACurrentMediaTime() + 0.1;

positionAnimation.velocity = @2000;

positionAnimation.springBounciness = 20;

视图就会奇妙的一阵“抽搐”，随后这个动画将变得索然无味😎哈哈哈

3. PopDecayAnimation

基于Bezier曲线的timingFuntion同样无法表述Decay Aniamtion，所以Pop就单独实现了一个 PopDecayAnimation，用于衰减动画。

POPDecayAnimation *decay_1 = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerBounds];

decay_1.velocity = [NSValue valueWithCGRect:CGRectMake(0, 0, 50.0, 50.0)];

[_ZButton.layer pop_addAnimation:decay_1 forKey:@"lalalal"];

POPDecayAnimation *decay_2 = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];

decay_2.velocity = [NSValue valueWithCGPoint:CGPointMake(100, 500)];

[_Z2Button.layer pop_addAnimation:decay_2 forKey:@"lalalal"];

衰减动画没有 toValue 只有 fromValue，然后按照 velocity 来做衰减操作，如果不对fromValue赋值，那么动画会按照载体的当前状态执行。这里非常值得一提的是，velocity 也是必须和你操作的属性有相同的结构，如果你操作的是 bounds，想实现一个水滴滴到桌面的扩散效果，那么应该是 [NSValue valueWithCGRect:CGRectMake(0, 0,20.0, 20.0)]。

动画委托

POPAnimatorDelegate是可选的，拥有如下方法

- (void)pop_animationDidStart:(POPAnimation *)anim;

- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;

- (void)pop_animationDidReachToValue:(POPAnimation *)anim;

值得说的几点

最后我们使用 pop_addAnimation 来让动画开始生效，如果你想删除动画的话，那么你需要调用 pop_removeAllAnimations。与 iOS 自带的动画不同，如果你在动画的执行过程中删除了物体的动画，那么物体会停在动画状态的最后一个瞬间，而不是闪回开始前的状态；
Pop Animation应用于CALayer时，在动画运行的任何时刻，layer和其presentationLayer的相关属性值始终保持一致，而Core Animation做不到
如果期望试图始终保持动画后的试图状态，那么请不要对该试图或其父仕途进行任何试图元素上的增删，此类操作会导致使用过PopAnimation的试图无法保持动画的终了状态。
位置类的Animation，类似X/Y的toValue赋值，是相对于父试图的坐标，而且，其坐标是被操作试图的锚点。

POP默认支持三种动画但同时也支持自定义动画

https://blog.csdn.net/u012198553/article/details/50698396

转

POP默认支持三种动画但同时也支持自定义动画

2016年02月19日 15:34:58 iChenfy 阅读数：2382

POP默认支持三种动画但同时也支持自定义动画

POPBasicAnimation
POPSpringAnimation
POPDecayAnimation
POPCustomAnimation //自定义动画

这里我们只讨论前三种(因为自定义动画我也没用过 :) 先来看看官方的示例代码吧

官方代码示例

//Basic animations can be used to interpolate values over a specified time period. To use an ease-in ease-out animation to animate a view's alpha from 0.0 to 1.0 over the default duration:
POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
anim.fromValue = @(0.0);
anim.toValue = @(1.0);
[view pop_addAnimation:anim forKey:@"fade"];
//Spring animations can be used to give objects a delightful bounce. In this example, we use a spring animation to animate a layer's bounds from its current value to (0, 0, 400, 400):
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];
[layer pop_addAnimation:anim forKey:@"size"];
//Decay animations can be used to gradually slow an object to a halt. In this example, we decay a layer's positionX from it's current value and velocity 1000pts per second:
POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = @(1000.);
[layer pop_addAnimation:anim forKey:@"slide"];

POPBasicAnimation

POPBasicAnimation使用最广泛提供固定时间间隔的动画(如淡入淡出效果)

代码示例1

POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anBasic.toValue = @(self.square.center.y+300);
anBasic.beginTime = CACurrentMediaTime() + 1.0f;
[self.square pop_addAnimation:anBasic forKey:@"position"];

其动画效果如下

可以看到添加一个动画最少仅需三步

定义一个animation对象并指定对应的动画属性
设置初始值和默认值(初始值可以不指定会默认从当前值开始)
添加到想产生动画的对象上

POPBasicAnimation可配置的属性与默认值为

duration:0.4    //动画间隔

POPBasicAnimation提供四种timingfunction(很熟悉对不对? 就是Core Animation中那些)

kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut

其时间函数分别如下

POPSpringAnimation

POPSpringAnimation也许是大多数人使用POP的理由其提供一个类似弹簧一般的动画效果(使用后 APP立马就活泼起来了有木有?!)

代码示例23

POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anSpring.toValue = @(self.square.center.y+300);
anSpring.beginTime = CACurrentMediaTime() + 1.0f;
anSpring.springBounciness = 10.0f;
[self.square pop_addAnimation:anSpring forKey:@"position"];

其动画效果如下

POPSpringAnimation可配置的属性与默认值为

springBounciness:4.0    //[0-20] 弹力 越大则震动幅度越大
springSpeed     :12.0   //[0-20] 速度 越大则动画结束越快
dynamicsTension :0      //拉力  接下来这三个都跟物理力学模拟相关 数值调整起来也很费时 没事不建议使用哈
dynamicsFriction:0      //摩擦 同上
dynamicsMass    :0      //质量 同上

注意:POPSpringAnimation是没有duration字段的其动画持续时间由以上几个参数决定

其时间函数如下

POPDecayAnimation

POPDecayAnimation提供一个过阻尼效果(其实Spring是一种欠阻尼效果) 可以实现类似UIScrollView的滑动衰减效果(是的你可以靠它来自己实现一个UIScrollView)

代码示例3

POPDecayAnimation *anDecay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anDecay.velocity = @(600);
anDecay.beginTime = CACurrentMediaTime() + 1.0f;
[self.square pop_addAnimation:anDecay forKey:@"position"];

其动画效果如下

注意:这里对POPDecayAnimation设置toValue是没有意义的会被忽略(因为目的状态是动态计算得到的)

POPDecayAnimation可配置的属性与默认值为

deceleration:0.998  //衰减系数(越小则衰减得越快)

注意:POPDecayAnimation也是没有duration字段的其动画持续时间由velocity与deceleration决定

其时间函数如下

接下来我们看一下POP默认支持哪些属性的动画打开POPAnimatablePropery.h可以看到如下定义(这些是到目前为止所支持的属性随着版本的更新还在不断的新增中 :)

/**
 Common CALayer property names.
 */
extern NSString * const kPOPLayerBackgroundColor;
extern NSString * const kPOPLayerBounds;
extern NSString * const kPOPLayerCornerRadius;
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;
/**
 Common CAShapeLayer property names.
 */
extern NSString * const kPOPShapeLayerStrokeStart;
extern NSString * const kPOPShapeLayerStrokeEnd;
extern NSString * const kPOPShapeLayerStrokeColor;
extern NSString * const kPOPShapeLayerFillColor;
/**
 Common NSLayoutConstraint property names.
 */
extern NSString * const kPOPLayoutConstraintConstant;
#if TARGET_OS_IPHONE
/**
 Common UIView property names.
 */
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;
/**
 Common UIScrollView property names.
 */
extern NSString * const kPOPScrollViewContentOffset;
extern NSString * const kPOPScrollViewContentSize;
extern NSString * const kPOPScrollViewZoomScale;
extern NSString * const kPOPScrollViewContentInset;
/**
 Common UITableView property names.
 */
extern NSString * const kPOPTableViewContentOffset;
extern NSString * const kPOPTableViewContentSize;
/**
 Common UICollectionView property names.
 */
extern NSString * const kPOPCollectionViewContentOffset;
extern NSString * const kPOPCollectionViewContentSize;
/**
 Common UINavigationBar property names.
 */
extern NSString * const kPOPNavigationBarBarTintColor;
/**
 Common UIToolbar property names.
 */
extern NSString * const kPOPToolbarBarTintColor;
/**
 Common UITabBar property names.
 */
extern NSString * const kPOPTabBarBarTintColor;
/**
 Common UILabel property names.
 */
extern NSString * const kPOPLabelTextColor;

作为刚接触POP的一些同学来说如果在上面看到你希望的某些属性的话你可以像官方代码示例一样指定这个属性即可开始动画了

但是如果你想要的某些属性不在之上呢这时候自定义属性POPAnimatableProperty就排上用场了

自定义属性

POP默认支持的三种动画都继承自POPPropertyAnimation POPPropertyAnimation中定义了一个叫property的属性( 之前没有用到它是因为POP根据不同的默认动画属性帮你生成了默认的property) 而这个property则是用来驱动POP的动画效果中的重要一环

代码示例4

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) {
    // read value
    prop.readBlock = ^(id obj, CGFloat values[]) {
    };
    // write value
    prop.writeBlock = ^(id obj, const CGFloat values[]) {
    };
    // dynamics threshold
    prop.threshold = 0.01;
}];

其组成就是一个readBlock一个writeBlock和一个threashold

readBlock告诉POP当前的属性值
writeBlock中修改变化后的属性值
threashold决定了动画变化间隔的阈值值越大writeBlock的调用次数越少

POPAnimatableProperty其实是POP中一个比较重要的东西像上面提到的POP自带的动画属性查看源代码可以看到也只是POP自动帮你设置好了POPAnimatableProperty而已其作用就是当动画的某个时间片被触发时告诉系统如何根据当前时间片做出变化

还是以一个实际的例子来说明如何使用自定义属性比如我们要实现一个像系统的时钟APP里秒表计时的一个效果

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countdown"initializer:^(POPMutableAnimatableProperty *prop) {

prop.threshold = 100;

static int num = 0;

prop.writeBlock = ^(id obj, const CGFloat values[]) {

UILabel *lable = (UILabel*)obj;

lable.text = [NSString stringWithFormat:@"%d:%d:%02d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*60)%60];

NSLog(@"123--:%d",(int)values[0]);

num++;

NSLog(@"123-num-:%d",num);

};

}];

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 300, 100, 30)];

label.backgroundColor = [UIColor orangeColor];

label.textAlignment = NSTextAlignmentCenter;

[self.view addSubview:label];

POPBasicAnimation *anBasic = [POPBasicAnimation linearAnimation]; //秒表当然必须是线性的时间函数

anBasic.property = prop; //自定义属性

anBasic.fromValue = @(0); //从0开始

anBasic.toValue = @(10); //180秒

anBasic.duration = 10; //持续3分钟

anBasic.beginTime = CACurrentMediaTime() + 1.0f; //延迟1秒开始

[label pop_addAnimation:anBasic forKey:@"countdown"];

其动画效果如下

有没有从中得到一些启发呢? POP可以做的事情可远比Core Animation要多(注意这里我们使用了beginTime这个属性来设置动画的延迟施放) 例如音乐播放时那种淡入淡出的效果等等也可以用POP来实现

posted @ 2019-04-04 18:58 sundaysios 阅读(638) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sundaysios

sundaysios

ios之oc中库iOS开发-PopAnimation动画教程

使用Pop

例子一：UITableViewCell Animation

例子二：Animating a Like Button

例子三：Wrong Password Animation

例子四：Custom View Controller Transition

用POP动画引擎实现弹簧动画(POPSpringAnimation)

FaceBook POP（PopAnimation）介绍与使用

POP默认支持三种动画 但同时也支持自定义动画

POP默认支持三种动画 但同时也支持自定义动画

公告

POP默认支持三种动画但同时也支持自定义动画

POP默认支持三种动画但同时也支持自定义动画