用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(0, 0, 200, 200);
    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 = 0;

    CGFloat controlPoint1_X = 0;
    CGFloat controlPoint1_Y = 0;
    CGFloat controlPoint2_X = 0;
    CGFloat controlPoint2_Y = 0;

    if (count ++ % 2 == 0) {

        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(0, 100)];

    // B (Curve)
    [bezierPath addCurveToPoint:CGPointMake(200, 100)
                  controlPoint1:CGPointMake(controlPoint1_X, controlPoint1_Y)
                  controlPoint2:CGPointMake(controlPoint2_X, controlPoint2_Y)];

    // C
    [bezierPath addLineToPoint:CGPointMake(200, 200)];

    // D
    [bezierPath addLineToPoint:CGPointMake(0, 200)];

    // 闭合曲线
    [bezierPath closePath];

    return bezierPath;
}

/**
 *  随机数 70 - 79
 *
 *  @return 随机数
 */
- (CGFloat)randomNum_70_79 {

    return (CGFloat)(arc4random() % 10 + 70);
}

/**
 *  随机数 120 - 129
 *
 *  @return 随机数
 */
- (CGFloat)randomNum_120_129 {

    return (CGFloat)(arc4random() % 10 + 120);
}

@end

核心

时间: 2024-10-24 21:15:38

用path动画绘制水波纹的相关文章

动画绘制水波纹

使用drawRect:方式绘制的动画效果,右图为占用了多少CPU. 虽然画起来挺好看的,但占用的内存真心吃不消,原因其实很简单哦,drawRect:方法只调用CPU进行图形绘制,所以非常非常的消耗CPU性能,把它集成到应用程序中,我觉得是不靠谱的呢. // // WaterView.h // Cell // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface WaterVi

Android L中水波纹点击效果的实现

博主参加了2014 CSDN博客之星评选,帮我投一票吧. 点击给我投票 前言 前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的点击效果-水波纹很有印象吧,点击一个view,然后一个水波纹就会从点击处扩散开来,本文就来分析这种效果的实现.首先,先说下L上的实现,这种波纹效果,L上提供了一种动画,叫做Reveal效果,其底层是通过拿到view的canvas然后不断刷新view来完成的,这种效果需要view的支持,

自定义控件---继承View类方式(五彩绚烂的水波纹案例)

---------------------------------------看效果(还有动画效果哦)---------------------------------------------------- activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

多个彩色水波纹扩散效果

布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=

android 自定义控件之水波纹loading的实现

恩恩,需求还是没有下来,整了一天多,再次整出一个loading框,看来我对loading框是情有独钟,好了,不多bb,先上图: 恩,就是这么个东东,较之前两个,有了点技术含量,但是其实也不是很难,之所以做了一天多,原因是又特么踩了一个坑,坑了我一个下午的时间,伤不起,至于是什么坑,下面再说: 好了,完成这个之前必要的知识储备,二阶贝塞尔曲线,也去网上看了一些文章,还有说要三阶贝塞尔曲线知识的,其实我觉得没必要,二阶就够了,下面附上一个链接,看完就知道贝塞尔曲线到底是个 什么 东东了:http:/

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

1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一下,这里写出我遇到的一些问题不是为了凑整片文章的字数,而是希望大家能从根源下知道它是怎么解决的,而不是你直接百度搜索这个问题解决的代码,好了,说了这么多,只是想告诉大家,我后面会在过程中提很多问题(邪恶脸,嘿嘿嘿),好吧,来看看今天的效果: 2,what is the fuck?,这就是你说的很好看

Android自定义水波纹动画Layout

Android自定义水波纹动画Layout 源码是双11的时候就写好了,但是我觉得当天发不太好,所以推迟了几天,没想到过了双11女友就变成了前女友,桑心.唉不说了,来看看代码吧. 展示效果 Hi前辈 话不多说,我们先来看看效果: 这一张是<Hi前辈>的搜索预览图,你可以在这里下载这个APP查看更多效果:http://www.wandoujia.com/apps/com.superlity.hiqianbei LSearchView 这是一个MD风格的搜索框,集成了ripple动画以及searc

自定义控件三部曲之绘图篇(六)——Path之贝赛尔曲线和手势轨迹、水波纹效果

前言:好想义无反顾地追逐梦想 相关文章:<Android自定义控件三部曲文章索引> 从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo(二阶贝塞尔)函数,给大家补充一下. 本篇最终将以两个例子给大家演示贝塞尔曲线的强大用途: 1.手势轨迹 利用贝塞尔曲线,我们能实现平滑的手势轨迹效果 2.水波纹效果 电池充电时,有些手机会显示水波纹效果,就是这样

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

从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo(二阶贝塞尔)函数,给大家补充一下. 本篇最终将以两个例子给大家演示贝塞尔曲线的强大用途: 1.手势轨迹 利用贝塞尔曲线,我们能实现平滑的手势轨迹效果 2.水波纹效果 电池充电时,有些手机会显示水波纹效果,就是这样做出来的. 废话不多说,开整吧 一.概述 在<android Graphics(二):路径