如何为文字切换动画添加模糊效果？（已实现透明度与位移动画）

如图所示的文字切换动画，每个字符包含透明度、位置及模糊三种变化效果。目前我已实现了透明度与位置的动画效果，但无法找到添加模糊效果的方法。现有实现代码如下：

func runTextAnimationPostion_Show() -> Void {
    isShowing = true
    for (idx,item) in textLayers.enumerated() {
        item.position = textLayerPostions[idx];
        item.removeAllAnimations();
        item.opacity = 0.0
    }
    
    for (index,textLayer) in textLayers.enumerated() {
        
        let animation2 = CABasicAnimation(keyPath: "opacity");
        animation2.fromValue = 0.0
        animation2.toValue = 1.0;
        let duration2 = Double(animationTime / Double(textLayers.count));
        animation2.duration = duration2*3.0;
        animation2.repeatCount = 1;
        animation2.beginTime = CACurrentMediaTime() + Double(index) * duration2;
        animation2.fillMode = .forwards;
        animation2.isRemovedOnCompletion = false;
        textLayer.add(animation2, forKey: "\(index)+o");
        
        
        let position = textLayerPostions[index];
        
        let point = CGPoint(x: textLayer.position.x, y: position.y - 10);
        textLayer.position = point;
        let animation = CABasicAnimation(keyPath: "position");
        animation.fromValue = point
        animation.toValue = position;
        let duration = Double(animationTime / Double(textLayers.count));
        animation.duration = duration*3.0;
        animation.repeatCount = 1;
        animation.beginTime = CACurrentMediaTime() + Double(index) * duration;
        animation.fillMode = .forwards;
        animation.isRemovedOnCompletion = false;
        textLayer.add(animation, forKey: "\(index)");
    }
}

解决方案：添加高斯模糊动画 #

要实现字符从模糊到清晰的动画，可以通过CIGaussianBlur滤镜配合图层动画完成，具体修改如下：

func runTextAnimationPostion_Show() -> Void {
    isShowing = true
    for (idx,item) in textLayers.enumerated() {
        item.position = textLayerPostions[idx];
        item.removeAllAnimations();
        item.opacity = 0.0
        
        // 初始化高斯模糊滤镜，设置初始模糊半径
        let blurFilter = CIFilter(name: "CIGaussianBlur")!
        blurFilter.setValue(10.0, forKey: kCIInputRadiusKey)
        item.filters = [blurFilter]
    }
    
    for (index,textLayer) in textLayers.enumerated() {
        
        // 原有透明度动画
        let animation2 = CABasicAnimation(keyPath: "opacity");
        animation2.fromValue = 0.0
        animation2.toValue = 1.0;
        let duration2 = Double(animationTime / Double(textLayers.count));
        animation2.duration = duration2*3.0;
        animation2.repeatCount = 1;
        animation2.beginTime = CACurrentMediaTime() + Double(index) * duration2;
        animation2.fillMode = .forwards;
        animation2.isRemovedOnCompletion = false;
        textLayer.add(animation2, forKey: "\(index)+o");
        
        // 原有位置动画
        let position = textLayerPostions[index];
        let point = CGPoint(x: textLayer.position.x, y: position.y - 10);
        textLayer.position = point;
        let animation = CABasicAnimation(keyPath: "position");
        animation.fromValue = point
        animation.toValue = position;
        let duration = Double(animationTime / Double(textLayers.count));
        animation.duration = duration*3.0;
        animation.repeatCount = 1;
        animation.beginTime = CACurrentMediaTime() + Double(index) * duration;
        animation.fillMode = .forwards;
        animation.isRemovedOnCompletion = false;
        textLayer.add(animation, forKey: "\(index)");
        
        // 新增模糊动画
        let blurAnimation = CABasicAnimation(keyPath: "filters.0.inputRadius")
        blurAnimation.fromValue = 10.0 // 初始模糊程度
        blurAnimation.toValue = 0.0 // 最终清晰状态
        blurAnimation.duration = duration*3.0
        blurAnimation.repeatCount = 1
        blurAnimation.beginTime = CACurrentMediaTime() + Double(index) * duration
        blurAnimation.fillMode = .forwards
        blurAnimation.isRemovedOnCompletion = false
        textLayer.add(blurAnimation, forKey: "\(index)+blur")
    }
}

关键说明： #

• 利用CIGaussianBlur滤镜实现模糊效果，通过inputRadius参数控制模糊程度（值越大越模糊）
• 动画的keyPath设置为"filters.0.inputRadius"，表示访问图层滤镜数组中第一个滤镜的模糊半径属性
• 保持模糊动画与透明度、位置动画的时长、开始时间一致，确保三种效果同步执行

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