1.开篇
动画属性
通过修改对应视图(UIView)的属性,可以实现一些最基础的动画效果.
- 位置和尺寸的修改: bounds frame center transform
- 外观样式的变化: backgroundColor alpha
往往很多复杂的动效就是通过改变这些属性产生,这也是本篇的主要内容.
|
1 2 3 4 5 6 |
// 动画持续时间: 2秒 延迟: 0.2秒 可选参数:空 UIView.animateWithDuration(2, delay: 0.2, options:[], animations: { () -> Void in self.dogImageView.center.x += 200; }, completion: nil) |
普通移动.gif
动画的可选参数
上面代码的可选参数设置为空,实际上我们可以设置一些参数.
1.来回移动
|
1 2 3 4 5 6 |
//可选参数:无线重复, 来回移动 UIView.animateWithDuration(2, delay: 0.2, options:[.Repeat, .Autoreverse], animations: { () -> Void in self.dogImageView.center.x += 200; }, completion: nil) |
来回移动.gif
2.加速减速效果
在现实生活中,往往也会有一个加速减速的过程,我们这边也可以实现
|
1 2 3 4 5 6 |
// 可选参数:无限重复, 来回移动, 缓慢加速缓慢减速 UIView.animateWithDuration(2, delay: 0.2, options:[.Repeat, .Autoreverse, .CurveEaseInOut], animations: { () -> Void in self.dogImageView.center.x += 200; }, completion: nil) |
缓慢加速缓慢减速.gif
当然啦,可选参数还有很多就不一一试了,有兴趣的同学可以尝试一下.
2.弹簧效果
其实弹簧效果就类似于惯性.
|
1 2 3 4 5 6 7 |
// usingSpringWithDamping 弹性效果0~1之间,值越大弹簧效果越不明显 // initialSpringVelocity 运动的速度 UIView.animateWithDuration(2, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: { () -> Void in self.dogImageView.center.x += 200 }, completion: nil) |
弹簧效果.gif
3.过渡效果
看完了几个简单的位移效果,我们再来看看视图的切换效果.如果想为添加或者移除视图这个动作添加特效,那么我们可以这样做.
1.添加视图
|
1 2 3 4 5 |
// contentView 执行动画效果的视图 // TransitionCurlUp 翻页效果 UIView.transitionWithView(contentView, duration: 2, options:[.TransitionCurlUp], animations: { () -> Void in self.contentView.addSubview(self.dogImageView) }, completion: nil) |
过渡效果.gif
2.移除视图,隐藏视图
通过上面这个方法我们还可以做到移除视图,隐藏视图
3.替换视图
如果需要将一个视图替换成另一个视图,那么可以这样做
|
1 |
的动画效果.
往往很多复杂的动效就是通过改变这些属性产生,这也是本篇的主要内容.
普通移动.gif
动画的可选参数上面代码的可选参数设置为空,实际上我们可以设置一些参数. 1.来回移动
来回移动.gif
2.加速减速效果在现实生活中,往往也会有一个加速减速的过程,我们这边也可以实现
缓慢加速缓慢减速.gif
当然啦,可选参数还有很多就不一一试了,有兴趣的同学可以尝试一下. 2.弹簧效果其实弹簧效果就类似于惯性.
弹簧效果.gif
3.过渡效果看完了几个简单的位移效果,我们再来看看视图的切换效果.如果想为添加或者移除视图这个动作添加特效,那么我们可以这样做. 1.添加视图
过渡效果.gif
2.移除视图,隐藏视图通过上面这个方法我们还可以做到移除视图,隐藏视图 3.替换视图如果需要将一个视图替换成另一个视图,那么可以这样做
|
