美文网首页
礼物发散动画, 提示框弹出动画,高斯模糊蒙版

礼物发散动画, 提示框弹出动画,高斯模糊蒙版

作者: LucXion | 来源:发表于2018-03-22 13:10 被阅读0次

    一、礼物动画

    效果如图:


    gif.gif

    直接上代码:

    -(void)animateInmusicalNoteView:(UIView *)view{
        
        view.alpha = 0
        // (arc4random() % 2) 生成 0 - 1 的随机数
        // (arc4random() % 10) 生成 0 - 9 的随机数
        
        // (2 - 3) + (0 ~ 0.9)  =  (2 - 3.9)
        CGFloat totalAnimationDuration =(arc4random() % 2)+2+(arc4random() % 10)/10.0;
        
        NSLog(@"%f",totalAnimationDuration);
        
    // 动画 1 设置不规则的移动速度
        //  Duration : 持续时间
        //  delay : 动画延迟
        //  Damping : 弹簧效果 0 ~ 1, 1为无弹簧效果
        //  SpringVelocity : 初始速度 可以大于 1
        //  UIViewAnimationOptionCurveEaseOut 快入缓出
        [UIView animateWithDuration:0.5 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveEaseOut animations:^{
            // 设置透明度
    
        } completion:NULL];
        
    // 动画 2  保持不规则的旋转
        [UIView animateWithDuration:totalAnimationDuration animations:^{
            // (0 ~ 19) / 10 = 0 ~ 1.9
            // 随机倾斜  2 * M_PI 为 180度
            CGFloat rotationNumber = (arc4random() % 20)/10.0 ;
            view.transform = CGAffineTransformMakeRotation (rotationNumber*M_PI);
            
        } completion:NULL];
        
        // 绘制贝塞尔曲线
        UIBezierPath *heartTravelPath = [UIBezierPath bezierPath];
        
        // 横屏
        if (self.view.frame.size.width>self.view.frame.size.height) {
            CGFloat rotationWidthNumber = (arc4random() % 10)+self.view.frame.size.width/2-5 ;
            CGFloat rotationHighNumber= (arc4random() % (int)self.view.frame.size.height) ;
            [heartTravelPath moveToPoint:CGPointMake(self.view.frame.size.width, self.view.frame.size.height/2)];
            [heartTravelPath addCurveToPoint:CGPointMake(0, self.view.frame.size.height/2) controlPoint1:CGPointMake(rotationWidthNumber,rotationHighNumber) controlPoint2:CGPointMake(rotationWidthNumber,rotationHighNumber)];
        }else
        {
            // 竖屏
            // 随机取 0 ~ 宽度
            CGFloat rotationWidthNumber = (arc4random() % (int)self.view.frame.size.width) ;
            // 随机取 0 ~ 9 + 高度 / 2 - 5
            CGFloat rotationHighNumber=  (arc4random() % 10)+self.view.frame.size.height/2-5;
            // 设置起点 : 中心点的最低处
            [heartTravelPath moveToPoint:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height)];
            // 设置三次曲线 : 终点在中心的最高处
            [heartTravelPath addCurveToPoint:CGPointMake(self.view.frame.size.width/2,0) controlPoint1:CGPointMake(rotationWidthNumber,rotationHighNumber) controlPoint2:CGPointMake(rotationWidthNumber,rotationHighNumber)];
        }
        
    // 动画3: 设置三次曲线移动路线
        CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        keyFrameAnimation.path = heartTravelPath.CGPath;
        keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        keyFrameAnimation.duration = totalAnimationDuration;
        [view.layer addAnimation:keyFrameAnimation forKey:@"positionOnPath"];
        
    // 动画4: 动画结束设置移除
        //Alpha & remove from superview
        [UIView animateWithDuration:totalAnimationDuration animations:^{
            view.alpha = 1.0;
        } completion:^(BOOL finished) {
            [view removeFromSuperview];
        }];
    }
    
    

    二、提示框弹出动画:

    效果如图:


    弹出框.gif

    核心代码:

            hudView.alpha = 0;
            hudView.transform = CGAffineTransformScale(hudView.transform,0.1,0.1);
            [UIView animateWithDuration:0.3 animations:^{
                hudView.transform = CGAffineTransformIdentity;
                hudView.alpha = 1;
            }];
    

    三、高斯蒙版效果

    效果如图:


    Snip20180322_3.png

    核心代码:

        UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
        effectView.frame = CGRectMake(0, self.view.frame.size.height / 2, self.view.frame.size.width, self.view.frame.size.height / 2);
        [self.view addSubview:effectView];
    

    备注:此方法仅支持 iOS 8及以上版本

    相关文章

      网友评论

          本文标题:礼物发散动画, 提示框弹出动画,高斯模糊蒙版

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