html5中文学习网

您的位置: 首页 > ios » 正文

iOS动画――ViewAnimations_IOS开发

[ ] 已经帮助:人解决问题

   这一篇我们来说说UIKit中的动画API,期中包括:RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.UIView.animateWithDurationRnDHTML5中文学习网 - HTML5先行者学习网

  UIView.transitionWithViewRnDHTML5中文学习网 - HTML5先行者学习网

  UIView.animateKeyframesWithDurationRnDHTML5中文学习网 - HTML5先行者学习网

  UIView.addKeyframeWithRelativeStartTimeRnDHTML5中文学习网 - HTML5先行者学习网

  今天的故事就将围绕这些API展开,阐述他的前世今生。RnDHTML5中文学习网 - HTML5先行者学习网

  UIKit动画API使用起来十分简单与方便,他避免了Core Animation的复杂性,虽然事实上UIKit动画API的底层使用的也是Core Animation。RnDHTML5中文学习网 - HTML5先行者学习网

  来看第一个,UIView.UIView.animateWithDurationRnDHTML5中文学习网 - HTML5先行者学习网

  先来看一下函数原型:RnDHTML5中文学习网 - HTML5先行者学习网

  class func animateWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)RnDHTML5中文学习网 - HTML5先行者学习网

  一共七个参数:RnDHTML5中文学习网 - HTML5先行者学习网

  durationRnDHTML5中文学习网 - HTML5先行者学习网

  表示动画执行时间。RnDHTML5中文学习网 - HTML5先行者学习网

  delayRnDHTML5中文学习网 - HTML5先行者学习网

  动画延迟时间。RnDHTML5中文学习网 - HTML5先行者学习网

  usingSpringWithDampingRnDHTML5中文学习网 - HTML5先行者学习网

  表示弹性属性。RnDHTML5中文学习网 - HTML5先行者学习网

  initialSpringVelocityRnDHTML5中文学习网 - HTML5先行者学习网

  初速度。RnDHTML5中文学习网 - HTML5先行者学习网

  optionsRnDHTML5中文学习网 - HTML5先行者学习网

  可选项,一些可选的动画效果,包括重复等。RnDHTML5中文学习网 - HTML5先行者学习网

  animationsRnDHTML5中文学习网 - HTML5先行者学习网

  表示执行的动画内容,包括透明度的渐变,移动,缩放。RnDHTML5中文学习网 - HTML5先行者学习网

  completionRnDHTML5中文学习网 - HTML5先行者学习网

  表示执行完动画后执行的内容。RnDHTML5中文学习网 - HTML5先行者学习网

  关于这些参数,选一个列子,尝试不同的参数,这样可以更好的理解每个参数的意义。RnDHTML5中文学习网 - HTML5先行者学习网

iOS动画——ViewAnimations 三联

  好丑的动画RnDHTML5中文学习网 - HTML5先行者学习网

  self.animationView2.alpha = 0RnDHTML5中文学习网 - HTML5先行者学习网

  self.animationView3.alpha = 0RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void inRnDHTML5中文学习网 - HTML5先行者学习网

  self.animationView.center.y += 100RnDHTML5中文学习网 - HTML5先行者学习网

  }) { (Bool) -> Void inRnDHTML5中文学习网 - HTML5先行者学习网

  println("finish")RnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void inRnDHTML5中文学习网 - HTML5先行者学习网

  self.animationView2.alpha = 1RnDHTML5中文学习网 - HTML5先行者学习网

  }) { (Bool) -> Void inRnDHTML5中文学习网 - HTML5先行者学习网

  println("finish")RnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void inRnDHTML5中文学习网 - HTML5先行者学习网

  self.animationView3.center.y -= 100RnDHTML5中文学习网 - HTML5先行者学习网

  self.animationView3.alpha = 1RnDHTML5中文学习网 - HTML5先行者学习网

  }) { (Bool) -> Void inRnDHTML5中文学习网 - HTML5先行者学习网

  println("finish")RnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  代码就不逐行解释,三个UIView.animateWithDuration分别操作三个方块。第一个方块是一个移动动画,第二个方块是一个透明度渐变动画,第三个方块是移动加透明度渐变的组合动画,可能看的不是很清楚。不得不说这个动画真的很丑~~~RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.UIView.animateWithDuration这个API说穿了就是逐渐改变UIView的某项属性,这些属性包括:位置,大小,透明度,颜色等等。RnDHTML5中文学习网 - HTML5先行者学习网

  再来看一下UIView.transitionWithView,这是一个过度动画,主要用于UIView进入或者离开视图。RnDHTML5中文学习网 - HTML5先行者学习网

  先看一下这一个动画效果吧:RnDHTML5中文学习网 - HTML5先行者学习网

9.gif

  9.gifRnDHTML5中文学习网 - HTML5先行者学习网

  其中banner右移消失的动画用的就是上面提到的UIView.UIView.animateWithDuration,而进入的动画用的就是现在要讲的UIView.transitionWithView。很像一页书页翻下来的感觉哈。RnDHTML5中文学习网 - HTML5先行者学习网

  我们来看一下函数原型RnDHTML5中文学习网 - HTML5先行者学习网

  class func transitionWithView(view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)RnDHTML5中文学习网 - HTML5先行者学习网

  一共五个参数:RnDHTML5中文学习网 - HTML5先行者学习网

  viewRnDHTML5中文学习网 - HTML5先行者学习网

  这当然就是指定要进行动画的对象了。RnDHTML5中文学习网 - HTML5先行者学习网

  durationRnDHTML5中文学习网 - HTML5先行者学习网

  和上面一样这个参数指定动画时间长短。RnDHTML5中文学习网 - HTML5先行者学习网

  optionsRnDHTML5中文学习网 - HTML5先行者学习网

  这是一个可选参数,虽然是可选的但是不填这个API就没意义了,因为UIView如何进入视图就是由这个参数决定。到底是像书页一样翻进去,还是像百叶窗一样转动就是由这个参数决定,具体有哪些可以选择,点进去看看就知道了。RnDHTML5中文学习网 - HTML5先行者学习网

  animationsRnDHTML5中文学习网 - HTML5先行者学习网

  这个选项你可以将它理解为在动画结束后UIView的形态。RnDHTML5中文学习网 - HTML5先行者学习网

  completionRnDHTML5中文学习网 - HTML5先行者学习网

  动画结束后运行的代码。RnDHTML5中文学习网 - HTML5先行者学习网

  代码大概长这样RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.transitionWithView(status, duration: 0.33, options:RnDHTML5中文学习网 - HTML5先行者学习网

  .CurveEaseOut | .TransitionCurlDown, animations: {RnDHTML5中文学习网 - HTML5先行者学习网

  self.yourView.hidden = falseRnDHTML5中文学习网 - HTML5先行者学习网

  }, completion:nilRnDHTML5中文学习网 - HTML5先行者学习网

  })RnDHTML5中文学习网 - HTML5先行者学习网

  这一部分代码已上传Github,Github地址在文章的最后面。RnDHTML5中文学习网 - HTML5先行者学习网

  我相信看看源代码,大家都能明白的。RnDHTML5中文学习网 - HTML5先行者学习网

  这里再给大家看一个动画,也是用前面提到过的函数写的:RnDHTML5中文学习网 - HTML5先行者学习网

