Section One
主要是通过改变view的size position 和 color
搭建基础页面
在开始的时候
overridefunc viewWillAppear(_ animated:Bool) {
super.viewWillAppear(animated)
heading.center.x -=view.bounds.width
username.center.x -=view.bounds.width
password.center.x -=view.bounds.width
}
为了保证头部和textField依次展现在页面中 在viewDidAppear中添加如下代码
UIView.animate(withDuration:0.5) {
self.heading.center.x += self.view.bounds.width
}
UIView.animate(withDuration:0.5, delay:0.3, options: [], animations: {
self.username.center.x += self.view.bounds.width
}, completion: nil)
UIView.animate(withDuration:0.5, delay:0.4, options: [], animations: {
self.password.center.x += self.view.bounds.width
}, completion: nil)
Position and size
bounds: Animate this property to reposition the view's content within the view's frame
frame: Animate this property to move and/or scale the view
center: Animate this property when you want to move the view to a new location on screen
Appearance
.backgroundColor:
.alpha. Change this property to create fade-in and fade-out effects
Transformation
.transform: Modify this property within an animation block to animate the rotation, scale, and or position of a view
Animation options 方法中options: []的选择
Repeating
.repeat
.autoreverse 里面包含了 repeat这个动作,this option repeatedly plays your animation forward, then in reverse.
比如上面的username, 如果用repeat, 就一直重复center改变的这个过程, 如果用的是autoreverse,username会先显示出来, 然后在出来的基础上在回去,这样一直重复
Animation easing
.curveLinear 这个选项在动画中没有加速也没有减速
.curveEaseIn 这个选项会在动画开始的时候进行加速
.cureEaseOut 在动画结束的时候进行减速
.curveEaseInOut 在动画开始的时候进行加速, 在结束的时候进行减速
注意:
刚开始的时候如果把对view的处理 改变frame这些的处理 写在viewDidLoad里面, 是不会显示出来的,因为这个时候视图还没有加载完成, 所以应该把这些改变frame的这些放在viewDidAppear这个方法中 原因如下
在 ios 中 函数调用方法顺序如下
init -初始化程序
viewDidLoad-加载视图
viewWillAppear-UIViewController对象的视图即将加入窗口时调用
viewDidAppear-UIViewController对象的视图已经加入到窗口时调用
viewWillDidAppear-UIViewController对象的视图即将消失, 被覆盖或者是隐藏时调用
viewDidDisappear-UIViewController对象的视图已经消失, 被覆盖或是隐藏时调用
didReceiveMemoryWarning-内存不足的时候调用这个
登录按钮弹簧效果方法如下
animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)
.usingSpringWithDamping:这个参数的取值为0.0-1.0 来创造一个阻尼动画, 越接近与0, 越灵活
弹簧的这个效果会影响动画的属性, 在这个例子中, 仔细观察, 他会影响垂直位置和透明度 .
弹簧效果还有
CASpringAnimation
用法和参数的意义如下
//spring弹簧效果
/*
*mass 质量, 影响图层运动时的弹簧惯性, 质量越大, 弹簧拉伸和压缩的幅度越大
动画的速度变慢, 并且波动幅度变大
stiffness 刚度系数 刚度系数越大, 形变产生的力就越大, 运动越快
damping 阻尼系数, 阻止弹簧伸缩的系数, 阻尼系数越大, 停止越快
initialVelocity: 初始速率, 动画视图的初始速度大小, 速率为正数时, 速度方向与运动方向一致, 速率为负数时, 速度方向与运动防线反向
settingDuration: 结算时间 返回弹簧动画到停止时的估算时间, 根据当前的动画参数估算, 通常弹簧的动画时间使用结算时间比较准确
*/
label.frame = CGRect(x: 200, y: 100, width: 100, height: 40)
label.backgroundColor = UIColor.cyan
let spring = CASpringAnimation(keyPath: "position.x")
spring.damping = 5
spring.stiffness = 100
spring.mass = 1
spring.initialVelocity = -20
spring.fromValue = label.layer.position.x
spring.toValue = label.layer.position.x + 50
spring.duration = spring.settlingDuration
label.layer.add(spring, forKey: spring.keyPath)
view.addSubview(label)
Transitions
使用transitions动画的情景如下
1.add a new view
2.removing a view
UIView.transition(with: animationContainerView,
duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
animations: {
self.animationContainerView.addSubview(newView)
},
completion: nil
)
.transitionFlipFromLeft
.transitionFlipFromRight
.transitionCurlUp
.transitionCurlDown
.transitionCrossDissolve
.transitionFlipFromTop
.transitionFlipFromBottom
3.hiding/showing a view
4.replacing a view with another view
代码地址如下https://github.com/lzs2000/SectionOne_Animatable-properties