iOS摇骰子动画

效果演示

摇骰子.gif

#import "YHBaseViewController.h"
@interface LYHK3ChooseCPViewController : YHBaseViewController
<CAAnimationDelegate>
#define kSeZiWidth 46.0
{
    UIImageView *image1,*image2,*image3,*image4,*image5,*image6;
    UIImageView *dong1,*dong2,*dong3,*dong4,*dong5,*dong6;
}
@end

动画开始

//隐藏初始位置的骰子
        image1.hidden = YES;
        image2.hidden = YES;
        dong1.hidden = YES;
        dong2.hidden = YES;
        image3.hidden = YES;
        dong3.hidden = YES;
        //转动骰子的载入
        NSArray *myImages = [NSArray arrayWithObjects:
                             [UIImage imageNamed:@"k3dong1"],
                             [UIImage imageNamed:@"k3dong2"],
                             [UIImage imageNamed:@"k3dong3"],
                             [UIImage imageNamed:@"k3dong4"],
                             [UIImage imageNamed:@"k3dong5"],
                             [UIImage imageNamed:@"k3dong6"],nil];
        //骰子1的转动图片切换
        UIImageView *dong11 = [UIImageView alloc];
        [dong11 initWithFrame:CGRectMake(85.0, 115.0, kSeZiWidth, kSeZiWidth)];
        dong11.animationImages = myImages;
        dong11.animationDuration = 0.5;
        [dong11 startAnimating];
        [self.view addSubview:dong11];
        dong1 = dong11;
        //骰子2的转动图片切换
        UIImageView *dong12 = [UIImageView alloc];
        [dong12 initWithFrame:CGRectMake(135.0, 115.0, kSeZiWidth, kSeZiWidth)];
        dong12.animationImages = myImages;
        dong12.animationDuration = 0.5;
        [dong12 startAnimating];
        [self.view addSubview:dong12];
        dong2 = dong12;
        //骰子3的转动图片切换
        UIImageView *dong13 = [UIImageView alloc];
        [dong13 initWithFrame:CGRectMake(120.0, 145.0, kSeZiWidth, kSeZiWidth)];
        dong13.animationImages = myImages;
        dong13.animationDuration = 0.5;
        [dong13 startAnimating];
        [self.view addSubview:dong13];
        dong3 = dong13;
        
        //******************旋转动画******************
        //设置动画
        CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        [spin setToValue:[NSNumber numberWithFloat:M_PI * 10.0 * 0]];
        [spin setDuration:2.0];
        //******************位置变化******************
        //骰子1的位置变化
        CGPoint p1 = CGPointMake(80, SHEIGTH /2 - 200);
        CGPoint p2 = CGPointMake(120, SHEIGTH /2 - 100);
        CGPoint p3 = CGPointMake(SWIDTH / 2 - 25.5,  SHEIGTH /2 + 80);
        CGPoint p4 = CGPointMake(SWIDTH / 2 - 10 - kSeZiWidth / 2, SHEIGTH /2);
        NSArray *keypoint = [[NSArray alloc] initWithObjects:[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue valueWithCGPoint:p3],[NSValue valueWithCGPoint:p4], nil];
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        [animation setValues:keypoint];
        [animation setDuration:2.0];
        [animation setDelegate:self];
        [dong1.layer setPosition:CGPointMake(SWIDTH / 2 - 42.5,  SHEIGTH /2)];
        //骰子2的位置变化
        CGPoint p21 = CGPointMake(SWIDTH / 2 + 22.5, 115.0);
        CGPoint p22 = CGPointMake(SWIDTH / 2 + 52.5, 158.0);
        CGPoint p23 = CGPointMake(SWIDTH / 2 + 62.5, SHEIGTH /2 + 50);
        CGPoint p24 = CGPointMake(SWIDTH / 2 + 10 + kSeZiWidth / 2,  SHEIGTH /2);
        NSArray *keypoint2 = [[NSArray alloc] initWithObjects:[NSValue valueWithCGPoint:p21],[NSValue valueWithCGPoint:p22],[NSValue valueWithCGPoint:p23],[NSValue valueWithCGPoint:p24], nil];
        CAKeyframeAnimation *animation2 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        [animation2 setValues:keypoint2];
        [animation2 setDuration:2.0];
        [animation2 setDelegate:self];
        [dong2.layer setPosition:CGPointMake(SWIDTH / 2 + 10,  SHEIGTH /2)];
        
        //骰子3的位置变化
        CGPoint p31 = CGPointMake(SWIDTH / 2 + 12.5, 115.0);
        CGPoint p32 = CGPointMake(SWIDTH / 2 + 22.5, 158.0);
        CGPoint p33 = CGPointMake(SWIDTH / 2 + 32.5, SHEIGTH /2 + 150);
        CGPoint p34 = CGPointMake(SWIDTH / 2,  SHEIGTH /2 + kSeZiWidth + 20);
        NSArray *keypoint3 = [[NSArray alloc] initWithObjects:[NSValue valueWithCGPoint:p31],[NSValue valueWithCGPoint:p32],[NSValue valueWithCGPoint:p33],[NSValue valueWithCGPoint:p34], nil];
        CAKeyframeAnimation *animation3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        [animation3 setValues:keypoint3];
        [animation3 setDuration:2.0];
        [animation3 setDelegate:self];
        [dong3.layer setPosition:CGPointMake(SWIDTH / 2,  SHEIGTH /2 + kSeZiWidth + 20)];
        
        //******************动画组合******************
        //骰子1的动画组合
        CAAnimationGroup *animGroup = [CAAnimationGroup animation];
        animGroup.animations = [NSArray arrayWithObjects: animation, spin,nil];
        animGroup.duration = 2.0;
        animGroup.fillMode = kCAFillModeForwards;
        animGroup.removedOnCompletion = NO;
        [animGroup setDelegate:self];
        [[dong1 layer] addAnimation:animGroup forKey:@"1positionfir"];
        //骰子2的动画组合
        CAAnimationGroup *animGroup2 = [CAAnimationGroup animation];
        animGroup2.animations = [NSArray arrayWithObjects: animation2, spin,nil];
        animGroup2.duration = 2.0;
        animGroup2.fillMode = kCAFillModeForwards;
        animGroup2.removedOnCompletion = NO;
        [animGroup2 setDelegate:self];
        [[dong2 layer] addAnimation:animGroup2 forKey:@"2positionfir"];
        
        //骰子3的动画组合
        CAAnimationGroup *animGroup3 = [CAAnimationGroup animation];
        animGroup3.animations = [NSArray arrayWithObjects: animation3, spin,nil];
        animGroup3.duration = 2.0;
        animGroup3.fillMode = kCAFillModeForwards;
        animGroup3.removedOnCompletion = NO;
        [animGroup3 setDelegate:self];
        [[dong3 layer] addAnimation:animGroup3 forKey:@"3positionfir"];

