iOS 动画的入门实现
2017-03-04 本文已影响952人
大脸猫121
一、为什么要使用动画
用过iOS6的小伙伴们应该会知道，从iOS 6到iOS 7出现了一个很大的改变，那就是扁平化的设计。那可能大家会问，什么是扁平化的设计呢？为此，猫咪也查了一下资料，把它的优点总结为一句话：”能够适应技术的发展，并且最大限度的呈现内容本身，而不是展示无用的装饰。“ 而且对于苹果而言，扁平化的设计能够适应多屏幕的设计，既方便开发者使用，又提高用户的体验。
二、动画的原理
大家可以参考文章：动画的12个原则
三、UIView动画
UIView
通过这张图我们可以看到，基本上所有的控件都是继承与UIView的。苹果也给我们提供了动画接口：UIView.animateWithDuration
四、简单动画的实现
首先，建一个tableView，实现如下效果：
第一步
1.Position -- 简单的位置移动
简单的位置移动.gif
这是一个简单的动画效果，实现也很简单，看代码：
OC :
[UIView animateWithDuration:1 animations:^{
view1.center = CGPointMake(SCREEN_WIDTH-55, 150);
}];
Swift :
UIView.animate(withDuration: 1) {
self.view1.center.x = SCREEN_WIDTH - self.view1.center.x
}
那初学动画的小伙伴可能会问，一个页面有多个view，我想让它们都动起来，怎么办呢？
先来看看效果，是不是你想要的：
简单的位置移动.gif
先来看看实现方法吧：
OC :
[UIView animateWithDuration:1 animations:^{
view1.center = CGPointMake(SCREEN_WIDTH-55, 150);
view2.center = CGPointMake(170, SCREEN_HEIGHT-55);
view3.center = CGPointMake(220, 500);
}];
Swift :
UIView.animate(withDuration: 1) {
self.view1.center.x = SCREEN_WIDTH - self.view1.center.x
self.view2.center.y = SCREEN_HEIGHT - self.view2.center.y
self.view3.center.x = SCREEN_WIDTH - self.view3.center.x
self.view3.center.y = SCREEN_HEIGHT - self.view3.center.y
}
大家是不是发现了，实现方法和一个view是一样，其实呀，在这个动画方法中三个动画是同时执行的，也就是我们看到的效果。
那有的小伙伴说，我想先让第一个动，再让其他的动，我们来看一下效果：
简单的位置移动.gif
OC ：
//执行时间是同时执行的
[UIView animateWithDuration:1 animations:^{
view1.center = CGPointMake(SCREEN_WIDTH-55, 150);
}];
//延时0.5s
[UIView animateWithDuration:1 delay:0.5 options:0 animations:^{
view2.center = CGPointMake(170, SCREEN_HEIGHT-55);
} completion:nil];
[UIView animateWithDuration:1 delay:1 options:0 animations:^{
view3.center = CGPointMake(220, 500);
} completion:nil];
Swift :
UIView.animate(withDuration: 1) {
self.view1.center.x = SCREEN_WIDTH - self.view1.center.x
}
UIView.animate(withDuration: 1, delay: 0.5, options: .curveEaseIn, animations: {
self.view2.center.y = SCREEN_HEIGHT - self.view2.center.y
}, completion: nil)
UIView.animate(withDuration: 1, delay: 1, options: .curveLinear, animations: {
self.view3.center.x = SCREEN_WIDTH - self.view3.center.x
self.view3.center.y = SCREEN_HEIGHT - self.view3.center.y
}, completion: nil)
这里出现了一个新的方法，就是
UIView.animate(withDuration: <#T##TimeInterval#>, delay: <#T##TimeInterval#>, options: <#T##UIViewAnimationOptions#>, animations: <#T##() -> Void#>, completion: <#T##((Bool) -> Void)?##((Bool) -> Void)?##(Bool) -> Void#>)
先来解释一下各个参数的含义：
Duration ：动画执行的时长
delay ：延时时长，即上一个动画执行完以后多久再执行下一个动画
options ：一些样式的选取
animations：我们想要实现的动画效果
completion：动画执行完我们还想做的事情
关于options我在这里列举一些：
1.常规动画属性设置
UIViewAnimationOptionLayoutSubviews // 动画过程中保证子视图跟随运动
UIViewAnimationOptionAllowUserInteraction // 动画过程中允许用户交互
UIViewAnimationOptionBeginFromCurrentState // 所有视图从当前状态开始运行
UIViewAnimationOptionRepeat // 重复运行动画
UIViewAnimationOptionAutoreverse // 动画运行到结束点后仍然以动画方式回到初始点
UIViewAnimationOptionOverrideInheritedDuration // 忽略嵌套动画时间设置
UIViewAnimationOptionOverrideInheritedCurve // 忽略嵌套动画速度设置
UIViewAnimationOptionAllowAnimatedContent // 动画过程中重绘视图（注意仅仅适用于转场动画）
UIViewAnimationOptionShowHideTransitionViews // 视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置或动画类型
2.动画速度控制
UIViewAnimationOptionCurveEaseInOut // 动画先缓慢，然后逐渐加速
UIViewAnimationOptionCurveEaseIn // 动画逐渐变慢
UIViewAnimationOptionCurveEaseOut // 动画逐渐加速
UIViewAnimationOptionCurveLinear // 动画匀速执行，默认值
3.转场类型（仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）
UIViewAnimationOptionTransitionNone // 没有转场动画效果
UIViewAnimationOptionTransitionFlipFromLeft // 从左侧翻转效果
UIViewAnimationOptionTransitionFlipFromRight // 从右侧翻转效果
UIViewAnimationOptionTransitionCurlUp // 向后翻页的动画过渡效果
UIViewAnimationOptionTransitionCurlDown // 向前翻页的动画过渡效果
UIViewAnimationOptionTransitionCrossDissolve // 旧视图溶解消失显示下一个新视图的效果
UIViewAnimationOptionTransitionFlipFromTop // 从上方翻转效果
UIViewAnimationOptionTransitionFlipFromBottom // 从底部翻转效果
2、Opacity -- 设置透明度
OC :
[UIView animateWithDuration:2 animations:^{
view1.alpha = 0.1;
}];
Swift :
UIView.animate(withDuration: 1) {
self.view1.alpha = 0.1
}
效果图如下：
透明度的设置.gif
3.Scale -- 放大缩小
OC :
[UIView animateWithDuration:2 animations:^{
view1.transform = CGAffineTransformMakeScale(2, 2);
}];
[UIView animateWithDuration:2 delay:1 options:0 animations:^{
view1.transform = CGAffineTransformMakeScale(0.3, 0.3);
} completion:nil];
Swift ：
UIView.animate(withDuration: 1) {
self.view1.transform = CGAffineTransform(scaleX: 2, y: 2)
}
UIView.animate(withDuration: 1, delay: 1, options: .curveLinear, animations: {
self.view1.transform = CGAffineTransform(scaleX: 0.3, y: 0.3)
}, completion: nil)
放大缩小.gif
4.Color -- 颜色渐变
OC :
[UIView animateWithDuration:1 animations:^{
view1.backgroundColor = [UIColor orangeColor];
}];
Swift ：
UIView.animate(withDuration: 1) {
self.view1.backgroundColor = UIColor.orange
}
效果图如下：
颜色渐变.gif
5.Rotation -- 旋转
OC :
[UIView animateWithDuration:1 animations:^{
imageV.transform = CGAffineTransformMakeRotation(M_PI);
}];
Swift ：
UIView.animate(withDuration: 1) {
self.view1.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI))
}
效果图如下：
旋转.gif
我们发现怎么才转了一半，设置成360度试试：
旋转.gif
咦怎么不转呢，原来呀，是因为苹果自己检测到转一圈就是没有改变的，所以呢，索性就不动了（好懒啊~~）
那我们怎么让它动起来呢，还记得猫咪前面说的delay的那个方法不？最后一个参数就是动画执行完要做的事情，好，我们试试。
OC :
- (void)spin {
[UIView animateWithDuration:1 animations:^{
imageV.transform = CGAffineTransformMakeRotation(M_PI);
}];
[UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
imageV.transform = CGAffineTransformRotate(imageV.transform, M_PI);
} completion:^(BOOL finished) {
[self spin];//循环执行
}];
}
Swift:
func spin() {
UIView.animate(withDuration: 1) {
self.view1.transform = CGAffineTransform(rotationAngle: CGFloat(2*M_PI))
}
UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
self.view1.transform = CGAffineTransform(rotationAngle: CGFloat(2*M_PI))
}) { (finished) in
self.spin()
}
}
我们看一下效果：
旋转.gif
实现的原理呢，很简单，就是不断地循环这个转半圈的动作。
