iOS动画:开始篇(1)

22 篇文章 0 订阅
21 篇文章 0 订阅

本篇主要介绍iOS中一些基本的动画实现方法。

基本动画

UIView.animate(withDuration: 0.5) {
  self.heading.center.x += self.view.bounds.width
}

调用UIView的类方法 animate(withDuration:animations:) 后动画立刻开始,并执行0.5秒

UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
  animations: {
    self.username.center.x += self.view.bounds.width
  }, 
  completion: nil
)

withDuration:动画持续时间
delay:动画延迟多少秒后执行
options:定制一些动画效果,空数组[]表示没有特别的设置
animations:动画block
completion:动画完成后的block

options可选值:
.repeat: 动画一直循环执行
.autoreverse: 此属性通常结合repeat使用,当动画向前执行后自动反转执行,例如

UIView.animate(withDuration: 0.5, delay: 0.4, 
  options: [.repeat, .autoreverse],
  animations: {
    self.password.center.x += self.view.bounds.width
  }, 
  completion: nil
)

.curveLinear: 线性执行,没有加速效果,也没有减速效果
.curveEaseIn: 动画开始时逐渐加速执行
.curveEaseOut: 动画结束时减速执行
.curveEaseInOut: 动画加速开始执行,动画结束时减速执行

弹簧效果

UIView.animate(withDuration: 0.5, delay: 0.5, 
usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
  self.loginButton.center.y -= 30.0
  self.loginButton.alpha = 1.0
}, completion: nil)

usingSpringWithDamping: 弹簧的阻尼系数,对弹簧阻力的控制参数,参数值接收0.0到1.0,值越大弹簧越笨重。
initialSpringVelocity: 弹簧的初始速度,默认值为0

转变效果

UIView.transition(with: animationContainerView, 
    duration: 0.33, 
    options: [.curveEaseOut, .transitionFlipFromBottom], 
    animations: {
      self.animationContainerView.addSubview(newView)
    }, 
    completion: nil
  )

这段代码以动画的形式在容器上添加一个新的view。
1.把底部作为视图翻转的“枢纽”,从底部翻转动画效果,类似的还有transitionFlipFromLefttransitionFlipFromRighttransitionFlipFromTop
gif_1
2.transitionCurlDown:向前翻页的动画过渡效果。transitionCurlUp向后翻页的动画过渡效果。
gif_2
3.transitionCrossDissolve: 旧视图溶解消失显示下一个新视图的效果。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值