Facebook Pop動(dòng)畫(huà)框架詳細(xì)解析(四) —— decay動(dòng)畫(huà)簡(jiǎn)單實(shí)例

版本記錄

版本號(hào) 時(shí)間
V1.0 2017.12.17

前言

POP框架是Facebook開(kāi)發(fā)的一個(gè)框架,是一個(gè)在iOS與OS X上通用的極具擴(kuò)展性的動(dòng)畫(huà)引擎。它在基本的靜態(tài)動(dòng)畫(huà)的基礎(chǔ)上增加的彈簧動(dòng)畫(huà)與衰減動(dòng)畫(huà),使之能創(chuàng)造出更真實(shí)更具物理性的交互動(dòng)畫(huà)。POP的API可以快速的與現(xiàn)有的ObjC代碼集成并可以作用于任意對(duì)象的任意屬性。感興趣的可以看上面幾篇文章。相關(guān)代碼請(qǐng)參考GitHub - 刀客傳奇
1. Facebook Pop動(dòng)畫(huà)框架詳細(xì)解析(一) —— 基本概覽
2. Facebook Pop動(dòng)畫(huà)框架詳細(xì)解析(二) —— 基本架構(gòu)
3. Facebook Pop動(dòng)畫(huà)框架詳細(xì)解析(三) —— spring動(dòng)畫(huà)簡(jiǎn)單實(shí)例

功能需求

實(shí)現(xiàn)POP的decay動(dòng)畫(huà)。


功能實(shí)現(xiàn)

首先要了解幾個(gè)參數(shù)。

  • velocity:衰減速度,必須和你操作的屬性有相同的結(jié)構(gòu),如果你操作的是bounds,想實(shí)現(xiàn)一個(gè)水滴滴到桌面的擴(kuò)散效果,那么應(yīng)該是[NSValue valueWithCGRect:CGRectMake(0, 0,20.0, 20.0)],如果 velocity 是負(fù)值,那么就會(huì)反向遞減。
  • fromValue:Decay 的動(dòng)畫(huà)沒(méi)有 toValue 只有 fromValue,然后按照 velocity 來(lái)做衰減操作。
  • deceleration: (負(fù)加速度) 是一個(gè)你會(huì)很少用到的值,默認(rèn)是就是我們地球的 0.998,如果你開(kāi)發(fā)給火星人用,那么這個(gè)值你使用 0.376 會(huì)更合適。

看一下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(@"動(dòng)畫(huà)結(jié)束了");
            [self.animaObjectView.layer pop_removeAnimationForKey:@"decayAnimation"];
            [self loadDecayAnimation];
        }
    };
}

@end

這個(gè)動(dòng)畫(huà)就是kPOPLayerPositionY值從初始值200進(jìn)行衰減的動(dòng)畫(huà),衰減速度是300。


功能效果

下面我們就看一下實(shí)現(xiàn)的功能效果。

后記

未完,待續(xù)~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容