美文网首页
iOS animations学习(1)-简单的UIView动画

iOS animations学习(1)-简单的UIView动画

作者: 淘码小工 | 来源:发表于2017-11-16 20:39 被阅读31次

做IOS也一段时间,总觉得缺了一点必备技能。不能熟练的使用各种动画来使UI更有动感。所以近期特意下载了一份电子版的[iOS animations by Tutorials],虽说是英文版的,两天也看了一大章了。总结一下,以备平常时多查看。

UIView的动画各种参数

UIView动画可以设置的动画属性有:

1、大小变化(frame)
2、拉伸变化(bounds)
3、中心位置(center)
4、旋转(transform)
5、透明度(alpha)
6、背景颜色(backgroundColor)
7、拉伸内容(contentStretch)

UIViewAnimationOptions的枚举值如下,可组合使用:

UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件
 UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互
 UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
 UIViewAnimationOptionRepeat                    //无限重复执行动画
 UIViewAnimationOptionAutoreverse               //执行动画回路
 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置
 UIViewAnimationOptionAllowAnimatedContent      //转场:进行动画时重绘视图
 UIViewAnimationOptionShowHideTransitionViews   //转场:移除(添加和移除图层的)动画效果
 UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置

 UIViewAnimationOptionCurveEaseInOut            //时间曲线,慢进慢出(默认值)
 UIViewAnimationOptionCurveEaseIn               //时间曲线,慢进
 UIViewAnimationOptionCurveEaseOut              //时间曲线,慢出
 UIViewAnimationOptionCurveLinear               //时间曲线,匀速

 UIViewAnimationOptionTransitionNone            //转场,不使用动画
 UIViewAnimationOptionTransitionFlipFromLeft    //转场,从左向右旋转翻页
 UIViewAnimationOptionTransitionFlipFromRight   //转场,从右向左旋转翻页
 UIViewAnimationOptionTransitionCurlUp          //转场,下往上卷曲翻页
 UIViewAnimationOptionTransitionCurlDown        //转场,从上往下卷曲翻页
 UIViewAnimationOptionTransitionCrossDissolve   //转场,交叉消失和出现
 UIViewAnimationOptionTransitionFlipFromTop     //转场,从上向下旋转翻页
 UIViewAnimationOptionTransitionFlipFromBottom  //转场,从下向上旋转翻页

UIViewKeyframeAnimationOptions的枚举值如下,可组合使用:

UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画
UIViewAnimationOptionRepeat                   //无限重复执行动画
UIViewAnimationOptionAutoreverse              //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀
简单动画

1 .

UIView.animate(withDuration: 1.0) {
        //设置heading的中心点到view的中心
       self.heading.center.x += self.view.bounds.width
 }

这个动画是最简单的,只有一个参数,设置动画时间。
2 .

UIView.animate(withDuration: 1.0, animations: {
        
    }, completion: { _ in
        
    })

3 .

UIView.animate(withDuration: 1.0, delay: 1.0, options: [], animations: {
        
    }, completion: { _ in
        
    })

duration 动画时长
deley 延迟
option 是UIViewAnimationOptions,可以多选,动画样式
completion完成动画后的操作

spring 弹簧动画
    //usingSpringWithDamping参数来设置一个阻尼的动画,从0.0-1.0, 参数值越小, 弹性值越大
    //initialSpringVelocity控制动画的初始速度。代表弹簧动能的大小,快慢
    UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: [], animations: {
        
    }, completion: { _ in
        
    })

Transitions 过渡动画

此动画主要用于添加和删除一个 view的动画

1 .

UIView.transition(with: animationContainerView, duration: TimeInterval, options: UIViewAnimationOptions, animations: {
    //添加view
        self.animationContainerView.addSubview(newView) 
   //删除view
        self.newView.removeFromSuperview() 
   //Hide view 隐藏view
        self.newView.isHidden = true  
   //添加图片
         imageView.image = toImage
    }, completion: { _ in
        
    })

