如何实现CAEmitterCell透明度先淡入再淡出的效果

实现原理 #

CAEmitterCell自带的alphaSpeed仅支持单位时间内的单向线性透明度变化，无法直接实现先升后降的效果，最灵活稳定的实现方式是给粒子模板绑定透明度关键帧动画，所有新发射的粒子会自动继承该动画效果。

具体实现步骤 #

• 创建CAKeyframeAnimation，指定keyPath为opacity
• 配置values数组为[@0, @1, @0]，对应透明度从0升到1再降到0的变化节点
• 动画的duration设置为和CAEmitterCell的lifetime完全相等，保证透明度变化周期和粒子的生命周期对齐
• 将动画添加到CAEmitterCell上即可，无需单独处理每个粒子

代码示例 #

Objective-C版本 #

CAEmitterCell *starCell = [CAEmitterCell emitterCell];
starCell.contents = (id)[UIImage imageNamed:@"star"].CGImage;
starCell.lifetime = 2.0; // 单个粒子存活2秒，可按需调整
starCell.birthRate = 10; // 每秒发射10个粒子，可按需调整
starCell.alphaSpeed = 0; // 保持默认值，避免和动画冲突

// 配置透明度关键帧动画
CAKeyframeAnimation *alphaAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
alphaAnim.values = @[@0, @1, @0];
// 配置时间节点：0%时间透明度0，25%时间升到1，100%时间降到0，可按需调整
alphaAnim.keyTimes = @[@0, @0.25, @1];
alphaAnim.duration = starCell.lifetime;
alphaAnim.repeatCount = INFINITY;
alphaAnim.removedOnCompletion = NO;

// 动画绑定到粒子模板
[starCell addAnimation:alphaAnim forKey:@"starAlphaAnimation"];

Swift版本 #

let starCell = CAEmitterCell()
starCell.contents = UIImage(named: "star")?.cgImage
starCell.lifetime = 2.0
starCell.birthRate = 10
starCell.alphaSpeed = 0

let alphaAnim = CAKeyframeAnimation(keyPath: "opacity")
alphaAnim.values = [0, 1, 0]
alphaAnim.keyTimes = [0, 0.25, 1]
alphaAnim.duration = starCell.lifetime
alphaAnim.repeatCount = .infinity
alphaAnim.isRemovedOnCompletion = false

starCell.addAnimation(alphaAnim, forKey: "starAlphaAnimation")

注意事项 #

• 若需调整透明度上升、下降阶段的时长占比，仅需修改keyTimes数组的第二个数值即可，数值为0到1之间的浮点数，对应整个动画周期的占比
• 若粒子存在缩放、位移等其他动画，可同样通过给CAEmitterCell添加对应关键帧动画实现，无需额外处理单个粒子

内容的提问来源于stack exchange，提问作者Rufus