用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(开个玩笑,爱 ...
随机推荐
- centos7下搭建JAVA项目运行环境。 JAVA+MYSQL+TOMCAT+NGINX
环境: centos 7 64位 一.配置mysql 5.71.下载mysql源安装包wget http://dev.mysql.com/get/mysql57-community-release-e ...
- Python2.x 中文乱码问题
Python 文件中如果未指定编码,在执行过程会出现报错: #!/usr/bin/pythonprint "你好,世界"; 以上程序执行输出结果为: File "test ...
- 数据库--oracle安装配置(本地安装的步骤及各种问题解决方案)
oracle版本:Oracle 11g 本地电脑配置:安装内存8G 64为操作系统win8.1 下载Oracle 11g压缩包: 1 网址http://www.oracle.com/technetwo ...
- Go 开发
0.参数传递永远是值传递,地址也是一种值 1.go 开发环境的配置 2.import 包的几种形式: 1)_,默认导入一个包时,会将包中内容导入再执行包中的init()方法,有时并不需要某个包,只是想 ...
- 面试题28:单链表一次遍历删除从后往前的第n个节点
class Solution { public: ListNode *removeNthFromEnd(ListNode *head, int n) { ListNode* fake = ); fak ...
- TCP连接、Http连接与Socket连接
1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. ...
- elasticsearch-head的使用
ealsticsearch只是后端提供各种api,那么怎么直观的使用它呢?elasticsearch-head将是一款专门针对于elasticsearch的客户端工具 elasticsearch-he ...
- jquery源码学习笔记(一)jQuery的无new构建
本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...
- 阿里云Maven仓库
<mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> <name>Nexu ...
- 啰里吧嗦kafka
1.kafka是什么 kafka官网: http://kafka.apache.org/ kafka是一种高吞吐量的分布式发布订阅消息系统,用它可以在不同系统中间传递分发消息 2.zookeeper是 ...