1.开篇
动画属性
通过修改对应视图(UIView)的属性,可以实现一些最基础的动画效果.
- 位置和尺寸的修改: bounds frame center transform
- 外观样式的变化: backgroundColor alpha
往往很多复杂的动效就是通过改变这些属性产生,这也是本篇的主要内容.
// 动画持续时间: 2秒 延迟: 0.2秒 可选参数:空
UIView.animateWithDuration(2, delay: 0.2, options:[], animations: { () -> Void in
self.dogImageView.center.x += 200;
}, completion: nil)
普通移动.gif
动画的可选参数
上面代码的可选参数设置为空,实际上我们可以设置一些参数.
1.来回移动
//可选参数:无线重复, 来回移动
UIView.animateWithDuration(2, delay: 0.2, options:[.Repeat, .Autoreverse], animations: { () -> Void in
self.dogImageView.center.x += 200;
}, completion: nil)
来回移动.gif
2.加速减速效果
在现实生活中,往往也会有一个加速减速的过程,我们这边也可以实现
// 可选参数:无限重复, 来回移动, 缓慢加速缓慢减速
UIView.animateWithDuration(2, delay: 0.2, options:[.Repeat, .Autoreverse, .CurveEaseInOut], animations: { () -> Void in
self.dogImageView.center.x += 200;
}, completion: nil)
缓慢加速缓慢减速.gif
当然啦,可选参数还有很多就不一一试了,有兴趣的同学可以尝试一下.
2.弹簧效果
其实弹簧效果就类似于惯性.
// 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.添加视图
// contentView 执行动画效果的视图
// TransitionCurlUp 翻页效果
UIView.transitionWithView(contentView, duration: 2, options:[.TransitionCurlUp], animations: { () -> Void in
self.contentView.addSubview(self.dogImageView)
}, completion: nil)
过渡效果.gif
2.移除视图,隐藏视图
通过上面这个方法我们还可以做到移除视图,隐藏视图
3.替换视图
如果需要将一个视图替换成另一个视图,那么可以这样做
UIView.transitionFromView(dogImageView, toView: SpheniscidaeImageView, duration: 2, options: [.TransitionFlipFromTop], completion: nil)
替换效果.gif
3.动画组
在实际应用中,不可避免的需要将几个动画按照次序进行先后执行.
例如,需要实现这样一个效果,该怎样去实现呢?
可能很多人第一时间就会想到这样做
UIView.animateWithDuration(1, animations: { () -> Void in
// 1.第一步代码
}) { (_) -> Void in
UIView.animateWithDuration(1, animations: { () -> Void in
// 2.第二步代码
}) { (_) -> Void in
UIView.animateWithDuration(1, animations: { () -> Void in
// 3.第三步代码
}) { (_) -> Void in
}
}
}
这样层层嵌套也是可以实现的,但代码的可读性就打了折扣,其实官方有相关的方法给我们使用,可以这样做
// duration 整个动画的时间
UIView.animateKeyframesWithDuration(5, delay: 0.0, options: [.CalculationModeCubic], animations: { () -> Void in
// 1.第一步代码
// frameStartTime 开始时间占总时间的百分比
// relativeDuration 每一个小的动画占总时间的百分比
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25) { () -> Void in
self.planeView.center.y -= 10
self.planeView.center.x += 180
}
// 2.第二步代码
UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4, animations: { () -> Void in
self.planeView.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4)/2)
})
// 3.第三步代码
UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: { () -> Void in
self.planeView.center.x += 180
self.planeView.center.y -= 50
self.planeView.alpha = 0.0
})
// 4.第四步代码
UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.0, animations: { () -> Void in
self.planeView.center.x = -50
})
// 5.第五步代码
UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.1, animations: { () -> Void in
self.planeView.center.y = self.view.center.y
self.planeView.transform = CGAffineTransformIdentity
self.planeView.alpha = 1.0
})
// 6.第六步代码
UIView.addKeyframeWithRelativeStartTime(0.61, relativeDuration: 0.3, animations: { () -> Void in
self.planeView.center.x = 100
})
}, completion: nil)
动画组.gif
本文整理自:iOS.Animations.by.Tutorials.v2.0
如有疑问,欢迎留言 :-D
