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

2018-03-22  本文已影响0人  LucXion

一、礼物动画

效果如图:


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及以上版本

上一篇下一篇

猜你喜欢

热点阅读