SectionOne iOS_Animations_by_Tutorials

来源：互联网发布：淘宝主店分店编辑：程序博客网时间：2024/05/20 22:35

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, 越灵活

.initialSpringVelocity:控制动画的初始速度, 值为1的动画就是在动画中有一秒的跨度, 更大更小都会使速度变得更快或者更慢

弹簧的这个效果会影响动画的属性, 在这个例子中, 仔细观察, 他会影响垂直位置和透明度 .

弹簧效果还有

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

阅读全文

1 0