用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(开个玩笑,爱 ...
随机推荐
- 【好书分享】容器网络到kubernetes网络
Nginx 公司的 Michael Hausenblas 发布了一本关于 docker 和 kubernetes 中的容器网络的小册子.这份资料一共 72 页,是大家由浅入深的了解 Docker 和 ...
- solidity如何拼接字符串?
当你开始学习使用solidity开发以太坊智能合约之后,很快你会碰到一个问题: 一.在solidity中该如何拼接字符串? 可能你已经试过了,下面的代码试图把两个字符串使用相加的运算符连接起来,但是这 ...
- Android之网络丢包事件
原文链接 http://www.litrin.net/2013/03/01/android%E4%B9%8B%E7%BD%91%E7%BB%9C%E4%B8%A2%E5%8C%85%E4%BA%8B% ...
- Git报错:error: cannot open .git/FETCH_HEAD: Read-only file system
Git:git pull时报错 error: cannot open .git/FETCH_HEAD: Read-only file system 查看该文件: 未在网上找到解决办法,重启服务器就好了 ...
- [转]Extending the User Interface in Outlook 2010
本文转自:https://msdn.microsoft.com/en-us/library/office/ee692172%28v=office.14%29.aspx#OfficeOLExtendin ...
- vue权限路由实现方式总结
使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...
- C# linq to xml 简单示例
data.xml <?xml version="1.0" encoding="utf-8" ?> <Data> <Products ...
- 【原】Redis实现生成自增流水号
场景: 公司内部有个业务场景是后台审核之后需要生成一个流水号,规则是: 201807280001,201807280002,201807280003,后面四位依次递增,前面年月日取当前时间并且转换成y ...
- 关于shader的学习
教程地址:https://onevcat.com/2013/07/shader-tutorial-1 因为想做一些特效,所以想稍微了解一下shader的代码,一下是一些笔记 // Upgrade NO ...
- HwUI,CMS管理系统模板,漂亮,简单,兼容好
HwUI兼容目前所有浏览器,IE6+,Opera,Firefox,Chorme,Safari,由于IE6基本已废弃,所以也没有测试IE6的兼容,但做了部分IE6兼容调整.HwUI操作简单,路由导航不需 ...