太阳升起并下落的小动画-SWIFT
一个小小的动画,太阳公公上山又下山。先上效果图。
用 lipecap 录的gif效果有点卡顿。好吧,说下如何实现的。
首先在一个大圆内先计算出内切九边形各个顶点的位置,接着连接相应的顶点变成一个九角星太阳的九条光芒,然后在九角星的中心画一个圈形的Layer,这样就大致画好了大阳的形状。
新建一个叫SunView的文件继承自UIView,然后在init方法内添加一个addSunLayer()的方法。并在里面添加以下方内容
class SunView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
addSunLayer()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
在addSunLayer()方法内添加绘制九角星的代码:
let ninePolyganPath:UIBezierPath = UIBezierPath()
//大圆的半径
let radius:CGFloat = self.frame.size.width / 2
//九角星各个顶点的位置
var anglePoints:Dictionary<String,CGPoint> = Dictionary<String,CGPoint>()
//第一个顶点的位置,最右边中间那个点
let firstPoint:CGPoint = CGPoint(x: bounds.width, y: bounds.width / 2)
anglePoints["0"] = firstPoint
ninePolyganPath.moveToPoint(firstPoint) for i in 1..<9 {
//将圆分成9份,每一份的大小为40度
let angle = Double(i) * 40.0
//算出相应角度的三角函数值
let rateSin:CGFloat = sin(CGFloat(angle / 180 * M_PI))
let rateCos:CGFloat = cos(CGFloat(angle / 180 * M_PI))
let x:CGFloat = radius * rateCos + radius
let y:CGFloat = radius * rateSin + radius
anglePoints[String(i)] = CGPoint(x: x, y: y)
}
//连接相应的九个点,使之成为九角星
ninePolyganPath.addLineToPoint(anglePoints["4"]!)
ninePolyganPath.addLineToPoint(anglePoints["8"]!)
ninePolyganPath.addLineToPoint(anglePoints["3"]!) ninePolyganPath.addLineToPoint(anglePoints["7"]!) ninePolyganPath.addLineToPoint(anglePoints["2"]!)
ninePolyganPath.addLineToPoint(anglePoints["6"]!)
ninePolyganPath.addLineToPoint(anglePoints["1"]!)
ninePolyganPath.addLineToPoint(anglePoints["5"]!)
ninePolyganPath.closePath() let ninePolyganLayer:CAShapeLayer = CAShapeLayer()
ninePolyganLayer.fillColor = UIColor.yellowColor().CGColor
ninePolyganLayer.strokeColor = UIColor.yellowColor().CGColor
ninePolyganLayer.lineWidth = 5
ninePolyganLayer.path = ninePolyganPath.CGPath
self.layer.addSublayer(ninePolyganLayer)
在ViewContoller文件内添加以下代码:
let sunView = SunView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
self.view.addSubview(sunView)
此时九角星就做好了,运行的效果如下:
接着要在九角星的中星心位置添加一个圆,做为太阳中心。添加一个计算属性,一个钜形的内切圆路径。
var sunCirclePath:UIBezierPath {
return UIBezierPath(ovalInRect: CGRect(x: self.frame.size.width * 0.3 / 2, y: self.frame.size.height * 0.3 / 2, width: self.frame.size.width - self.frame.size.width * 0.3, height: self.frame.size.height - self.frame.size.height * 0.3))
}
接着在addSunLayer方法内添加以下内容:
let sunLayer:CAShapeLayer = CAShapeLayer()
sunLayer.path = sunCirclePath.CGPath
sunLayer.lineWidth = 5
sunLayer.fillColor = UIColor.yellowColor().CGColor
sunLayer.strokeColor = UIColor.colorWithHexString("#eecc00").CGColor
self.layer.addSublayer(sunLayer) //让太阳转动起来
let animation:CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation")
animation.fromValue = 0.0
animation.toValue = 2 * M_PI
animation.duration = 5
animation.repeatCount = HUGE
layer.addAnimation(animation, forKey: nil)
并将上面ninePolyganLayer添加到图层的代码做如下修改。
self.layer.insertSublayer(ninePolyganLayer, below: sunLayer)
//self.layer.addSublayer(ninePolyganLayer)
此时运行效果如下:
最后就是让sunView按着指定的路径运行就可以了。回到ViewController文件内,添加以下计算路径属性,画出一条弧形路径,然后让太阳按着这个路径移动。
var sunrisePath:UIBezierPath {
let path:UIBezierPath = UIBezierPath()
path.moveToPoint(CGPoint(x: 0, y: 160))
path.addQuadCurveToPoint(CGPoint(x: self.view.frame.size.width, y: 160), controlPoint: CGPoint(x: self.view.frame.size.width / 2, y: 60))
//path.closePath() //这个不能用,
return path
}
添加以下动画代码
let sunriseAnimation:CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
sunriseAnimation.path = sunrisePath.CGPath
sunriseAnimation.duration = 3
sunriseAnimation.calculationMode = kCAAnimationPaced
sunriseAnimation.fillMode = kCAFillModeForwards
sunriseAnimation.repeatCount = HUGE
sunriseAnimation.removedOnCompletion = false
sunView.layer.addAnimation(sunriseAnimation, forKey: nil)
这样就完成了。以上仅供参考,还请大家多提意见。
太阳升起并下落的小动画-SWIFT的更多相关文章
- CSS3-实现单选框radio的小动画
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...
- TabbarItem超炫小动画
本文转载自 不灭的小灯灯 的博客 Tabbar点击时候超炫小动画 感谢这位大神的分享! 对UITabBarController上TabBar按钮动画详细介绍-->>保证你有意外收获,如有 ...
- 如何制作网页小动画?——gif or png
一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...
- 利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...
- Canvas 图片绕边旋转的小动画
/** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getElementById("demo10") ...
- 利用@keyframe及animation做一个页面Loading时的小动画
前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1 @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
- jquery实现一些小动画一
jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3——制作人物走路的小动画
一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...
随机推荐
- python基础整理笔记(一)
一. 编码 1. 在python2里,加载py文件会对字符进行编码,需要在文件头上的注释里注明编码类型(不加则默认是ascII). # -*- coding: utf-8 -*- print 'hel ...
- (转)对.net系统架构改造的一点经验和教训
在互联网行业,基于Unix/Linux的网站系统架构毫无疑问是当今主流的架构解决方案,这不仅仅是因为Linux本身足够的开放性,更因为围绕传统Unix/Linux社区有大量的成熟开源解决方案,覆盖了网 ...
- 在Android中开源类库使用过程中兼容性等问题的讨论
1.在Android4.0环境下编译的actionbarsherlock.slidingmenu类库,能不能在4.0以下的版本中使用 相信很多人跟我一样,都以为在低版本(如Android2.1或2.3 ...
- Backbone入门——开发第一个Backbone页面
1. 功能描述在新建的html页面中,通过导入的backbone文件搭建一个简单的mvc结构.当用户进入该页时,id号为“divTip”的<div>元素中将显示“hello,backbon ...
- 【Android】Eclipse Memory Analyzer 进行堆内存溢出分析
MAT 不是一个万能工具,它并不能处理所有类型的堆存储文件. 不同厂家的 JVM 所生成的堆转储文件在数据存储格式以及数据存储内容上有很多区别,但是比较主流的厂家和格式,例如 Sun, HP, ...
- atitit. 集合groupby 的实现(2)---自定义linq查询--java .net php
atitit. 集合groupby 的实现(2)---自定义linq查询--java .net php 实现方式有如下 1. Linq的实现原理流程(ati总结) 1 2. groupby 与 事 ...
- javaweb学习总结(十)——HttpServletRequest对象(一)
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
- sqlserver卡号段分组
之前给上海一家电子商务公司做一个卖卡系统,遇到了卡号段分组的问题.刚开始没什么好的实现方法,遂在博客园求助但未果,没法自己研究sql,终于搞定. 问题描述: 有个卡库存表,有个卡号字段,假设数据:16 ...
- Azure Stack如何解决混合云的种种挑战
微软希望能够通过Azure Stack来帮助企业连接他们的私有云和公共云.但这仍然是一项进行中的工作. 大多数企业都不愿意将所有IT运营都放到公有云中.相反,他们希望可以灵活的在这两个共享的基础架构即 ...
- Android运行时异常“Binary XML file line # : Error inflating class”
http://blog.csdn.net/huangxiaohu_coder/article/details/8497286 在原生Android下编译APK,编译没有问题,但是在运行的时候经常出现如 ...