尼玛~这显示效果太差了吧,不知道你们那里看到的是什么样的

  尼玛~这显示效果太差了吧,不知道你们那里看到的是什么样的RnDHTML5中文学习网 - HTML5先行者学习网

  仿3D效果,代码也在上传的那个Demo中,大家自己看啦~RnDHTML5中文学习网 - HTML5先行者学习网

  到最后一个函数啦啦,UIView.animateKeyframesWithDuration,先来看一下动画效果吧。RnDHTML5中文学习网 - HTML5先行者学习网

小飞机~飞啊飞~

  小飞机~飞啊飞~RnDHTML5中文学习网 - HTML5先行者学习网

  我们很容易就可以发现,这个动画分了很多阶段完成,我们当然可以用我们提到的第一个函数UIView.UIView.animateWithDuration来完成,但是,你不觉得嵌套加嵌套显得很不好看吗,我们当然还有更好的方法来实现,就是我们现在要说的,先来看一下函数原型:RnDHTML5中文学习网 - HTML5先行者学习网

  class func animateKeyframesWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)RnDHTML5中文学习网 - HTML5先行者学习网

  一共五个参数:RnDHTML5中文学习网 - HTML5先行者学习网

  duration:整个动画过程的时间。RnDHTML5中文学习网 - HTML5先行者学习网

  delay:延迟多久开始。RnDHTML5中文学习网 - HTML5先行者学习网

  options:可选项,比如说重复,倒着来一遍等效果,自己都试试看吧。RnDHTML5中文学习网 - HTML5先行者学习网

  animations:需要执行的动画,里面可以是多个UIView.addKeyframeWithRelativeStartTime。RnDHTML5中文学习网 - HTML5先行者学习网

  至于这个UIView.addKeyframeWithRelativeStartTime方法,类似于我们提到的第一个UIView.UIView.animateWithDuration,也是一个属性渐变的方法,不过这个方法只能写在他的爸爸UIView.addKeyframeWithRelativeStartTime的animation参数函数块中。RnDHTML5中文学习网 - HTML5先行者学习网

  completion:动画执行结束之后执行的代码。RnDHTML5中文学习网 - HTML5先行者学习网

  来看一下我们实现这个小飞机~飞啊飞~~的代码:RnDHTML5中文学习网 - HTML5先行者学习网

  let originalCenter = planeImage.centerRnDHTML5中文学习网 - HTML5先行者学习网

  UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {RnDHTML5中文学习网 - HTML5先行者学习网

  //add keyframesRnDHTML5中文学习网 - HTML5先行者学习网

  UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.center.x += 80.0RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.center.y -= 10.0RnDHTML5中文学习网 - HTML5先行者学习网

  })RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))RnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.center.x += 100.0RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.center.y -= 50.0RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.alpha = 0.0RnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.transform = CGAffineTransformIdentityRnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)RnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.alpha = 1.0RnDHTML5中文学习网 - HTML5先行者学习网

  self.planeImage.center = originalCenterRnDHTML5中文学习网 - HTML5先行者学习网

  }RnDHTML5中文学习网 - HTML5先行者学习网

  }, completion:nil)RnDHTML5中文学习网 - HTML5先行者学习网

  完整的代码在最后提供的源代码中有。RnDHTML5中文学习网 - HTML5先行者学习网

  事实告诉我们动画是要靠设计的,你看我上面的动画抽的一笔,但事实上用同样的代码可以写出很漂亮的动画。RnDHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助