用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动画绘制水波纹的更多相关文章

  1. Android自定义View——贝塞尔曲线实现水波纹效果

    我们使用到的是Path类的quadTo(x1, y1, x2, y2)方法,属于二阶贝塞尔曲线,使用一张图来展示二阶贝塞尔曲线,这里的(x1,y1)是控制点,(x2,y2)是终止点,起始点默认是Pat ...

  2. iOS 自定义任意形状加载进度条(水波纹进度条)

    1. 项目中要做类似下面的加载动画: 先给出安卓的实现方式 2.iOS的实现方式参考了下面两位的,感谢. 以任意底部图片为背景的加载动画 和 水波纹动画 最后附上自己的demo

  3. CSS3 水波纹

    css3 动画设置水波纹,效果如下图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. Android -- 贝塞尔实现水波纹动画(划重点!!)

    1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一 ...

  5. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  6. Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果

    从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...

  7. 用drawRect以及CAReplicatorLayer绘制动态水波纹

    用drawRect以及CAReplicatorLayer绘制动态水波纹 大大简化了写水波纹效果的难度,你可以根据示例自己组装水波纹效果,本设计是几个工具组合在一起完成的效果, DrawRectObje ...

  8. css 实现水波纹,波浪动画效果

    <div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...

  9. 手把手教你画一个 逼格满满圆形水波纹loadingview Android

    才没有完结呢o( ̄︶ ̄)n .大家好,这里是番外篇. 拜读了爱哥的博客,又学到不少东西.爱哥曾经说过: 要站在巨人的丁丁上. 那么今天,我们就站在爱哥的丁丁上来学习制作一款自定义view(开个玩笑,爱 ...

随机推荐

  1. Redis笔记(三):Redis常用命令

    连接测试 连接本地服务器 语法 $ redis-cli 实例 启动 redis 客户端,打开终端并输入命令 redis-cli.该命令会连接本地的 redis 服务. $redis-cli redis ...

  2. mysql数据库数据监测

    #!/bin/bash MYSQL="mysql -h10.10.10.10 -P8036 -uusername -ppassword --default-character-set=utf ...

  3. Nodejs学习笔记(十七)—浮点运算decimal.js

    前言 开发过程中免不了有浮点运算,JavaScript浮点运算的精度问题会带来一些困扰 JavaScript 只有一种数字类型 ( Number ) JavaScript采用 IEEE 754 标准双 ...

  4. Nodejs学习笔记(八)—Node.js + Express 实现上传文件功能(felixge/node-formidable)

    前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...

  5. UnityShader之屏幕特效基础

    1.什么是屏幕特效 我们这里讲的屏幕特效技术,指的是在渲染完整个场景后得到的屏幕图象的基础上,再对这个屏幕图像做一系列处理,实现出屏幕特效,使用这种技术可以为屏幕画面增添各种风格的艺术效果,比如泛光. ...

  6. 重置Root用户密码

    在忘记root用户密码是用于重置root用户密码: 1.开机按e. 2.在linux16开头的一行的末尾添加rd.break,按ctrl+x. 3.依次执行命令: mount -o remount,r ...

  7. [转] Hadoop MapReduce开发最佳实践(上篇)

    前言 本文是Hadoop最佳实践系列第二篇,上一篇为<Hadoop管理员的十个最佳实践>. MapRuduce开发对于大多数程序员都会觉得略显复杂,运行一个WordCount(Hadoop ...

  8. [javaSE] 单例设计模式

    四人帮设计了23中设计模式 单例设计模式:解决一个类在内存中只存在一个对象 构造函数私有化 在类中创建一个本类对象 提供一个方法可以获取该对象 class Single{ private static ...

  9. [PHP] 重回基础(Array相关函数)

    使用函数array_keys(),得到数组中所有的键,参数:数组 $arr=array(); $arr['one']="one"; $arr['two']="two&qu ...

  10. ASP.NET MVC4应用程序无法建立控制器的解决方案/获取自己需要的EF版本

    具体错误是我建立控制器的时候出现如下图那样的错误: Unable to cast object of type 'System.Data.Entity.Core.Objects.ObjectConte ...