POP动画[1]

POP动画[1]

pop动画是facebook扩展CoreAnimation的,使用及其方便:)

1:Spring系列的弹簧效果(两个动画kPOPLayerBounds与kPOPLayerCornerRadius同时运行)


#import "RootViewController.h"

#import "YXEasing.h"

#import "POP.h"

#import "YXGCD.h"


@interface RootViewController ()


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 初始化View

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

    showView.center  = self.view.center;

    showView.layer.cornerRadius = 25;

    showView.backgroundColor = [UIColor cyanColor];

    [self.view addSubview:showView];


// 延时7s后执行的代码

    [[GCDQueue mainQueue] execute:^{


// 尺寸

        POPSpringAnimation *bounds =         [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];


// 圆角

        POPSpringAnimation *cornerRadius =         [POPSpringAnimation animationWithPropertyNamed:kPOPLayerCornerRadius];


bounds.toValue     = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

        bounds.springSpeed = 0;


cornerRadius.toValue     = @(100);

        cornerRadius.springSpeed = 0;


// 添加动画

        [showView.layer pop_addAnimation:bounds

                                  forKey:@"size"];

        [showView.layer pop_addAnimation:cornerRadius

                                  forKey:@"cornerRadius"];


} afterDelay:NSEC_PER_SEC * 7];

}


@end

2:一个动画结束后开始另外一个动画


//

//  RootViewController.m

//  Animation

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//


#import "RootViewController.h"

#import "YXEasing.h"

#import "POP.h"

#import "YXGCD.h"


@interface RootViewController ()<POPAnimationDelegate>


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 初始化View

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

    showView.center  = self.view.center;

    showView.layer.cornerRadius = 25;

    showView.backgroundColor = [UIColor cyanColor];

    [self.view addSubview:showView];


// 延时7s后执行的代码

    [[GCDQueue mainQueue] execute:^{


// 位置

        POPSpringAnimation *position =             [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];


// 设置速度

        position.springSpeed = 0.f;


// 赋值

        position.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];


// 添加动画

        [showView.layer pop_addAnimation:position forKey:nil];


// 结束后

        [position setCompletionBlock:^(POPAnimation *animation, BOOL finished) {

            // 颜色

            POPSpringAnimation *backgroundColor =                 [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];


// 速度

            backgroundColor.springSpeed = 0.f;


// 赋值

            backgroundColor.toValue = (id)[UIColor redColor].CGColor;


// 添加动画

            [showView.layer pop_addAnimation:backgroundColor forKey:nil];

        }];

    } afterDelay:NSEC_PER_SEC * 7];

}


@end

注意动画类型的不同导致toValue的值也不一样,这个始于CALayer的动画保持一致的:

3:动画中的代理


//

//  RootViewController.m

//  Animation

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//


#import "RootViewController.h"

#import "YXEasing.h"

#import "POP.h"

#import "YXGCD.h"


@interface RootViewController ()<POPAnimationDelegate>


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 初始化View

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

    showView.center  = self.view.center;

    showView.layer.cornerRadius = 25;

    showView.backgroundColor = [UIColor cyanColor];

    [self.view addSubview:showView];


// 延时7s后执行的代码

    [[GCDQueue mainQueue] execute:^{


// 尺寸

        POPSpringAnimation *bounds =             [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];


// 设置代理

        bounds.delegate = self;


bounds.toValue     = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

        bounds.springSpeed = 0;


// 添加动画

        [showView.layer pop_addAnimation:bounds

                                  forKey:@"size"];


} afterDelay:NSEC_PER_SEC * 7];

}


// 动画开始

- (void)pop_animationDidStart:(POPAnimation *)anim

{

    NSLog(@"pop_animationDidStart %@", anim);

}


// 动画值动态改变

- (void)pop_animationDidApply:(POPAnimation *)anim

{

    NSLog(@"pop_animationDidApply %@", anim);

}


// 动画到达终点值

- (void)pop_animationDidReachToValue:(POPAnimation *)anim