delegate

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
        if (anim == [dong1.layer animationForKey:@"position2"]) {
            self.yaoButton.enabled = YES;
        }
        //停止骰子自身的转动DH
        [dong1 stopAnimating];
        [dong2 stopAnimating];
        [dong3 stopAnimating];
        //[anim valueForKey:@"1positionfir"]
        if (anim == [dong1.layer animationForKey:@"1positionfir"]) {
            //根据摇出的号码显示不同的骰子图片
            dong1.image = [UIImage imageNamed:[NSString stringWithFormat:@"k3%@",self.imageName1]];
            [self performSelector:@selector(endMoveAnimation1) withObject:nil afterDelay:1.0];
        }else if (anim == [dong2.layer animationForKey:@"2positionfir"]){
            dong2.image = [UIImage imageNamed:[NSString stringWithFormat:@"k3%@",self.imageName2]];
            [self performSelector:@selector(endMoveAnimation2) withObject:nil afterDelay:1.0];
        }else if (anim == [dong3.layer animationForKey:@"3positionfir"]){
            dong3.image = [UIImage imageNamed:[NSString stringWithFormat:@"k3%@",self.imageName3]];
            [self performSelector:@selector(endMoveAnimation3) withObject:nil afterDelay:1.0];
        }
}

骰子滚动到相应的号码

- (void)endMoveAnimation {
    CGFloat toHeight;
    NSArray *allPoint;
    toHeight = 216;
    allPoint =  [[NSArray alloc] initWithObjects:
                     [NSValue valueWithCGPoint:CGPointMake((SWIDTH - 50)/3 * 0.5 + 10, toHeight)],
                     [NSValue valueWithCGPoint:CGPointMake((SWIDTH - 50)/3 * 1.5 + 25, toHeight)],
                     [NSValue valueWithCGPoint:CGPointMake((SWIDTH - 50)/3 * 2.5 + 40, toHeight)],
                     [NSValue valueWithCGPoint:CGPointMake((SWIDTH - 50)/3 * 0.5 + 10, toHeight + 90)],
                     [NSValue valueWithCGPoint:CGPointMake((SWIDTH - 50)/3 * 1.5 + 25, toHeight + 90)],
                     [NSValue valueWithCGPoint:CGPointMake((SWIDTH - 50)/3 * 2.5 + 40, toHeight + 90)],nil];

    CGPoint toPoint = [allPoint[[self.imageName1 integerValue] - 1] CGPointValue];

    CABasicAnimation *moveAnima = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnima.fromValue = [NSValue valueWithCGPoint:dong1.center];
    moveAnima.toValue = [NSValue valueWithCGPoint:toPoint];
    moveAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    CABasicAnimation *opacityAnima = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnima.fromValue = [NSNumber numberWithFloat:1.0f];
    opacityAnima.toValue = [NSNumber numberWithFloat:0.0f];

    CAAnimationGroup *dong1animGroup = [CAAnimationGroup animation];
    dong1animGroup.animations = [NSArray arrayWithObjects: moveAnima, opacityAnima,nil];
    dong1animGroup.duration = 1.2;
    dong1animGroup.fillMode = kCAFillModeForwards;
    dong1animGroup.removedOnCompletion = NO;
    [dong1animGroup setDelegate:self];
    [[dong1 layer] addAnimation:dong1animGroup forKey:@"position2"];
}

// 2, 3写法类似1 可以把一改成通用方法
- (void)endMoveAnimation2 {
}
- (void)endMoveAnimation3 {
}