Facebook開源動畫庫 POP-POPSpringAnimation運用

POPSpringAnimation也許是大多數人使用POP的理由 其提供一個類似彈簧一般的動畫效果；實例源代碼已經上傳至gitHub,地址：https://github.com/wujunyang/facebookPopTest

 

POPSpringAnimation可配置的屬性與默認值為

springBounciness:4.0    //[0-20] 彈力 越大則震動幅度越大

springSpeed     :12.0   //[0-20] 速度 越大則動畫結束越快

dynamicsTension :0      //拉力  接下來這三個都跟物理力學模擬相關 數值調整起來也很費時 沒事不建議使用哈

dynamicsFriction:0      //摩擦 同上

dynamicsMass    :0      //質量 同上

注意:POPSpringAnimation是沒有duration字段的 其動畫持續時間由以上幾個參數決定

 

實例1：實現一個X軸運動並有反彈效果的動畫，在完成動畫后輸出當前的坐標值

 //1:初始化第一個視圖塊
    if (self.myRedView==nil) {
        self.myRedView=[[UIView alloc]initWithFrame:CGRectMake(0, 80, 30, 30)];
        self.myRedView.backgroundColor=[UIColor redColor];
        [self.view addSubview:self.myRedView];
    }
    
    //創建一個POPSpringAnimation動畫 實現X軸運動 有反彈效果
    POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anSpring.toValue =@(300);
    anSpring.beginTime = CACurrentMediaTime() + 1.0f;
    anSpring.springBounciness=14.0;    //[0-20] 彈力 越大則震動幅度越大
    anSpring.springSpeed=12.0;   //[0-20] 速度 越大則動畫結束越快
    [anSpring setCompletionBlock:^(POPAnimation *prop, BOOL fint) {
        if (fint) {
            NSLog(@"self.myRedView.frame=%@",NSStringFromCGRect(self.myRedView.frame));
        }
    }];
    [self.myRedView pop_addAnimation:anSpring forKey:@"myRedViewposition”];

可以查看到動畫結束后，輸出的值為：self.myRedView.frame={{285, 80}, {30, 30}}

實例2：實現一個視圖塊閃動的效果，從0.2到1.0的彈效果 縮放效果

//2:初始化一個視圖塊

    if (self.myLayView==nil) {

        self.myLayView=[[UIView alloc]initWithFrame:CGRectMake(20, 120, 30, 30)];

        self.myLayView.backgroundColor=[UIColor blueColor];

        [self.view addSubview:self.myLayView];

    }

    //創建一個POPSpringAnimation動畫 實現閃一下效果 從0.2到1.0的彈效果 縮放效果

    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

    scaleAnimation.fromValue  = [NSValue valueWithCGSize:CGSizeMake(0.2, 0.2f)];

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

    scaleAnimation.beginTime = CACurrentMediaTime() + 1.0f;

    scaleAnimation.springBounciness = 20.0f;

    scaleAnimation.springSpeed = 20.0f;

    [self.myLayView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation”];

實例3：創建一個POPSpringAnimation動畫 將視圖進行旋轉

 //3:初始化一個視圖塊

    if (self.myRotaView==nil) {

        self.myRotaView=[[UIView alloc]initWithFrame:CGRectMake(20, 170, 30, 30)];

        self.myRotaView.backgroundColor=[UIColor yellowColor];

        [self.view addSubview:self.myRotaView];

    }



    //創建一個POPSpringAnimation動畫 將視圖進行旋轉

    POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];

    rotationAnimation.beginTime = CACurrentMediaTime() + 0.2;

    rotationAnimation.toValue = @(1.2);

    rotationAnimation.springBounciness = 10.f;

    rotationAnimation.springSpeed = 3;

    [self.myRotaView.layer pop_addAnimation:rotationAnimation forKey:@"rotationAnim”];

實例4：創建一個POPSpringAnimation動畫  按鍵左右搖動

//4:初始化一個按鍵

    if (self.myButton==nil) {

        self.myButton=[[UIButton alloc]init];

        self.myButton.frame=CGRectMake(20, 220, 60, 30);

        self.myButton.backgroundColor = [UIColor grayColor];

        [self.myButton setTitle:@"登錄" forState:UIControlStateNormal];

        [self.myButton addTarget:self action:@selector(touchUpInside:) forControlEvents:UIControlEventTouchUpInside];

        [self.view addSubview:self.myButton];

    }

響應事件內容：

-(void)touchUpInside:(id)sender

{

    //創建一個POPSpringAnimation動畫  按鍵左右搖動

    POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];

    positionAnimation.velocity = @2000;

    positionAnimation.springBounciness = 20;

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

        self.myButton.userInteractionEnabled = YES;

    }];

    [self.myButton.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];

}

實例5：結合先前的POPBasicAnimation動畫，制畫一個綜合的動畫效果，就是向下顯示一個視圖，又可以回收回去；

@interface OtherViewController ()

@property(assign,nonatomic)BOOL isMenuOpen;

@property(strong,nonatomic)UIView *myMenuView;

@property(nonatomic)CGPoint VisiblePosition,HiddenPosition;

@end



@implementation OtherViewController



- (void)viewDidLoad {

    [super viewDidLoad];

    

    self.view.backgroundColor=[UIColor whiteColor];

    _isMenuOpen=NO;

    self.VisiblePosition=CGPointMake(290, 100);

    self.HiddenPosition=CGPointMake(290, -80);

    

    UIBarButtonItem *anotherButton = [[UIBarButtonItem alloc] initWithTitle:@"顯示" style:UIBarButtonItemStylePlain

                                                                     target:self action:@selector(refreshPropertyList)];

    self.navigationItem.rightBarButtonItem = anotherButton;

}



- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}



-(void)refreshPropertyList

{

    if (_isMenuOpen) {

        [self hidePopup];

    }

    else

    {

        [self showPopup];

    }

}



//隱藏時響應

- (void)hidePopup

{

    _isMenuOpen = NO;

    POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];

    opacityAnimation.fromValue = @(1);

    opacityAnimation.toValue = @(0);

    [self.myMenuView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];

    

    POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition];

    positionAnimation.fromValue = [NSValue valueWithCGPoint:self.VisiblePosition];

    positionAnimation.toValue = [NSValue valueWithCGPoint:self.HiddenPosition];

    [self.myMenuView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];

    

    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

    

    scaleAnimation.fromValue  = [NSValue valueWithCGSize:CGSizeMake(1.0f, 1.0f)];

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

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

}



//顯示時響應

- (void)showPopup

{

    //初始化視圖

    if (self.myMenuView==nil) {

        self.myMenuView=[[UIView alloc]initWithFrame:CGRectMake(0,0, 80, 50)];

        self.myMenuView.backgroundColor=[UIColor redColor];

        [self.view addSubview:self.myMenuView];

    }

    

    _isMenuOpen = YES;

    

    POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];

    opacityAnimation.fromValue = @(0);

    opacityAnimation.toValue = @(1);

    opacityAnimation.beginTime = CACurrentMediaTime() + 0.1;

    [self.myMenuView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];

    

    POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition];

    positionAnimation.fromValue = [NSValue valueWithCGPoint:self.HiddenPosition];

    positionAnimation.toValue = [NSValue valueWithCGPoint:self.VisiblePosition];

    [self.myMenuView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];

    

    

    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

    scaleAnimation.fromValue  = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5f)];

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

    scaleAnimation.springBounciness = 20.0f;

    scaleAnimation.springSpeed = 20.0f;

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

}

@end

 

 

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；