{

    NSLog(@"pop_animationDidReachToValue %@", anim);

}


// 动画结束

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

{

    NSLog(@"pop_animationDidStop %@", anim);

}


@end

动画代理方法能够完整的表示出这个动画执行的过程,从开始到结束到中间值的改变我们都能获取到的.

4:按钮的动画效果


//

//  RootViewController.m

//  Animation

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//


#import "RootViewController.h"

#import "YXEasing.h"

#import "POP.h"

#import "YXGCD.h"


@interface RootViewController ()<POPAnimationDelegate>


@property (nonatomic, strong) UIButton    *button;


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 完整显示按住按钮后的动画效果

    _button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 70, 30)];

    _button.layer.cornerRadius = 5.f;

    _button.backgroundColor = [UIColor cyanColor];

    _button.center = self.view.center;

    [self.view addSubview:_button];


// 按住按钮后没有松手的动画

    [_button addTarget:self

                action:@selector(scaleToSmall)

      forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter];


// 按住按钮松手后的动画

    [_button addTarget:self

                action:@selector(scaleAnimation)

      forControlEvents:UIControlEventTouchUpInside];


// 按住按钮后拖拽出去的动画

    [_button addTarget:self

                action:@selector(scaleToDefault)

      forControlEvents:UIControlEventTouchDragExit];

}


- (void)scaleToSmall

{

    NSLog(@"scaleToSmall");


POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.75f, 0.75f)];

    [_button.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleSmallAnimation"];

}


- (void)scaleAnimation

{

    NSLog(@"scaleAnimation");


POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

    scaleAnimation.velocity = [NSValue valueWithCGSize:CGSizeMake(3.f, 3.f)];

    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.f, 1.f)];

    scaleAnimation.springBounciness = 18.0f;

    [_button.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleSpringAnimation"];

}


- (void)scaleToDefault

{

    NSLog(@"scaleToDefault");


POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.f, 1.f)];

    [_button.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleDefaultAnimation"];

}


@end

POP的动画真心强大呢:)

5:Stroke动画效果


//

//  RootViewController.m

//  Animation

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//


#import "RootViewController.h"

#import "YXEasing.h"

#import "POP.h"

#import "YXGCD.h"

#import "CAShapeLayer+Circle.h"


@interface RootViewController ()<POPAnimationDelegate>


@property (nonatomic, strong) GCDTimer  *timer;


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 圆

    CAShapeLayer *layer = [CAShapeLayer LayerWithCircleCenter:self.view.center

                                                       radius:50.f

                                                   startAngle:DEGREES(180)

                                                     endAngle:DEGREES(180 + 360)

                                                    clockwise:YES

                                              lineDashPattern:nil];


layer.strokeColor   = [UIColor cyanColor].CGColor;    // 边缘线的颜色

    layer.lineCap       = kCALineCapRound;                // 边缘线的类型

    layer.lineWidth     = 5.0f;                           // 线条宽度

    layer.strokeStart   = 0.0f;

    layer.strokeEnd     = 1.0f;


[self.view.layer addSublayer:layer];


_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];

    [_timer event:^{


CGFloat value1 = arc4random()%100/100.f;

        CGFloat value2 = arc4random()%100/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;


[layer pop_addAnimation:strokeAnimationEnd forKey:@"layerStrokeAnimation"];

        [layer pop_addAnimation:strokeAnimationStart forKey:@"layerStrokeAnimation1"];


} timeInterval:1*NSEC_PER_SEC];

    [_timer start];

}


@end

6:减速动画


//

//  RootViewController.m

//  Animation

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//


#import "RootViewController.h"

#import "YXEasing.h"

#import "POP.h"

#import "YXGCD.h"


@interface RootViewController ()<POPAnimationDelegate>


@property(nonatomic) UIControl *dragView;


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


UIPanGestureRecognizer *recognizer =         [[UIPanGestureRecognizer alloc] initWithTarget:self

                                                action:@selector(handlePan:)];


