涉及到的技術(shù)點(diǎn)

• CoreAnimation的基本單位
• 圖片彈跳
• 翻轉(zhuǎn)動(dòng)畫
• 我們看到的現(xiàn)象是：如果以一個(gè)初速度往上拋一個(gè)物體浙炼，你的感覺是物體上拋過程花費(fèi)的時(shí)間短，下落花費(fèi)的時(shí)間長唯袄。所以我們在做動(dòng)畫中需要做這些違背物理規(guī)律的事情：即把下落的時(shí)間設(shè)置得比上彈的長弯屈。

JumpStar動(dòng)畫實(shí)現(xiàn)的思路

• 動(dòng)畫分為兩個(gè)階段：一個(gè)彈上去的階段，一個(gè)落下來的階段恋拷。彈上去的過程讓視圖繞 y 軸旋轉(zhuǎn) 90 °资厉，此時(shí)第一階段的動(dòng)畫結(jié)束。在代理方法 animationDidStop 中開始第二個(gè)動(dòng)畫 —— 下落蔬顾。在這個(gè)階段一開始立刻替換圖片酌住， 隨后在落下的同時(shí)讓視圖繼續(xù)旋轉(zhuǎn) 90°。我們要在下落動(dòng)畫結(jié)束之后 removeAllAnimations阎抒。

JumpStar動(dòng)畫的具體實(shí)現(xiàn)步驟

• 界面布局如圖所示

  
  
  界面布局圖5.png

• ZQJumpStarView的具體代碼如下

//  ZQJumpStarView.h

#import <UIKit/UIKit.h>

typedef enum : NSUInteger {
    NONMark,
    Mark,
}STATE;

@interface ZQJumpStarView : UIView

/** 圖片的狀態(tài) */
@property(nonatomic, assign, setter=setState:)STATE state;

/** 被標(biāo)記的圖片 */
@property(nonatomic,strong)UIImage *markedImage;

/** 未被標(biāo)記的圖片 */
@property(nonatomic, strong)UIImage *non_markedImage;

/** 動(dòng)畫 */
-(void)animation;

@end

//  ZQJumpStarView.m

#import "ZQJumpStarView.h"

/** 上升時(shí)間的宏 */
#define jumpDuration 0.125
/** 下降時(shí)間的宏 */
#define downDuration 0.215

@interface ZQJumpStarView()

/** 圖片View */
@property(nonatomic, strong)UIImageView *starView;

/** 陰影View */
@property(nonatomic, strong)UIImageView *shadowView;

@end

@implementation ZQJumpStarView {

    /** 動(dòng)畫執(zhí)行 */
    BOOL animating;
}

-(instancetype)init {

    self = [super init];
    if (self) {

    }
    return self;
}

/** 布局子視圖 */
-(void)layoutSubviews {

    [super layoutSubviews];

    self.backgroundColor = [UIColor clearColor];

    if (self.starView == nil) {
        self.starView = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.size.width / 2 - (self.bounds.size.width - 6) / 2, 0, self.bounds.size.width - 6, self.bounds.size.height - 6)];

        self.starView.contentMode = UIViewContentModeScaleToFill;
        [self addSubview:self.starView];
    }
    if (self.shadowView == nil) {
        self.shadowView = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.size.width / 2 - 10 / 2, self.bounds.size.height - 3, 10, 3)];

        self.shadowView.alpha = 0.4;
        self.shadowView.image = [UIImage imageNamed:@"shadow_new"];
        [self addSubview:self.shadowView];
    }
}

/** 圖片狀態(tài)的set方法 */
-(void)setState:(STATE)state {

    _state = state;
    self.starView.image = _state == Mark ? _markedImage : _non_markedImage;
}

/** 動(dòng)畫 */
-(void)animation {

    if (animating == YES) {
        return;
    }

    animating = YES;

    CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    transformAnimation.fromValue = @(0);
    transformAnimation.toValue = @(M_PI_2);
    transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    positionAnimation.fromValue = @(self.starView.center.y);
    positionAnimation.toValue = @(self.starView.center.y
    - 14);
    positionAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = jumpDuration;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.removedOnCompletion = NO;
    animationGroup.delegate = self;
    animationGroup.animations = @[transformAnimation, positionAnimation];

    [self.starView.layer addAnimation:animationGroup forKey:@"jumpUp"];
}

/** 上升動(dòng)畫開始 */
-(void)animationDidStart:(CAAnimation *)anim {

    if ([anim isEqual:[self.starView.layer animationForKey:@"jumpUp"]]) {
        [UIView animateWithDuration:jumpDuration delay:0.0f options:UIViewAnimationOptionCurveEaseOut animations:^{
            _shadowView.alpha = 0.2;
            _shadowView.bounds = CGRectMake(0, 0, _shadowView.bounds.size.width * 1.6, _shadowView.bounds.size.height);
        } completion:NULL];
    } else if ([anim isEqual:[self.starView.layer animationForKey:@"jumpDown"]]) {

        [UIView animateWithDuration:jumpDuration delay:0.0f options:UIViewAnimationOptionCurveEaseOut animations:^{
            _shadowView.alpha = 0.4;
            _shadowView.bounds = CGRectMake(0, 0, _shadowView.bounds.size.width / 1.6, _shadowView.bounds.size.height);
        } completion:NULL];
    }
}

/** 下降動(dòng)畫開始 */
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    if ([anim isEqual:[self.starView.layer animationForKey:@"jumpUp"]]) {
        self.state = self.state == Mark ? NONMark : Mark;
        NSLog(@"state:%ld", _state);

        CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
        transformAnimation.fromValue = @(M_PI_2);
        transformAnimation.toValue = @(M_PI);
        transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

        CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
        positionAnimation.fromValue = @(self.starView.center.y - 14);
        positionAnimation.toValue = @(self.starView.center.y);
        positionAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        animationGroup.duration = downDuration;
        animationGroup.fillMode = kCAFillModeForwards;
        animationGroup.removedOnCompletion = NO;
        animationGroup.delegate = self;
        animationGroup.animations = @[transformAnimation, positionAnimation];

        [self.starView.layer addAnimation:animationGroup forKey:@"jumpDown"];
    } else if ([anim isEqual:[self.starView.layer animationForKey:@"jumpDown"]]) {

        [self.starView.layer removeAllAnimations];
        animating = NO;
    }
}

@end

• ViewController的具體代碼如下

//  ViewController.m

#import "ViewController.h"
#import "ZQJumpStarView.h"

@interface ViewController ()

/** 動(dòng)畫View */
@property (weak, nonatomic) IBOutlet ZQJumpStarView *jumpStarView;

@end

@implementation ViewController

-(void)viewDidLoad {
    [super viewDidLoad];

    [_jumpStarView layoutIfNeeded];
    _jumpStarView.markedImage = [UIImage imageNamed:@"icon_star_incell"];
    _jumpStarView.non_markedImage = [UIImage imageNamed:@"blue_dot"];
    _jumpStarView.state = NONMark;
}

-(IBAction)tapped:(id)sender {

    [_jumpStarView animation];
}
@end

運(yùn)行結(jié)果如圖所示

運(yùn)行結(jié)果圖5.gif