用path动画绘制水波纹
用path动画绘制水波纹

效果

源码
//
// ViewController.m
// PathAnimation
//
// Created by YouXianMing on 15/7/3.
// Copyright (c) 2015年 YouXianMing. All rights reserved.
// #import "ViewController.h" @interface ViewController () @property (nonatomic, strong) CAShapeLayer *animationLayer;
@property (nonatomic, strong) NSTimer *timer; @property (nonatomic) CGPathRef oldPath;
@property (nonatomic) CGPathRef path; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.animationLayer = [CAShapeLayer layer];
self.animationLayer.borderWidth = 0.5f;
self.animationLayer.frame = CGRectMake(, , , );
self.animationLayer.position = self.view.center;
self.animationLayer.path = [self createPath].CGPath;
self.animationLayer.fillColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:self.animationLayer];
_timer = [NSTimer scheduledTimerWithTimeInterval:0.5f target:self selector:@selector(event) userInfo:nil repeats:YES];
} - (void)event { _oldPath = self.animationLayer.path;
_path = [self createPath].CGPath; CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
basicAnimation.duration = 0.5;
basicAnimation.fromValue = (__bridge id)(_oldPath);
basicAnimation.toValue = (__bridge id)_path;
self.animationLayer.path = _path; [self.animationLayer addAnimation:basicAnimation forKey:@"animateCirclePath"];
} - (UIBezierPath *)createPath { static int count = ; CGFloat controlPoint1_X = ;
CGFloat controlPoint1_Y = ;
CGFloat controlPoint2_X = ;
CGFloat controlPoint2_Y = ; if (count ++ % == ) { controlPoint1_X = [self randomNum_70_79];
controlPoint1_Y = [self randomNum_70_79]; controlPoint2_X = [self randomNum_120_129];
controlPoint2_Y = [self randomNum_120_129]; } else { controlPoint1_X = [self randomNum_70_79];
controlPoint1_Y = [self randomNum_120_129]; controlPoint2_X = [self randomNum_120_129];
controlPoint2_Y = [self randomNum_70_79]; } // 获取贝塞尔曲线
UIBezierPath* bezierPath = [UIBezierPath bezierPath]; // A
[bezierPath moveToPoint:CGPointMake(, )]; // B (Curve)
[bezierPath addCurveToPoint:CGPointMake(, )
controlPoint1:CGPointMake(controlPoint1_X, controlPoint1_Y)
controlPoint2:CGPointMake(controlPoint2_X, controlPoint2_Y)]; // C
[bezierPath addLineToPoint:CGPointMake(, )]; // D
[bezierPath addLineToPoint:CGPointMake(, )]; // 闭合曲线
[bezierPath closePath]; return bezierPath;
} /**
* 随机数 70 - 79
*
* @return 随机数
*/
- (CGFloat)randomNum_70_79 { return (CGFloat)(arc4random() % + );
} /**
* 随机数 120 - 129
*
* @return 随机数
*/
- (CGFloat)randomNum_120_129 { return (CGFloat)(arc4random() % + );
} @end
核心



用path动画绘制水波纹的更多相关文章
- Android自定义View——贝塞尔曲线实现水波纹效果
我们使用到的是Path类的quadTo(x1, y1, x2, y2)方法,属于二阶贝塞尔曲线,使用一张图来展示二阶贝塞尔曲线,这里的(x1,y1)是控制点,(x2,y2)是终止点,起始点默认是Pat ...
- iOS 自定义任意形状加载进度条(水波纹进度条)
1. 项目中要做类似下面的加载动画: 先给出安卓的实现方式 2.iOS的实现方式参考了下面两位的,感谢. 以任意底部图片为背景的加载动画 和 水波纹动画 最后附上自己的demo
- CSS3 水波纹
css3 动画设置水波纹,效果如下图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Android -- 贝塞尔实现水波纹动画(划重点!!)
1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一 ...
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果
从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...
- 用drawRect以及CAReplicatorLayer绘制动态水波纹
用drawRect以及CAReplicatorLayer绘制动态水波纹 大大简化了写水波纹效果的难度,你可以根据示例自己组装水波纹效果,本设计是几个工具组合在一起完成的效果, DrawRectObje ...
- css 实现水波纹,波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- 手把手教你画一个 逼格满满圆形水波纹loadingview Android
才没有完结呢o( ̄︶ ̄)n .大家好,这里是番外篇. 拜读了爱哥的博客,又学到不少东西.爱哥曾经说过: 要站在巨人的丁丁上. 那么今天,我们就站在爱哥的丁丁上来学习制作一款自定义view(开个玩笑,爱 ...
随机推荐
- Go语言学习笔记七: 函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
- Cloudera Impala源码分析: SimpleScheduler调度策略详解包括作用、接口及实现等
问题导读:1.Scheduler任务中Distributed Plan.Scan Range是什么?2.Scheduler基本接口有哪些?3.QuerySchedule这个类如何理解?4.Simple ...
- java-forkjoin框架的使用
ForkJoin是Java7提供的原生多线程并行处理框架,其基本思想是将大任务分割成小任务,最后将小任务聚合起来得到结果.fork是分解的意思, join是收集的意思. 它非常类似于HADOOP提供的 ...
- elasticsearch插件安装之--linux下安装及head插件
/** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ 安装和学习可参照官方文档: 1, 安装 # 下载, 获取不成 ...
- nginx 学习笔记(1) nginx安装
1.nginx安装 根据操作系统的不同,nginx的安装方式也不相同. 1.1 对linux系统来说,nginx.org提供了nginx安装包.http://nginx.org/en/linux_pa ...
- 编写高质量 JavaScript -- 知识点小记
一: 团队合作避免JS冲突 脚本中的变量随时存在冲突的风险, 1. 解决办法---用匿名函数将脚本包起来,让变量的作用域控制在匿名函数之内 如: <script type="tex ...
- HTTP协议以及HTTP请求中8种请求方法
HTTP协议以及HTTP请求中8种请求方法 什么是协议? 协议,是指通信的双方,在通信流程或内容格式上,共同遵守的标准. 什么是http协议? http协议,是互联网中最常见的网络通信标准. http ...
- WCF webHttpBinding协议上传接收文件
一般情况下wcf用webHttpBinding协议最多的场景就是前后端Json交互,会比较轻量级. 接收上传的文件也可以,不过要自己解析处理. 前端HTML很简单: <input type=&q ...
- [转]How to log queries using Entity Framework 7?
本文转自:https://stackoverflow.com/questions/26747837/how-to-log-queries-using-entity-framework-7
- [转] Linux Daemon Writing HOWTO
Linux Daemon Writing HOWTO Devin Watson v1.0, May 2004 This document shows how to write a daemon in ...