self.dragView = [[UIControl alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

    self.dragView.center = self.view.center;

    self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/2;

    self.dragView.backgroundColor = [UIColor cyanColor];

    [self.dragView addGestureRecognizer:recognizer];


// 当触目的时候移除动画

    [self.dragView addTarget:self

                      action:@selector(touchDown:)

            forControlEvents:UIControlEventTouchDown];


[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(0, 0) inView:self.view];

    NSLog(@"center %@", NSStringFromCGPoint(recognizer.view.center));


// 拖拽动作结束

    if(recognizer.state == UIGestureRecognizerStateEnded)

    {

        // 计算出移动的速度

        CGPoint velocity = [recognizer velocityInView:self.view];

        NSLog(@"velocity %@", NSStringFromCGPoint(velocity));


// 衰退减速动画

        POPDecayAnimation *positionAnimation =             [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];


// 设置代理

        positionAnimation.delegate = self;


// 设置速度动画

        positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];


// 添加动画

        [recognizer.view.layer pop_addAnimation:positionAnimation

                                         forKey:@"layerPositionAnimation"];

    }

}


@end

计算出pan手势的在拖拽结束的时候的速度值.

POP动画[1]

时间： 2024-10-12 14:36:22

POP动画[1]的相关文章

POP动画引擎中Layer与CALayer的一点区别

POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲一下POP动画引擎中Layer与CALayer的区别: 这里, 代码做的都是同一个效果: 执行位移动画3秒, 然后在1秒后移除所有动画 使用POP效果图: 使用CALayer效果图: 可以看到, POP执行的动画当动画被移除之后, 被执行对象保留了被停止时的状态 而CALayer执行的动画当动画被移

POP动画[2]

POP动画[2] 1:定制控制器间的转场动画. 源码有点多-_-!! // // RootViewController.h // Animation // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.h // // RootViewContro

自定义UINavigationController push和pop动画

http://segmentfault.com/q/1010000000143983 默认的UINavigationController push和pop的默认动画都是左右滑动推出,我的应用要求这种界面切换的动画效果复杂一点,大概有这么几个: 更快的左右推出,默认是0.3秒,我需要快一倍 带抖动的左右推出 水平翻转 纸张翻页效果 但是这些切换都要放在NavigationController里做管理,怎么实现,求个思路 ios 链接 评论 更多 默认排序时间排序 3 个回答 答案对人有帮助,有参考

swift详解之二十七------------自定义UINavigationController的push和pop动画

自定义UINavigationController的push和pop动画 我们这里先创建一个简单的工程 , 在storyboard 中拖一个导航控制器 , rootViewController 改成我们的ViewController . 为了实现自定义动画切换 , 我们需要实现两个协议 . UIViewControllerAnimatedTransitioning,UINavigationControllerDelegate UIViewControllerAnimatedTransitioni

Facebook POP动画简单使用

简单实用POP动画 发现POP比较好的一点是保留了动画结束后的状态,通过block回调.使用POPAnimatableProperty 可以快速添加基本动画,也可以自定义属性动画. 弹性动画 - (void)spring{ POPSpringAnimation* framePOP = [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor]; framePOP.springSpeed = 10.f; frame

POP动画[3]

这一节主要讲解POP动画的自定义动画属性. POP动画中有一个参数,叫timingFunction,与CoreAnimation中的一个参数CAMediaTimingFunction基本一样,下图表示的是kCAMediaTimingFunctionEaseInEaseOut的曲线图. 下图是Spring动画效果: 我们可以使用自定义的属性来实现POP的库中没有提供的动画. 实现的效果: 源码: // // RootViewController.m // YXPOP // // Copyright

用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

pop动画

#import "ViewController.h" #import "POP.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selecto

用POP动画模拟真实秒钟摆动效果

静态图: 动画图: 此处用到了POP中的Spring系列动画,现提供源码如下: SecondClockView.h 与 SecondClockView.m // // SecondClockView.h // YouXianMingClock // // Created by YouXianMing on 14-10-12. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @