(转载自:http://blog.csdn.net/wang631106979/article/details/52473985) 如果移动端访问不佳,可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画,看着挺炫,但是是安卓版的,寻思的着仿造着写一篇iOS版的,下面是我写这个动画的分解~ 老规矩先上图和demo地址: 刚看到这个动画的时候,脑海里出现了两个方案,一种是通过drawRect画出来,然后配合CADisplayLink不停的绘制线的样…

如果移动端访问不佳,可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画,看着挺炫,但是是安卓版的,寻思的着仿造着写一篇iOS版的,下面是我写这个动画的分解~ 老规矩先上图和demo地址: 刚看到这个动画的时候,脑海里出现了两个方案,一种是通过drawRect画出来,然后配合CADisplayLink不停的绘制线的样式:第二种是通过CAShapeLayer配合CAAnimation来实现动画效果.再三考虑觉得使用后者,因为前者需要计算很多,比较复…

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi…

有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div> div { width: 100px; height: 100px; border-radius: 50%; border: 2px solid transparent; border-top: 2px solid #000; border-left: 2px solid #000; animation…

A.基本知识 1.概念 Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>开发步骤:初始化一个动画对象(CAAnimation)并设置一些动画相关属性添加动画对象到层(CALayer)中,开始执行动画CALayer中很多属性都可以通过CAAnimation实现动画效果,包括:opacity.position.tr…

之前接了几个微信里的项目,类似电子邀请函,什么分析报告这样的项目, 对css3动画要求十分高,每个页面客户几乎都有天马行空的想法,或者说设计师有这样的想法.众所周知css3里的keyframe写好了就不能赋值复用的,  所以怎样能把keyframe通用起来就异常关键了.好,下面先上几个之前写的项目:(今天sae挂了 ,只好用别人的生产地址),手机打开或者chrome模拟看哦!http://www.51qianlima.cn/bim/ http://wx.mgcc.com.cn/fotile/in…

之前接了几个微信里的项目,类似电子邀请函,什么分析报告这样的项目, 对css3动画要求十分高,每个页面客户几乎都有天马行空的想法,或者说设计师有这样的想法.众所周知css3里的keyframe写好了就不能赋值复用的,  所以怎样能把keyframe通用起来就异常关键了.好,下面先上几个之前写的项目:(今天sae挂了 ,只好用别人的生产地址),手机打开或者chrome模拟看哦!http://www.51qianlima.cn/bim/ http://wx.mgcc.com.cn/fotile/in…

一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // rect:裁剪图片的尺寸,传递是像素 CGImageRef norImage = CGImageCreateWithImageInRect(norBigImage.CGImage, clipRect); 2.每次点击按钮立马变为选中状态,并且取消上次的按钮的选中状态 只要用个成员变量记录下状态就 ok…

A.基本用法 1.CABasicAnimation // // ViewController.m // CoreAnimationTest // // Created by hellovoidworld on 15/1/14. // Copyright (c) 2015年 hellovoidworld. All rights reserved. // #import "ViewController.h" @interface ViewController () @property(no…

Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h> Core Animation的使用,请参考最下面的博客. 由于Core Animation动画,改变的只是一个影子,实际的位置和尺寸都不会有变化.因而,在实际开发中,还是建议直接使用UIView动画. UIView动画 - (void)testViewSimpl…