iOS动画-UIView Animation

iOS动画-UIView Animation

众所周知动画效果在移动开发中是非常重要的，因为用户在使用app讲究两个重要的元素1，UI 2，UE。 而动画效果大大提示用户体验感，下面将我自己理解的效果。

iOS 动画函数

如图iOS能够调用的动画函数有5个

动画列表

下面我讲一一讲解

• [UIView animateWithDuration: animations:]
• [UIView animateWithDuration: animations: completion:]
• [UIView animateWithDuration: delay: options: animation completion:]ß
• [UIView animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity: options:animations:completion:]

[UIView animateWithDuration: animations:]

• duration 动画时间(下同)
• animations (执行动画block 下同)

效果展示

代码展示

    CGFloat changeY = self.view.frame.size.height * 0.7;
    
    [self.view layoutIfNeeded];
    
    [UIView animateWithDuration:1.0 animations:^{
        
        CGRect frame;
        //1.微博
        frame = _wbBtn.frame;
        frame.origin.y = changeY;
        _wbBtn.frame = frame;
        
        //2.微信
        frame = _wxBtn.frame;
        frame.origin.y = changeY;
        _wxBtn.frame = frame;
        
        //3.QQ
        frame = _qqBtn.frame;
        frame.origin.y = changeY;
        _qqBtn.frame = frame;
        
        [self.view layoutIfNeeded];
    }];

[UIView animateWithDuration: animations: completion:]

• completion (动画完成时候调用的block)

效果展示

动画2

代码展示

    CGFloat changeY = self.view.frame.size.height * 0.7;
    
    [self.view layoutIfNeeded];
    
    [UIView animateWithDuration:1.0 animations:^{
        CGRect frame;
        //1.微博
        frame = _wbBtn.frame;
        frame.origin.y = changeY;
        _wbBtn.frame = frame;
        
        //2.微信
        frame = _wxBtn.frame;
        frame.origin.y = changeY;
        _wxBtn.frame = frame;
        
        //3.QQ
        frame = _qqBtn.frame;
        frame.origin.y = changeY;
        _qqBtn.frame = frame;
        
        [self.view layoutIfNeeded];
        
    } completion:^(BOOL finished) {
        
        //改变颜色
        [UIView animateWithDuration:1.0 animations:^{
            
            self.view.backgroundColor = [UIColor grayColor];
        }];
    }];

[UIView animateWithDuration: delay: options: animation completion:]

• delay (延时执行)
• options (动画参数)

这里重点下 options 这个变量， 通过设置这个变量我们可以实现非常多种效果,也是精辟所在,我将抽取各别演示这个参数不同的效果。

• UIViewAnimationOptionLayoutSubviews
• UIViewAnimationOptionAllowUserInteraction
• UIViewAnimationOptionBeginFromCurrentState
• UIViewAnimationOptionRepeat //动画效果重复
• UIViewAnimationOptionAutoreverse //翻转
• UIViewAnimationOptionOverrideInheritedDuration
• UIViewAnimationOptionOverrideInheritedCurve
• UIViewAnimationOptionAllowAnimatedContent
• UIViewAnimationOptionShowHideTransitionViews
• UIViewAnimationOptionOverrideInheritedOptions
• UIViewAnimationOptionCurveEaseInOut //先加速后减速
• UIViewAnimationOptionCurveEaseIn //由慢到快
• UIViewAnimationOptionCurveEaseOut //由快到慢
• UIViewAnimationOptionCurveLinear //匀速
• UIViewAnimationOptionTransitionNone
• UIViewAnimationOptionTransitionFlipFromLeft //从左翻转
• UIViewAnimationOptionTransitionFlipFromRight //从右边翻转
• UIViewAnimationOptionTransitionCurlUp //从上往下翻转
• UIViewAnimationOptionTransitionCurlDown //从下往上翻转
• UIViewAnimationOptionTransitionCrossDissolve //从旧视图过度到下一面ITU
• UIViewAnimationOptionTransitionFlipFromTop //从上翻转
• UIViewAnimationOptionTransitionFlipFromBottom //从下翻转

效果展示

效果一

效果二

效果三

代码展示

    CGFloat changeY = self.view.frame.size.height * 0.7;
    
    [self.view layoutIfNeeded];
    

    [UIView animateWithDuration:2.0 delay:0 options:UIViewAnimationOptionCurveEaseInOut   animations:^{
        CGRect frame;
        //1.微博
        frame = _wbBtn.frame;
        frame.origin.y = changeY;
        _wbBtn.frame = frame;
        
        //2.微信
        frame = _wxBtn.frame;
        frame.origin.y = changeY;
        _wxBtn.frame = frame;
        
        //3.QQ
        frame = _qqBtn.frame;
        frame.origin.y = changeY;
        _qqBtn.frame = frame;
        
        [self.view layoutIfNeeded];
    } completion:^(BOOL finished) {
    }];

[UIView animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity: options:animations:completion:]

• dampingRatio：速度衰减比例。取值范围0 ~ 1，值越低震动越强
• velocity：初始化速度，值越高则物品的速度越快

效果展示

弹簧效果

代码展示

    
    CGFloat changeY = self.view.frame.size.height * 0.7;
    
    [self.view layoutIfNeeded];
    
    [UIView animateWithDuration:1.0 delay:1.0 usingSpringWithDamping:0.4 initialSpringVelocity:5 options:UIViewAnimationOptionCurveLinear animations:^{
        //1.微博
        CGRect frame;
        frame = _wbBtn.frame;
        frame.origin.y = changeY;
        _wbBtn.frame = frame;
        
    } completion:^(BOOL finished) {
        
        [UIView animateWithDuration:1.0 delay:1.0 usingSpringWithDamping:0.5 initialSpringVelocity:5 options:UIViewAnimationOptionCurveLinear animations:^{
            
            //2.微信
            CGRect frame;
            frame = _wxBtn.frame;
            frame.origin.y = changeY;
            _wxBtn.frame = frame;

        } completion:^(BOOL finished) {
            
            [UIView animateWithDuration:1.0 delay:1.0 usingSpringWithDamping:0.6 initialSpringVelocity:5 options:UIViewAnimationOptionCurveLinear animations:^{
                
                //3.QQ
                CGRect frame;
                frame = _qqBtn.frame;
                frame.origin.y = changeY;
                _qqBtn.frame = frame;
                
            } completion:^(BOOL finished) {
            }];
        }];
    }];