Core Animation - 发光的太阳(附高效设置图片圆角和变圆的方法)

简介: Core Animation - 发光的太阳(附高效设置图片圆角和变圆的方法)

先看下动画效果:

image.png

这里使用粒子动画,加上基础动画组合实现,还有一些绘图的方法,代码注释写的很清楚,看下面代码:

#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor grayColor];
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
    btn.frame = CGRectMake(0, 0, 100, 100);
    btn.center = self.view.center;
    btn.layer.cornerRadius = 50;
    btn.backgroundColor = [UIColor redColor];
    [btn addTarget:self action:@selector(good:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [self circleImageSomeAngle:[UIImage imageNamed:@"zbar.jpg"]];
    [self.view addSubview:imageView];
}
- (void)good:(UIButton *)btn
{
    CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
    //发射器的尺寸大小
    [emitterLayer setEmitterSize:CGSizeMake(CGRectGetWidth(btn.frame), CGRectGetHeight(btn.frame))];
    //发射器的中心
    emitterLayer.emitterPosition = CGPointMake(btn.bounds.size.width / 2, btn.bounds.size.height / 2);
    //从发射器边缘发出
    emitterLayer.emitterMode = kCAEmitterLayerOutline;
    //发射器形状,圆,粒子在圆形范围发射
    emitterLayer.emitterShape = kCAEmitterLayerCircle;
    [btn.layer addSublayer:emitterLayer];
    CAEmitterCell *emitterCell = [[CAEmitterCell alloc]init];
    //设置一个关键字来查找这个对象
    [emitterCell setName:@"sunShine"];
    //设置内容
    emitterCell.contents = (__bridge id _Nullable)([self creatImage].CGImage);
    //设置出生率
    emitterCell.birthRate = 0;
    //设置生命周期
    emitterCell.lifetime = 0.4;
    //设置变透明的速度
    emitterCell.alphaSpeed = -2;
    //设置速率
    emitterCell.velocity = 200;
    //设置速率容差
    emitterCell.velocityRange = 200;
    //粒子单元数组,用来放发射粒子
    emitterLayer.emitterCells = @[emitterCell];
    CABasicAnimation *emitterBasic = [CABasicAnimation animationWithKeyPath:@"emitterCells.sunShine.birthRate"];
    //通过基础动画设置出生率,从有到无
    emitterBasic.fromValue = [NSNumber numberWithFloat:100000];
    emitterBasic.toValue = [NSNumber numberWithFloat:0];
    //因为存在生命周期,所以持续时间可以不给
    emitterBasic.duration = 0;
    //设置向外加速
    emitterBasic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [emitterLayer addAnimation:emitterBasic forKey:@"good"];
}
//自己来画一张纯色图片
- (UIImage *)creatImage
{
    CGRect rect = CGRectMake(0, 0, 1, 1);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef text = UIGraphicsGetCurrentContext();
    //设置填充色
    CGContextSetFillColorWithColor(text, [UIColor yellowColor].CGColor);
    //设置填充区域
    CGContextFillRect(text, rect);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return [self circleImage:image];
}
//给图片变圆的高效方法
- (UIImage *)circleImage:(UIImage *)image
{
    UIGraphicsBeginImageContext(image.size);
    CGContextRef text = UIGraphicsGetCurrentContext();
    //设置边线宽
    CGContextSetLineWidth(text, 1);
    //设置边线条颜色
    CGContextSetStrokeColorWithColor(text, [UIColor blackColor].CGColor);
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
    //画一个圆
    CGContextAddArc(text, image.size.width / 2, image.size.height / 2, image.size.width / 2, 0, M_PI * 2, NO);
    //截取圆的部分
    CGContextClip(text);
    //在圆区域上画图
    CGContextDrawImage(text, rect, image.CGImage);
    UIImage *circlrImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return circlrImage;
}
//给图片加圆角的高效方法,同时还能设定具体哪个角是圆角
- (UIImage *)circleImageSomeAngle:(UIImage *)image
{
    //第二个参数为透明与否,第三个参数设置分辨率和屏幕一样
    UIGraphicsBeginImageContextWithOptions(image.size, NO, [UIScreen mainScreen].scale);
    CGContextRef text = UIGraphicsGetCurrentContext();
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(50, 50)];
    CGContextAddPath(text, maskPath.CGPath);
    CGContextClip(text);
    //下面注视的方法和CGContextDrawImage都可以,具体区别有知道的可以发表在评论处
//    [image drawInRect:rect];
//    CGContextDrawPath(text, kCGPathFillStroke);
    CGContextDrawImage(text, rect, image.CGImage);
    UIImage *circlrImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return circlrImage;
}

Demo下载地址:https://github.com/codeliu6572/Sunshine

目录
相关文章
|
5月前
|
图形学
【unity小技巧】FPS简单的射击换挡瞄准动画控制
【unity小技巧】FPS简单的射击换挡瞄准动画控制
29 0
|
5月前
|
图形学
【unity小技巧】最简单的FPS游戏准心跳动动画控制
【unity小技巧】最简单的FPS游戏准心跳动动画控制
35 0
|
6月前
|
前端开发
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
OpenGL ES 实现动态(水波纹)涟漪效果
最近一个做视频滤镜的朋友,让我给他做一个动态水波纹效果,具体就是:点击屏幕上的某一位置,然后波纹以该位置为中心向周围扩散。接到这个需求,一开始就尝试着在 3D 坐标系(x,y,z)中利用正弦或余弦函数去修改 z 分量的值,但是这样出来的效果太假了,压根就没有水波纹的真实感。
429 0
OpenGL ES 实现动态(水波纹)涟漪效果
Core Animation - 如何来绘制一个火柴人
Core Animation - 如何来绘制一个火柴人
129 0
Core Animation - 如何来绘制一个火柴人
|
编解码
PIE-engine 教程 ——全球夜间灯光指数动画加载含ui.legend图例添加
PIE-engine 教程 ——全球夜间灯光指数动画加载含ui.legend图例添加
354 0
PIE-engine 教程 ——全球夜间灯光指数动画加载含ui.legend图例添加
|
编解码
unity3dUGUI之UI粒子特效自适应缩放
using UnityEngine; using System.Collections; using System.Collections.Generic; public class UIParticleScale : MonoBehaviour...
1583 0
|
计算机视觉
Qt实用技巧:Qt设计器中QIcon的缩放(qss的放大和QIcon自动缩小(无法自动放大))
Qt实用技巧:Qt设计器中QIcon的缩放(qss的放大和QIcon自动缩小(无法自动放大))
Qt实用技巧:Qt设计器中QIcon的缩放(qss的放大和QIcon自动缩小(无法自动放大))
SwiftUI—色相和亮度的复合动画的制作
SwiftUI—色相和亮度的复合动画的制作
142 0
SwiftUI—色相和亮度的复合动画的制作
|
前端开发 容器
Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)
原文:Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)   说到对象的旋转,或许就会联想到对象角度的概念。
979 0