Facebook Pop动画框架详细解析(四) —— decay动画简单实例

版本记录

版本号 时间
V1.0 2017.12.17

前言

POP框架是Facebook开发的一个框架,是一个在iOS与OS X上通用的极具扩展性的动画引擎。它在基本的静态动画的基础上增加的弹簧动画与衰减动画,使之能创造出更真实更具物理性的交互动画。POP的API可以快速的与现有的ObjC代码集成并可以作用于任意对象的任意属性。感兴趣的可以看上面几篇文章。相关代码请参考GitHub - 刀客传奇
1. Facebook Pop动画框架详细解析(一) —— 基本概览
2. Facebook Pop动画框架详细解析(二) —— 基本架构
3. Facebook Pop动画框架详细解析(三) —— spring动画简单实例

功能需求

实现POP的decay动画。


功能实现

首先要了解几个参数。

  • velocity:衰减速度,必须和你操作的属性有相同的结构,如果你操作的是bounds,想实现一个水滴滴到桌面的扩散效果,那么应该是[NSValue valueWithCGRect:CGRectMake(0, 0,20.0, 20.0)],如果 velocity 是负值,那么就会反向递减。
  • fromValue:Decay 的动画没有 toValue 只有 fromValue,然后按照 velocity 来做衰减操作。
  • deceleration: (负加速度) 是一个你会很少用到的值,默认是就是我们地球的 0.998,如果你开发给火星人用,那么这个值你使用 0.376 会更合适。

看一下API

#import <pop/POPPropertyAnimation.h>

/**
 @abstract A concrete decay animation class.
 @discussion Animation is achieved through gradual decay of animation value.
 */
@interface POPDecayAnimation : POPPropertyAnimation

/**
 @abstract The designated initializer.
 @returns An instance of a decay animation.
 */
+ (instancetype)animation;

/**
 @abstract Convenience initializer that returns an animation with animatable property of name.
 @param name The name of the animatable property.
 @returns An instance of a decay animation configured with specified animatable property.
 */
+ (instancetype)animationWithPropertyNamed:(NSString *)name;

/**
 @abstract The current velocity value.
 @discussion Set before animation start to account for initial velocity. Expressed in change of value units per second. The only POPValueTypes supported for velocity are: kPOPValuePoint, kPOPValueInteger, kPOPValueFloat, kPOPValueRect, and kPOPValueSize.
 */
@property (copy, nonatomic) id velocity;

/**
 @abstract The original velocity value.
 @discussion Since the velocity property is modified as the animation progresses, this property stores the original, passed in velocity to support autoreverse and repeatCount.
 */
@property (copy, nonatomic, readonly) id originalVelocity;

/**
 @abstract The deceleration factor.
 @discussion Values specifies should be in the range [0, 1]. Lower values results in faster deceleration. Defaults to 0.998.
 */
@property (assign, nonatomic) CGFloat deceleration;

/**
 @abstract The expected duration.
 @discussion Derived based on input velocity and deceleration values.
 */
@property (readonly, assign, nonatomic) CFTimeInterval duration;

/**
 The to value is derived based on input velocity and deceleration.
 */
- (void)setToValue:(id)toValue NS_UNAVAILABLE;

/**
 @abstract The reversed velocity.
 @discussion The reversed velocity based on the originalVelocity when the animation was set up.
 */
- (id)reversedVelocity;

@end

下面我们就看一下代码

1. ViewController.m
#import "ViewController.h"
#import "POP.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *animaObjectView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self loadDecayAnimation];
}

#pragma mark - Action && Notification

- (void)loadDecayAnimation
{
    POPDecayAnimation *decayAnimation = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    [self.animaObjectView.layer pop_addAnimation:decayAnimation forKey:@"decayAnimation"];
    decayAnimation.velocity = @(300.0);
    decayAnimation.fromValue = @(200.0);
    decayAnimation.completionBlock = ^(POPAnimation *anim, BOOL finished){
        if (finished) {
            NSLog(@"动画结束了");
            [self.animaObjectView.layer pop_removeAnimationForKey:@"decayAnimation"];
            [self loadDecayAnimation];
        }
    };
}

@end

这个动画就是kPOPLayerPositionY值从初始值200进行衰减的动画,衰减速度是300。


功能效果

下面我们就看一下实现的功能效果。

后记

未完,待续~~~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容