swift 动画合集
本例参照objective-c的动画合集进行swift的转换,objective-c地址参照地址https://github.com/yixiangboy/IOSAnimationDemo
1、基础动画
1)位移:
let animation = CABasicAnimation.init(keyPath: "position")
animation.fromValue = NSValue.init(cgPoint: .init(x: centerView.frame.midX, y: centerView.frame.midY))
animation.toValue = NSValue.init(cgPoint: .init(x: centerView.frame.midX, y: 400))
animation.duration = 2.0
//所有设置动画属性的代码必须放在视图添加动画的前面 否则动画属性不被执行 不添加任何属性的情况下默认回到原位
animation.fillMode = kCAFillModeForwards //动画执行完毕会停留在动画结束的位置
animation.isRemovedOnCompletion = false //设置动画结束不被移除
animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn) //动画执行的间奏
centerView.layer .add(animation, forKey: "positionAnimation")
//
2)透明度:
//透明度 opacity
let animation = CABasicAnimation.init(keyPath: "opacity")
animation.toValue = NSNumber.init(value: 0.2)
animation.duration = 2.0
//下面两个属性需要同时存在才会保持动画结束时候的状态
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
centerView.layer.add(animation, forKey: "opacity")
3)形变:
//缩放动画
let animation = CABasicAnimation.init(keyPath: "transform.scale")
animation.toValue = NSNumber.init(value: 2.0)
animation.duration = 1.0
//保持动画结束时候的状态
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
centerView.layer.add(animation, forKey: "scale")
//transform.scale.x 表示x轴形变 .y表示y轴形变 bounds表示自定义形变
4)旋转:
//旋转动画
let animation = CABasicAnimation.init(keyPath: "transform.rotation.z")
animation.toValue = NSNumber.init(value: M_PI_2) //旋转180度
animation.duration = 2
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
centerView.layer.add(animation, forKey: "rotation")
//3D旋转
let animation3D = CABasicAnimation.init(keyPath: "transform")
animation3D.toValue = NSValue.init(caTransform3D: CATransform3DMakeRotation(CGFloat(M_PI_2), 0, 10, 50))
animation3D.fillMode = kCAFillModeForwards
animation3D.isRemovedOnCompletion = false
centerView.layer.add(animation3D, forKey: "rotation")
5)背景色变化:
//背景色变化动画
let animation = CABasicAnimation.init(keyPath: "backgroundColor")
animation.toValue = UIColor.red.cgColor //此处一定要用CGColor
animation.duration = 2.0
centerView.layer.add(animation, forKey: "backgroundColor")
2、关键帧动画
CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。
重要属性
values : 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path : 可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略。
keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。
事实上,基础动画可以看作只有两个关键帧的关键帧动画
1)关键帧动画:
// 关键帧动画
let animation = CAKeyframeAnimation.init(keyPath: "position")
let value1 = NSValue.init(cgPoint: .init(x: 100, y: 100))
let value2 = NSValue.init(cgPoint: .init(x: 40, y: 40))
let value3 = NSValue.init(cgPoint: .init(x: 60, y: 60))
let value4 = NSValue.init(cgPoint: .init(x: 100, y: 100))
animation.values = [value1,value2,value3,value4]
animation.duration = 3.0
// animation.delegate = self 设置代理可以方便在动画开始和结束的时候进行代码操作
centerView.layer.add(animation, forKey: "keyFrame")
2)path动画:
// path动画
let animation = CAKeyframeAnimation.init(keyPath: "position")
//创建一个圆形路径
animation.path = CGPath(ellipseIn: .init(x: 100, y: 400, width: 200, height: 200),transform: nil) animation.duration = 2.0
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
centerView.layer.add(animation, forKey: "path")
3)抖动效果:
// 抖动效果 连续旋转不同的角度
let animation = CAKeyframeAnimation.init(keyPath: "transform.rotation")
let value1 = NSNumber.init(value: -M_PI/180*10)
let value2 = NSNumber.init(value: M_PI/180*10)
let value3 = NSNumber.init(value: -M_PI/180*10)
animation.values = [value1,value2,value3]
animation.repeatCount = 3
centerView.layer.add(animation, forKey: "抖动效果")
3、组动画:
1)同时执行的组动画
// 组动画 //将不同的动画效果添加到组动画数组中,动画在执行的过程中同时执行 //或者将多个不同的animation分个添加到layer,也有组动画的效果
let groupAnimation = CAAnimationGroup.init()
groupAnimation.animations = [animation,animation1] //将不同的动画效果添加到组动画数组中,动画在执行的过程中同时执行
groupAnimation.duration = 4.0
centerView.layer.add(groupAnimation, forKey: "组动画")
2)按顺序执行的组动画
// path动画
let animation1 = CAKeyframeAnimation.init(keyPath: "position")
//创建一个圆形路径
animation1.path = CGPath(ellipseIn: .init(x: 100, y: 400, width: 200, height: 200),transform: nil) animation1.duration = 2.0
//设置动画开始的时间
let time:CFTimeInterval = centerView.layer.convertTime(CACurrentMediaTime(),from:nil)
animation1.beginTime = time
animation1.fillMode = kCAFillModeForwards
animation1.isRemovedOnCompletion = false
centerView.layer.add(animation1, forKey: "path") // 抖动效果 连续旋转不同的角度
let animation = CAKeyframeAnimation.init(keyPath: "transform.rotation")
let value1 = NSNumber.init(value: -M_PI/180*10)
let value2 = NSNumber.init(value: M_PI/180*10)
let value3 = NSNumber.init(value: -M_PI/180*10)
animation.values = [value1,value2,value3]
animation.repeatCount = 3
//较上一个动画延迟一秒执行
animation.beginTime = time + 1.0
centerView.layer.add(animation, forKey: "抖动效果")
4、过渡动画
重要属性
type:动画过渡类型
Apple 官方的SDK其实只提供了四种过渡效果。
- kCATransitionFade 渐变效果
- kCATransitionMoveIn 进入覆盖效果
- kCATransitionPush 推出效果
- kCATransitionReveal 揭露离开效果
私有API提供了其他很多非常炫的过渡动画,比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。 私有API不建议使用,这是苹果人家吃饭的家伙
subtype:动画过渡方向
- kCATransitionFromRight 从右侧进入
- kCATransitionFromLeft 从左侧进入
- kCATransitionFromTop 从顶部进入
- kCATransitionFromBottom 从底部进入
startProgress:动画起点(在整体动画的百分比)
endProgress:动画终点(在整体动画的百分比)
1)逐渐消失
// 逐渐消失 原视图的背景颜色逐渐消失变为红色
centerView.backgroundColor = UIColor.red
let animation = CATransition.init()
animation.type = kCATransitionFade
animation.subtype = kCATransitionFromRight
animation.duration = 2.0
centerView.layer.add(animation, forKey: "逐渐消失")
2)进入覆盖效果
//进入覆盖效果 一张红色的视图从顶部逐渐出现覆盖掉原来的视图
centerView.backgroundColor = UIColor.red
let animation = CATransition.init()
animation.type = kCATransitionMoveIn
animation.subtype = kCATransitionFromTop
animation.duration = 2.0
centerView.layer.add(animation, forKey: "进入覆盖效果")
3)推出效果
// 推出效果
centerView.backgroundColor = UIColor.red
let animation = CATransition.init()
animation.type = kCATransitionPush
animation.subtype = kCATransitionFromTop
animation.duration = 2.0
centerView.layer.add(animation, forKey: "推出效果")
4)揭露离开效果
centerView.backgroundColor = UIColor.red
let animation = CATransition.init()
animation.type = kCATransitionReveal
animation.subtype = kCATransitionFromTop
animation.duration = 2.0
centerView.layer.add(animation, forKey: "推出效果")
5)其他牛的像逼一样的特效自己去试一下,但是不建议在项目中使用,原因你懂得。把type替换成你想要的模式就行了,为了格式我还是放一串代码吧5哈哈
centerView.backgroundColor = UIColor.red
let animation = CATransition.init()
animation.type = "cube"
animation.subtype = kCATransitionFromTop
animation.duration = 2.0
centerView.layer.add(animation, forKey: "推出效果")
有时间了会把objective-c中的实例也用swift改写了
swift 动画合集的更多相关文章
- 最新最全的 Android 开源项目合集
原文链接:https://github.com/opendigg/awesome-github-android-ui 在 Github 上做了一个很新的 Android 开发相关开源项目汇总,涉及到 ...
- iOS酷炫动画效果合集
iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...
- Android 自定义View合集
自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...
- Python之路【第二十四篇】:Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...
- react-native 入门资源合集
# 了解react-native React Native enables you to build world-class application experiences on native pla ...
- 【转】Ubuntu常用软件合集
[转]Ubuntu常用软件合集 Ubuntu常用软件合集 我用的使Ubuntu-Kylin14.04,原因呢主要是觉得使本土化的,自带了日历.输入法.优客助手等易于上手的应用.也省的每次安装完原生的系 ...
- 直接拿来用!Facebook移动开源项目大合集
直接拿来用!Facebook移动开源项目大合集 时间:2014-04-22 15:37 作者:唐小引 随着iOS依赖管理工具CocoaPods和大量第三方开源库成熟起来,业界积累了大量的优秀开源项目. ...
- Web测试到底是在测什么(资料合集)
开始今晚的主题之前 先来看一张图, 这是老徐16年10月份,线上Web主题分享时整理的大纲 图片略模糊 看得清就好 Web测试, 进行抽离拆分,基本上就如上一些内容. 不管是测什么系统,什么功能,基本 ...
- dotnet 从入门到放弃的 500 篇文章合集
本文是记录我从入门到放弃写的博客 博客包括 C#.WPF.UWP.dotnet core .git 和 VisualStudio 和一些算法,所有博客使用 docx 保存 下载:dotnet 从入门到 ...
随机推荐
- TimeStamp
private void Form1_Load(object sender, EventArgs e) { textBox1.Text= GenerateTimeStamp(System.DateTi ...
- 表单和 HTML 辅助方法– ASP.NET MVC 4 系列
这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...
- 视图(View) – ASP.NET MVC 4 系列
精心编写的整洁代码是开发一个可维护 Web 应用程序的基础.但用户在浏览器中访问时,这些工作他们是看不见的.用户对应用程序的第一印象,以及与应用程序的整个交互过程都是从视图开始的. ...
- C# 多线程详解 Part.02(UI 线程和子线程的互动、ProgressBar 的异步调用)
我们先来看一段运行时会抛出 InvalidOperationException 异常的代码段: private void btnThreadA_Click(object sender, ...
- 10天学会phpWeChat——第四天:大U函数U()的使用
在第三天,我们创建了一个"增强版"的文章模块,实现了数据从数据库到视图端展示的流程.但是我们仅仅是实现了数据列表的展示,对于文章详情等页面跳转并未涉及. 本文重点讲解phpWeCh ...
- iOS NSTimer使用详解 开启、关闭、移除
定时器定时器详解ios定时器关闭定时器NSTimer 一,要使用一个定时器首先要定义一个定时器: @property (strong, nonatomic) NSTimer *myTimer;//定时 ...
- 转义字符(\)对JavaScript中JSON.parse的影响概述
JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象,本文为大家介绍下转义字符对JSON.p ...
- C#调试心经续(转)
断点篇 命中次数(Hit Counts) 右击断点,可以设置Hit Counts(命中次数),会弹出如下的对话框 当条件满足的时候断点会被命中(即即将被执行),这个命中次数是断点被命中的次数.默认是始 ...
- jersy服务,将图片发送另个服务器,再将异步返回
今天在学习新项目时,遇到了jersy服务,完成,将图片发送到另一台服务器.下面介绍一下jersy服务的一个简单例子. 1.建立一个jersy一个java项目,先导入jersy服务相应的jar包 com ...
- ubuntu死机怎么办
在使用ubuntu的时候由于各种复杂的因素,如软件不兼容,误操作等问题导致"死机"怎么办呢?下面我们来看看如何解决这问题... 可以打开终端模拟器 1 ctrl+alt+t ...