美文网首页
iOS 摇一摇+动画效果

iOS 摇一摇+动画效果

作者: 莦婼姑娘 | 来源:发表于2017-09-06 16:15 被阅读0次

    项目要做一个摇一摇抽奖的需求,于是就提前做了个简化的Demo,遇到的坑啊什么的,当然是记录下来啦~~
    摇一摇抽奖的大概简化流程是:
    1、摇动手机,手机震动提示,也可以加上震动音效,
    2、开始模拟摇动的动画,动画结束后进行下一步操作。
    测试过程中用了两种方法:
    第一种 是系统的- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event;方法。
    经过多次把手摇断了的尝试,发现系统的方法比较容易触发,短时间内摇动多次这个方法便会触发多次。如果在摇一摇抽奖情况下,摇动结束后执行后续事件的话也会执行多次。所以在此情况下,我添加了一个BOOL变量来控制这个情况:摇动之前打开,第一次摇动后关闭防止多次触发,摇动结束后事件执行完毕后打开,以便于下一次摇动事件的执行。
    第二种 使用加速仪,加速仪跟手机的设备一样,不需要经过用户允许,也没有访问限制,当然也没什么危害,手机基本配备而已。
    ——————————————————————
    好了,开始上代码!!!
    -——————————————————————

    第一种:系统方法

    1、创建 YaoYiYaoViewController.h 类,添加用于摇动时震动和声音的库:

    #import <QuartzCore/QuartzCore.h>
    #import <AudioToolbox/AudioToolbox.h>
    

    2、定义用于显示摇动的view、view的动画、防止摇动时多次触发的BOOL值:


    image.png

    3、允许摇动功能 & 视图显示时让控件变成第一响应者

    #pragma mark 视图显示时让控件变成第一响应者
    -(void)viewWillAppear:(BOOL)animated{
        [super viewWillAppear:animated];
        // 设置允许摇一摇功能
        [UIApplication sharedApplication].applicationSupportsShakeToEdit = YES;
        // 并让view成为第一响应者
        [self becomeFirstResponder];
        isXiangYing = YES;
    }
    #pragma mark 视图不显示时注销控件第一响应者的身份
    -(void)viewWillDisappear:(BOOL)animated{
        [super viewWillDisappear:animated];
        [self resignFirstResponder];
    }
    

    4、设置view

    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor whiteColor];
        YYYview = [UIView new];
        YYYview.frame = CGRectMake((SCREEN_WIDTH -100)/2.0, 150, 100, 200);
        YYYview.backgroundColor = [UIColor yellowColor];
        [self.view addSubview:YYYview];
    }
    

    5、在系统摇动的相关方法里设置

    #pragma mark - 摇一摇相关方法
    // 摇一摇开始摇动
    - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event {
        if (motion == UIEventSubtypeMotionShake) {// 判断是否是摇动事件
            if (isXiangYing) {
                NSLog(@"摇一摇开始!!!");
                //设置开始摇晃时震动
                AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
                //加载动画
                [self theAnimations];
                isXiangYing = NO;
            }
        }
    }
    // 摇一摇摇动结束
    - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event {
        if (motion == UIEventSubtypeMotionShake) { // 判断是否是摇动事件
            NSLog(@"摇一摇结束~~~~~");
            //摇动结束添加事件
        }
    }
    // 摇一摇取消摇动
    - (void)motionCancelled:(UIEventSubtype)motion withEvent:(UIEvent *)event {
    }
    

    View的动画:

    #define angle2Radian(angle)  ((angle)/180.0*M_PI)
    -(void)theAnimations{
        //1.创建核心动画
        keyAnima = [CAKeyframeAnimation animation];
        keyAnima.keyPath = @"transform.rotation";
        YYYview.layer.position = CGPointMake(YYYview.frame.origin.x +YYYview.frame.size.width/2,
                                             YYYview.frame.origin.y +YYYview.frame.size.height);
        YYYview.layer.anchorPoint = CGPointMake(0.5, 1);
        //设置图标抖动弧度  把度数转换为弧度  度数/180*M_PI
        keyAnima.values = @[@(angle2Radian(0)),
                            @(-angle2Radian(8)),
                            @(angle2Radian(0)),
                            @(angle2Radian(8)),
                            @(angle2Radian(0))];
        //设置动画时间
        keyAnima.duration = 1;
        //设置动画的重复次数(设置为最大值)
        keyAnima.repeatCount = MAXFLOAT;
        keyAnima.fillMode = kCAFillModeForwards;
        keyAnima.removedOnCompletion = NO;
        keyAnima.delegate = self;
        [YYYview.layer addAnimation:keyAnima forKey:@"animateLayer"];
    }
    -(void)animationDidStart:(CAAnimation *)anim{
        //动画开始
        NSLog(@"动画开始啦!!!!!");
    }
    -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
        //结束动画执行事件
        NSLog(@"动画结束啦~~~~~");
    }
    

    到此时这个简单的Demo已经完成。
    6、备注
    上面的方法没有添加音效

    //开始摇动时执行的事件
    // 1.添加摇动动画
    // 2.设置播放音效
    SystemSoundID soundID;
    NSString *path = [[NSBundle mainBundle] pathForResource:@"shake_sound_male" ofType:@"wav"];
    AudioServicesCreateSystemSoundID((__bridge CFURLRef)[NSURL fileURLWithPath:path], &soundID);
    // 添加摇动声音
    AudioServicesPlaySystemSound (soundID);
    // 3.设置震动
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
    

    对于- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event;方法里,motion的type:


    motion的type

    第二种:加速仪

    1、添加CoreMotion.framework


    添加库

    2、引入头文件

    #import <CoreMotion/CoreMotion.h>  
    

    3、创建使用CMMotionManager

    @property (nonatomic, strong) CMMotionManager *motionManager;
    

    4、初始化加速仪,一般在viewDidLoad中进行。不要忘记了viewDidLoad里面还有上面设置的view

    self.motionManager = [[CMMotionManager alloc] init];
        self.motionManager.accelerometerUpdateInterval = 0.5;//加速仪更新频率,以秒为单位
    

    5、开始接收加速仪数据([startAccelerometerUpdatesToQueue:withHandler:])。其中的动画跟上面的一样哦~

    -(void)viewDidAppear:(BOOL)animated{
        [self startAccelerometer];
    }
    -(void)startAccelerometer{
        //以push的方式更新并在block中接收加速度
        [self.motionManager startAccelerometerUpdatesToQueue:[[NSOperationQueue alloc]init] withHandler:^(CMAccelerometerData *accelerometerData, NSError *error) {
            [self outputAccelertionData:accelerometerData.acceleration];
            if (error) {
                NSLog(@"motion error:%@",error);
            }
        }];
    }
    -(void)outputAccelertionData:(CMAcceleration)acceleration{
        //综合3个方向的加速度
        double accelerameter =sqrt( pow( acceleration.x , 2 ) + pow( acceleration.y , 2 ) + pow( acceleration.z , 2) );
        //当综合加速度大于2.3时,就激活效果(此数值根据需求可以调整,数据越小,用户摇动的动作就越小,越容易激活,反之加大难度,但不容易误触发)
        if (accelerameter > 1.5f) {
            //立即停止更新加速仪(很重要!)
            [self.motionManager stopAccelerometerUpdates];
            dispatch_async(dispatch_get_main_queue(), ^{  
                //UI线程必须在此block内执行,例如摇一摇动画、UIAlertView之类
                //设置开始摇晃时震动
                AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
                //加载动画
                [self theAnimations];
            });
        }      
    }
    -(void)viewDidDisappear:(BOOL)animated  {
        //停止加速仪更新(很重要!)  
        [self.motionManager stopAccelerometerUpdates];
    }
    

    6、摇一摇核心已经实现,但还差最后一步:当App退到后台时必须停止加速仪更新,回到当前时重新执行。否则应用在退到后台依然会接收加速度更新,可能会与其它当前应用冲突,产生不好的体验。所以,分别在viewDidAppear和viewDidDisappear中加入如下监听:

    -(void)viewDidAppear:(BOOL)animated{
        [self startAccelerometer];
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(receiveNotification:) name:UIApplicationDidEnterBackgroundNotification object:nil];
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(receiveNotification:) name:UIApplicationWillEnterForegroundNotification object:nil];
    }
    -(void)viewDidDisappear:(BOOL)animated  {
        //停止加速仪更新(很重要!)  
        [self.motionManager stopAccelerometerUpdates];
        [[NSNotificationCenter defaultCenter] removeObserver:self  name:UIApplicationDidEnterBackgroundNotification object:nil];
        [[NSNotificationCenter defaultCenter] removeObserver:self name:UIApplicationWillEnterForegroundNotification object:nil];
    }
    //对应上面的通知中心回调的消息接收
    -(void)receiveNotification:(NSNotification *)notification{
        if ([notification.name isEqualToString:UIApplicationDidEnterBackgroundNotification]){
            [self.motionManager stopAccelerometerUpdates];
        }else{
            [self startAccelerometer];
        }
    }
    

    总结

    对于两种方法都进行了测试,个人感觉系统的方法虽然比较容易触发,加个BOOL控制还是比较方便的。加速仪的方法有些比较难触发,直接感觉就是比系统的方法甩的力大,不知道是不是设置的问题,以后加以改进。同学们喜欢哪个就用哪个喽O(∩_∩)O

    相关文章

      网友评论

          本文标题:iOS 摇一摇+动画效果

          本文链接:https://www.haomeiwen.com/subject/qyhvjxtx.html