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)透明度:
//透明度 opacitylet animation = CABasicAnimation.init(keyPath: "opacity")animation.toValue = NSNumber.init(value: 0.2)animation.duration = 2.0//下面两个属性需要同时存在才会保持动画结束时候的状态animation.fillMode = kCAFillModeForwardsanimation.isRemovedOnCompletion = falsecenterView.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 = kCAFillModeForwardsanimation.isRemovedOnCompletion = falsecenterView.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 = 2animation.fillMode = kCAFillModeForwardsanimation.isRemovedOnCompletion = falsecenterView.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 = kCAFillModeForwardsanimation3D.isRemovedOnCompletion = falsecenterView.layer.add(animation3D, forKey: "rotation")
5)背景色变化:
//背景色变化动画let animation = CABasicAnimation.init(keyPath: "backgroundColor")animation.toValue = UIColor.red.cgColor //此处一定要用CGColoranimation.duration = 2.0centerView.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.0animation.fillMode = kCAFillModeForwardsanimation.isRemovedOnCompletion = falsecenterView.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 = 3centerView.layer.add(animation, forKey: "抖动效果")
3、组动画:
1)同时执行的组动画
// 组动画 //将不同的动画效果添加到组动画数组中,动画在执行的过程中同时执行 //或者将多个不同的animation分个添加到layer,也有组动画的效果let groupAnimation = CAAnimationGroup.init()groupAnimation.animations = [animation,animation1] //将不同的动画效果添加到组动画数组中,动画在执行的过程中同时执行groupAnimation.duration = 4.0centerView.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 = timeanimation1.fillMode = kCAFillModeForwardsanimation1.isRemovedOnCompletion = falsecenterView.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.0centerView.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.redlet animation = CATransition.init()animation.type = kCATransitionFadeanimation.subtype = kCATransitionFromRightanimation.duration = 2.0centerView.layer.add(animation, forKey: "逐渐消失")
2)进入覆盖效果
//进入覆盖效果 一张红色的视图从顶部逐渐出现覆盖掉原来的视图centerView.backgroundColor = UIColor.redlet animation = CATransition.init()animation.type = kCATransitionMoveInanimation.subtype = kCATransitionFromTopanimation.duration = 2.0centerView.layer.add(animation, forKey: "进入覆盖效果")
3)推出效果
// 推出效果centerView.backgroundColor = UIColor.redlet animation = CATransition.init()animation.type = kCATransitionPushanimation.subtype = kCATransitionFromTopanimation.duration = 2.0centerView.layer.add(animation, forKey: "推出效果")
4)揭露离开效果
centerView.backgroundColor = UIColor.redlet animation = CATransition.init()animation.type = kCATransitionRevealanimation.subtype = kCATransitionFromTopanimation.duration = 2.0centerView.layer.add(animation, forKey: "推出效果")
5)其他牛的像逼一样的特效自己去试一下,但是不建议在项目中使用,原因你懂得。把type替换成你想要的模式就行了,为了格式我还是放一串代码吧5哈哈
centerView.backgroundColor = UIColor.redlet animation = CATransition.init()animation.type = "cube"animation.subtype = kCATransitionFromTopanimation.duration = 2.0centerView.layer.add(animation, forKey: "推出效果")
有时间了会把objective-c中的实例也用swift改写了
转载于:https://www.cnblogs.com/lidarui/p/5999279.html
swift 动画合集相关推荐
- 20P37 Premiere预设200种文字标题介绍动画合集包 200 Titles Collection下载
20P37 Premiere预设200种文字标题介绍动画合集包 200 Titles Collection下载 包含内容: – 15个快速标题 – 15个迷你小标题 – 30金色标题 – 30个标注介 ...
- vue 引入canvas_canvas动画合集Vue组件
vue-canvas-effect canvas动画合集Vue组件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effect/i ...
- 一款炫酷的相册动画合集【源码分享】
这是一款炫酷的相册动画合集,集合了粒子.雪花.气泡.蝴蝶心形路径.星星.相册翻页等效果,有需要的可以点击下方名称链接下载. 效果图 炫酷的相册动画合集 整理不易,欢迎大家交流学习.
- Android 之 动画合集之属性动画 -- 又见
本节引言: 上节我们对Android的属性动画进行了初步的学习,相信大家对于属性动画已经不再是 一知半解的状态了,本节我们继续来探究Android属性动画的一些更高级的用法! 1.Evaluator自 ...
- 【小程序动画合集】10种小程序动画效果实现方法,文章太长建议收藏!
前言 一提小程序与动画,首先想到的是什么?嗯,微信小程序独创了一套动画玩法,官方支持3种动画方案,分别是 createAnimation . this.animate 和 CSS3动画 . 1. cr ...
- AndroidViewAnimations:Andorid视图动画合集YOYO
一天我看见一个ios动画效果库 AFViewShaker, 它实现的效果很赞, 我认为Android 也需要一个这样的库,所以过了两天,我就自己创建了这个项目. 使用 为了把效果做的很逼真,我创建 ...
- Android动画合集
Android动画实现绘制原理 http://www.kutear.com/post/android/2016-10-05-android_animation_principle 动画及其他学习博客 ...
- 【HTML】动画合集--跟着pink老师学习
1.奔跑小熊 奔跑小熊 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- 最新最全的 Android 开源项目合集(一)
原文链接:https://github.com/opendigg/awesome-github-android-ui 抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Si ...
最新文章
- 【Python基础】关于日期特征,你想知道操作都在这儿~
- Linkedin Camus的使用
- 阿尔法狗 3 天走完人类千年棋史,被反超的我们该如何绝地求生?34 个开源项目告诉你!
- centos7.4装mysql_CentOS7.4用yum安装并配置MySQL5.7
- 跨栏表格位置跑到了下一页_LaTeX双栏模板插入通栏公式(跨栏插图)
- 邮件服务器向hotmail等邮箱发信收到退信的解决方法
- python读取pdf内容转word_卧槽!Pdf转Word用Python轻松搞定!
- 《Java开发实战经典》习题第3章第12题:使用for循环打印下面的图形(用for循环打印金字塔)
- B-JUI刷新当前标签页的方法
- 通达信板块监控指标_通达信主力监控系统指标公式
- 珍惜生命之水,节约从我做起
- 【联盛德W806上手笔记】四、PWM模块
- 世界主要经济体历年GDP排名一览(前50强)
- Arduino 利用串口缓冲区监听的方式读取数据
- 《小孩-大冰》阅读笔记
- TIA博途SCL编程学习16_歌德巴赫猜想验证
- 新网站如何快速被收录?网站收录如何查询
- 求伯君—— 一个你必须知道的程序员
- java中final是啥意思_(转)深入理解Java中的final关键字
- m1芯片 php,苹果M1 版 MacBook软件兼容实测:VS Code不能用 PHPStorm可运行