iOS动画-UIView Animation

字数 431阅读 375

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) {
            }];
        }];
    }];

推荐阅读更多精彩内容