iOS UIView动画

本文介绍如何利用UIView动画提升应用的视觉效果与用户体验,包括位置、透明度、缩放、颜色及翻转等基本动画类型,并进一步探讨了动画的重复执行、变速及弹簧效果等高级技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

logo.jpg

>基础部分


前言:
一直在想,感觉自己做了这么久开发了,常用的库UI控件网络开发等都有一定的经验了,但是为什么自己做出来的东西就少了那么些B格,就是没有人大神做出来的感觉?
其实答案有很多,一定经验,并不等于透彻。再者往往越到后期,越是注重架构资源节约性能优化,然而这些不是一天两天能够出来得了的,那么怎么才能让自己的app看上去让人眼前一亮、甚至惊叹呢?那就是动画无疑了。
对于普通用户而言,颜值即正义,这句话不是盖的,满足功能需求后,应当积极追求更精美的UI更优良的用户体验感

UIView动画.png

由上图可见,UIView已经囊括了很多动画了,通过 UIView.animate 接口进行使用


一、Position[位置]

position.gif

  • 横向移动,改变view的x即可,同理,纵向改变view的y即可
UIView.animate(withDuration: 1) {
    self.pinkSquare.center.x = self.view.bounds.width - self.pinkSquare.center.x

}
  • 延时操作
UIView.animate(withDuration: 1, delay: 0.5, options: .curveLinear, animations: {

    self.purpleSquare.center.y = self.view.bounds.height - self.purpleSquare.center.y
}, completion: nil)


二、Opacity[透明度]

Opacity.gif

  • 0 -> 1显示程度一次递增
UIView.animate(withDuration: 1) {
     self.pinkSquare.alpha = 0
}


三、Scale[缩放]

Scale.gif

  • >1.0 放大,<1.0 缩小
UIView.animate(withDuration: 1) {
    self.purpleSquare.transform = CGAffineTransform.init(scaleX: 2.0, y: 2.0)
}


四、Color[颜色]

Color.gif

UIView.animate(withDuration: 1) {
    self.greenSquare.backgroundColor = UIColor.orange
    self.colorLab.textColor = UIColor.white
}


五、Rotation[翻转]

rotation.gif

  • M_PI -> 180度
UIView.animate(withDuration: 1) {
     self.pinkSquare.transform = CGAffineTransform.init(rotationAngle: CGFloat(M_PI))
}



>进阶部分


一、UIView动画的Timing
  • 各属性的原始状态
  • 各属性的结束状态
  • 执行时长
  • 执行过程
  • 执行完毕的处理

二、UIView动画的重复执行

repeat.gif

  • Repeat
UIView.animate(withDuration: 1, delay: 0, options: .repeat, animations: {
    self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
}, completion: nil)
  • Autoreverse
UIView.animate(withDuration: 1, delay: 0, options: [.repeat, .autoreverse], animations: {
    self.purpleSquare.center.x = self.view.bounds.width - self.purpleSquare.center.x
}, completion: nil)


三、UIView Easing动画[变速]

Easing.gif

Easing

  • 默认为curveLinear[匀速]
UIView.animate(withDuration: 1) {//默认为curveLinear
    self.pinkSquare.center.x = self.view.bounds.width - self.pinkSquare.center.x
}
  • curveEaseIn[先慢后快]
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseIn, animations: {
    self.garySquare.center.x = self.view.bounds.width - self.garySquare.center.x
}, completion: nil)
  • curveEaseOut[先快后慢]
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
    self.purpleSquare.center.x = self.view.bounds.width - self.purpleSquare.center.x
}, completion: nil)
  • curveEaseInOut[先慢中快后慢]
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
    self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
}, completion: nil)
安利一个贝塞尔调整理解的网站、一个函数理解网站,谁用谁知道![对写web的极其友好]


四、UIView Spring动画[弹簧,iOS7.0]

Spring

// 弹簧效果基于物理,之前的基于数学
// usingSpringWithDamping阻力,>1<
// initialSpringVelocity初速度
UIView.animate(withDuration: 3, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: .curveLinear, animations: {
    self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
}, completion: nil)

Spring.gif



>结束语


越写、越看、越学习,发现自己越菜……
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值