圆圈loader的动画

圆圈loader的动画

by 伍雪颖

github代码

- (void)awakeFromNib {

[self
setup];

[self
startAnimation];

}

- (void)setup {

self.backgroundColor
= [UIColor
clearColor];

self.backgroundLayer
= [CAShapeLayer
layer];

_backgroundLayer.strokeColor
= [UIColor
colorWithRed:0.129
green:0.455
blue:0.627
alpha:1.0].CGColor;

_backgroundLayer.fillColor
=
self.backgroundColor.CGColor;

_backgroundLayer.lineCap
=
kCALineCapRound;

_backgroundLayer.lineWidth
=
1;

[self.layer
addSublayer:_backgroundLayer];

}

- (void)startAnimation {

CGFloat
startAngle = - ((float)M_PI
/
2);

CGFloat
endAngle = (1.8f
* (float)M_PI) + startAngle;

UIBezierPath
*processBackgroundPath = [UIBezierPath
bezierPath];

processBackgroundPath.lineWidth
=
1;

[processBackgroundPath
addArcWithCenter:CGPointMake(self.bounds.size.width/2,
self.bounds.size.height/2)

radius:(self.bounds.size.width
-
1)/2

startAngle:startAngle

endAngle:endAngle

clockwise:YES];

_backgroundLayer.path
= processBackgroundPath.CGPath;

CABasicAnimation
*rotationAnimation = [CABasicAnimation
animationWithKeyPath:@"transform.rotation.z"];

rotationAnimation.toValue
= [NSNumber
numberWithFloat:M_PI
*
2.0];

rotationAnimation.duration
=
1;

rotationAnimation.cumulative
=
YES;

rotationAnimation.repeatCount
=
HUGE_VALF;

[_backgroundLayer
addAnimation:rotationAnimation
forKey:@"rotationAnimation"];

}

- (void)drawRect:(CGRect)rect {

_backgroundLayer.frame
=
self.bounds;

}

时间: 2024-10-28 13:07:21

圆圈loader的动画的相关文章

基于jQuery的时间轴鼠标悬停动画插件

之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比如鼠标划过时圆圈的展开动画. 在线预览   源码下载 实现的代码. html代码: <div class="clearfix course_nr"> <ul class="course_nr2"> <li>1993 <div c

Android例子源码模仿安卓微信、云播雷达扫描动画效果

本项目是一个模仿Android微信.云播雷达扫描动画效果的小例子,点击中间的黑色圆圈开始扫描动画,再次点击复位,需要这种效果的朋友可以自己下载看一下,因为是动画效果所以截的静态图有点变形,项目编译版本4.4.2默认编码GBK 源码包下载地址以及运行截图. [点击这里]

一种加载动画的实现

记得看过上面的一个动画设计,就试着实现了一下,首先是可以看到这个动画由两部分组成,一个圆圈的顺时针转动,另一个是圆点的直线运动,圆点之间有时间差,两种运动叠加就形成了这种滚动的效果. 图一.图二.图三 上面图一显示了只有圆圈旋转的状态,图二是只有圆点直线运动的状态,图三是图二中各个圆点添加时间差后的效果. 实现 绘制点 这里一共有15个圆点,相位偏差是360/15=24? for (int i = 0; i < POINT_NUM; ++i) { float x = mRadius * -(fl

chrome开发工具指南(七)

检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过更改动画时间.延迟.持续时间或关键帧偏移修改动画. 概览 Chrome DevTools 动画检查器有两个主要用途. 检查动画.您希望慢速播放.重播或检查动画组的源代码. 修改动画.您希望修改动画组的时间.延迟.持续时间或关键帧偏移. 当前不支持编辑贝塞尔曲线和关键帧. 动画检查器支持 CSS 动画

GitHub上史上最全的iOS开源项目分类汇总

学了这么久,还是抽时间把github上比较好用的第三方总结了一下: Category/Util sstoolkit 一套Category类型的库,附带很多自定义控件 功能不错-       BFKit 又一套Category类型的 Kit,还有几个工具类       APUtils 又一套Category类型的 Kit       QSKit 又一套Category类型的 Kit       iOS-Categories 又一套Category类型的 Kit       BlocksKit 将B

32.自己写的一个简单的加载插件

js /* loader.js version:1.0 author:lgw */ (function($) { "use strict"; $.fn.loader = function(options) { return this.each(function(e) { var that = $(this) $.fn.loader.defaultOptions = { isLoading:false, type:"ball-beat", callBack: func

Android SwipeRefreshLayout下拉刷新控件源码简单分析

咱们在做Android APP开发的时候经常碰到有下拉刷新和上拉加载跟多的需求,这篇文章咱们先说说下来刷新,咱们就以google的原生的下拉刷新控件SwipeRefreshLayout来看看大概的实现过程. SwipeRefreshLayout是google自己推出的下拉刷新控件.使用起来也非常的简单,在满足条件的情况下下拉的时候会显示一个圆形的loading的动画效果,然后回调到上层,上层自己做刷新的一系列的处理,处理结束后调用SwipeRefreshLayout的setRefreshing(

CSS3圆圈动画放大缩小循环动画效果

代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3圆圈动画放大缩小循环动画效果</title> <style> .dot { margin:150px auto; width:200px; height

primefaces 查询 点击按钮 加载 动画 ajax loader

只要在/WEB-INF/template.xhtml中body 里面加入: <ui:insert name="status"> <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px"> <f:facet name="start"> <p:graphicImage name="main/ima