2 . 两个同级的view之间的替换

UIView.transition(from: UIView, to: UIView, duration: TimeInterval, options: UIViewAnimationOptions, completion: {
        
    })
帧动画

1 .

主要支持多个,顺序的动画,

    UIView.animateKeyframes(withDuration: 1.0, delay: 1.0, options: [], animations: {
         //add keyframes
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25,
          animations: {
            self.planeImage.center.x += 80.0
            self.planeImage.center.y -= 10.0
          }
        )

        UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.4) {
          self.planeImage.transform = CGAffineTransform(rotationAngle: -.pi / 8)
        }

        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
          self.planeImage.center.x += 100.0
          self.planeImage.center.y -= 50.0
          self.planeImage.alpha = 0.0
        }

        UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.01) {
          self.planeImage.transform = .identity
          self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
        }

        UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45) {
          self.planeImage.alpha = 1.0
          self.planeImage.center = originalCenter
        }
    }, completion: { _ in
        
    })

其中withRelativeStartTime 和 relativeDuration都是百分比,在总时间的百分比间隔中执行的动画


平常用到的动画
  1. label等控件的transform对象集合,需要使用CGAffineTransform对象定义
label.transform = CGAffineTransform()

//尺寸变化
  public /*not inherited*/ init(translationX tx: CGFloat, y ty: CGFloat)
//比例变化
public /*not inherited*/ init(scaleX sx: CGFloat, y sy: CGFloat)
//旋转变化
public /*not inherited*/ init(rotationAngle angle: CGFloat)

label.transform = .identity //每次变换前都要置位,不然你变换用的坐标系统不是屏幕坐标系统(即绝对坐标系统),而是上一次变换后的坐标系统 

1、CGAffineTransformIsIdentity //检测一个Transformation是不是恒等变换,也就是说不变
     bool CGAffineTransformIsIdentity ( CGAffineTransform t);//其结果返回一个BOOL值

2、CGAffineTransformEqualToTransform  //检测两个Transformation是否相等。
bool CGAffineTransformEqualToTransform (CGAffineTransform t1,CGAffineTransform t2);

CGAffineTransform详解

  1. cubeTransition 类似于3D盒子的动画
func cubeTransition(label: UILabel, text: String, direction: AnimationDirection) {

    let auxLabel = UILabel(frame: label.frame)
    auxLabel.text = text
    auxLabel.font = label.font
    auxLabel.textAlignment = label.textAlignment
    auxLabel.textColor = label.textColor
    auxLabel.backgroundColor = label.backgroundColor

    let auxLabelOffset = CGFloat(direction.rawValue) *
      label.frame.size.height/2.0

    auxLabel.transform = CGAffineTransform(scaleX: 1.0, y: 0.1).concatenating(
      CGAffineTransform(translationX: 0.0, y: auxLabelOffset))

    label.superview!.addSubview(auxLabel)

    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut,
      animations: {
        auxLabel.transform = .identity
        label.transform =
          CGAffineTransform(scaleX: 1.0, y: 0.1).concatenating(
          CGAffineTransform(translationX: 0.0, y: -auxLabelOffset))
      },
      completion: {_ in
        label.text = auxLabel.text
        label.transform = .identity

        auxLabel.removeFromSuperview()
      }
    )
  }



知行办公,专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之,3483099@qq.com
【Master】zelo,616701261@qq.com
【运营】运维艄公,897221533@qq.com;****
【产品设计】流浪猫,364994559@qq.com
【体验设计】兜兜,2435632247@qq.com
【iOS】淘码小工,492395860@qq.comiMcG33K,imcg33k@gmail.com
【Android】人猿居士,1059604515@qq.com;思路的顿悟,1217022114@qq.com
【java】首席工程师MR_W,feixue300@qq.com
【测试】土镜问道,847071279@qq.com
【数据】fox009521,42151960@qq.com

相关文章

网友评论

      本文标题:iOS animations学习(1)-简单的UIView动画

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