梦幻星空动画

简介:

梦幻星空动画

http://code4app.com/ios/%E6%A2%A6%E5%B9%BB%E6%98%9F%E7%A9%BA%E5%8A%A8%E7%94%BB/53a52747933bf051468b5b51

效果如下图:

效果是别人做的,非本人所写,本人只是分析下实现原理而已:)

代码原理:

1. 所有的View都将backedLayer替换成了粒子Layer

 

2. 粒子随着路径运动的动画代码如下,keyPath很少见哦,粒子的位置,学习了.

 

3. 爆炸效果如何产生的?

LYFireworksView.m

 

附录:

CAEmitterCell的一些可以动画的属性:

这么多可供动画用参数,应该可以实现非常复杂的效果吧.

 

/* The name of the cell. Used to construct key paths. Defaults to nil. */

@property(copy) NSString *name;

/* Controls whether or not cells from this emitter are rendered. */

@property(getter=isEnabled) BOOL enabled;

/* The number of emitted objects created every second. Default value is
 * zero. Animatable. */

@property float birthRate;

/* The lifetime of each emitted object in seconds, specified as a mean
 * value and a range about the mean. Both values default to zero.
 * Animatable. */

@property float lifetime, lifetimeRange;

/* The orientation of the emission angle in radians, relative to the
 * natural orientation angle of the emission shape. Note that latitude
 * here is what is typically called colatitude, the zenith or phi, the
 * angle from the z-axis. Similarly longitude is the angle in the
 * xy-plane from the x-axis, often referred to as the azimuth or
 * theta. Both values default to zero, which translates to no change
 * relative to the emission shape's direction. Both values are
 * animatable. */

@property CGFloat emissionLatitude, emissionLongitude;

/* An angle (in radians) defining a cone around the emission angle.
 * Emitted objects are uniformly distributed across this cone. Defaults
 * to zero.  Animatable. */

@property CGFloat emissionRange;

/* The initial mean velocity of each emitted object, and its range. Both
 * values default to zero. Animatable. */

@property CGFloat velocity, velocityRange;

/* The acceleration vector applied to emitted objects. Defaults to
 * (0, 0, 0). Animatable. */

@property CGFloat xAcceleration, yAcceleration, zAcceleration;

/* The scale factor applied to each emitted object, defined as mean and
 * range about the mean. Scale defaults to one, range to zero.
 * Animatable. */

@property CGFloat scale, scaleRange, scaleSpeed;

/* The rotation speed applied to each emitted object, defined as mean
 * and range about the mean. Defaults to zero. Animatable. */

@property CGFloat spin, spinRange;

/* The mean color of each emitted object, and the range from that mean
 * color. `color' defaults to opaque white, `colorRange' to (0, 0, 0,
 * 0). Animatable. */

@property CGColorRef color;

@property float redRange, greenRange, blueRange, alphaRange;

/* The speed at which color components of emitted objects change over
 * their lifetime, defined as the rate of change per second. Defaults
 * to (0, 0, 0, 0). Animatable. */

@property float redSpeed, greenSpeed, blueSpeed, alphaSpeed;

/* The cell contents, typically a CGImageRef. Defaults to nil.
 * Animatable. */

@property(retain) id contents;

/* The sub-rectangle of the contents image that will be drawn. See
 * CALayer.h for more details. Defaults to the unit rectangle [0 0 1 1].
 * Animatable. */

@property CGRect contentsRect;

/* The filter parameters used when rendering the `contents' image. See
 * CALayer.h for more details. */

@property(copy) NSString *minificationFilter, *magnificationFilter;
@property float minificationFilterBias;

/* An array containing the sub-cells of this cell, or nil (the default
 * value). When non-nil each particle emitted by the cell will act as
 * an emitter for each of the cell's sub-cells. The emission point is
 * the current particle position and the emission angle is relative to
 * the current direction of the particle. Animatable. */

 

目录
相关文章
|
15天前
|
数据可视化 JavaScript 图形学
Threejs实现音乐节奏表演
这篇文章详细介绍了如何使用Three.js结合音频频谱分析来创建一个随着音乐节奏变化的3D视觉表演,提供了实现音乐可视化效果的具体步骤和代码示例。
102 60
Threejs实现音乐节奏表演
|
2月前
PPT 动画-莲花绽放
PPT 动画-莲花绽放
28 0
|
2月前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
|
缓存 云计算 容器
这个夏天,追光动画在阿里云上“绘出”《长安三万里》
这个夏天,追光动画在阿里云上“绘出”《长安三万里》
555 0
|
5月前
|
JavaScript
【UI】 欢快畅游的小鱼特效
【UI】 欢快畅游的小鱼特效
44 1
|
5月前
网页星光闪耀背景动画特效
网页星光闪耀背景动画特效
34 0
网页星光闪耀背景动画特效
|
开发者
用D3制作一个旋转的大风车SVG庆祝国际儿童节
写于2023年的六一国际儿童节,用D3做一个大风车庆祝一下这个快乐的节日,借此机会介绍一下SVG滤镜的使用,代码也是非常简短的
100 0
用D3制作一个旋转的大风车SVG庆祝国际儿童节
[视频]高端微课|W01.初尝万彩动画——人人都能制作动画版微课!
或许,你也曾想抛弃PPT那万年不变的动画模式!或许,你也想让你的微课提升一个档次!或许,你也羡慕网上那些科普类动画的的炫酷!
96 0
|
前端开发 JavaScript
「寒草的中秋献礼🥮,实现30s前端创意动画」陪你看日落和月升|与你赏星空和诗歌
「寒草的中秋献礼🥮,实现30s前端创意动画」陪你看日落和月升|与你赏星空和诗歌
282 1
|
数据可视化 前端开发 小程序
中秋节——我给心爱的她做了一个3d月球动画
前言 大家好,又到了周末了,又到了Fly写文章的时候了, 过几天不是中秋节了,想着之前写过一篇从0- 1 实现3D地球的,反响效果特别好, 这次趁着🎑节给大家写了一个月球绕地球的运转的动画。本篇文章还是偏入门级别,重在把简单的知识讲清楚,如果是资深three爱好者,可以直接划走了,不浪费大家时间。ok👌言归正传,读完本篇文章你可以学到什么?至于心爱的她—— 就是学习 本文阅读估计花费 5 分钟 天空盒子的制作 three.js 中的贴图 一个物体绕另一个物体旋转 初始化 这篇文章我不会在从头详细的介绍three.js 的一些要素了,如果小伙伴你不是很清楚的话,你可以直接看下我这篇文章入
中秋节——我给心爱的她做了一个3d月球动画