探索iOS转场动画

iOS提供图像转场动画,可实现酷炫的转场特效。动画包括:溶解、折叠、复印机、暴露、翻页、波纹、滑动等等。

一、溶解动画

CIDissolveTransition提供溶解动画,我们来看看对应的转场动画效果:

探索iOS转场动画_第1张图片

在CIFilter指定CIDissolveTransition,使用smoothstep函数生成时间,示例代码如下:

import simd

func dissolveFilter(_ inputImage: CIImage, 
                    to targetImage: CIImage, 
                    time: TimeInterval) -> CIImage? {
        
    let inputTime = simd_smoothstep(0, 1, time)
        
    guard let filter = CIFilter(name:"CIDissolveTransition",
                                    withInputParameters:
        [
            kCIInputImageKey: inputImage,
            kCIInputTargetImageKey: targetImage,
            kCIInputTimeKey: inputTime
        ]) else {
            return nil
    }
        
    return filter.outputImage
}

使用CADisplayLink来开始执行动画,添加到run loop,示例如下:

func beginTransition() {
        
    time = 0
    dt = 0.005
        
    displayLink = CADisplayLink(target: self,
                                selector: #selector(stepTime))
    displayLink.add(to: RunLoop.current,
                    forMode: RunLoopMode.defaultRunLoopMode)
}

如果超过1s动画结束,移除displayLink,否则更新动画:

@objc
func stepTime() {
    
   time += dt
        
   if time > 1 {
       displayLink.remove(from:RunLoop.main, forMode:RunLoopMode.defaultRunLoopMode)
   } else {
       guard let dissolvedCIImage = dissolveFilter(sourceCIImage,
                                                   to:finalCIImage,
                                                   time:time) else {
                                                      return
       }

       let cgImage = context.createCGImage(dissolvedCIImage, 
                                           from: dissolvedCIImage)
       imageView.image = UIImage(CGImage:cgImage)
   }
}

二、折叠动画

CIAccordionFoldTransition折叠动画,输入参数如下表所示:

参数 描述
inputNumberOfFolds 折叠数量,默认:3.0, 最小值:1.0, 最大值:50.0
inputFoldShadowAmount 阴影数量,默认:0.1, 最小值:0.0, 最大值:1.0
inputTime 时间,默认:0.0, 最小值:0.0, 最大值:1.0

 三、复印机动画

CICopyMachineTransition复印机动画,输入参数如下表所示:

参数 描述
inputExtent 输入矩形,默认值[0,0,300,300]
inputColor 输入颜色
inputTime 输入时间,默认值为0
inputAngle 输入角度,默认值为0
inputWidth 输入宽度,默认值为200
inputOpacity 透明度,默认值为1.3

复印机的转场动画如下:

探索iOS转场动画_第2张图片

 四、暴露动画

CIModTransition暴露动画,是显示一个个不规则形状的洞,输入参数如下:

参数 描述
inputCenter 中心点,默认值[150,150]
inputTime 输入时间,默认值为0
inputAngle 输入角度,默认值为20
inputRadius 输入半径,默认值为150.0
inputCompression 压缩,默认值为300

对应的转场动画效果:

探索iOS转场动画_第3张图片

 五、翻页动画

CIPageCurlWithShadowTransition提供翻页动画,输入参数如下:

参数 描述
inputExtent 面积,默认值[0,0,0,0]
inputTime 输入时间,默认值为0
inputAngle 输入角度,默认值为0
inputRadius 输入半径,默认值100,最小值0.01,最大值400

翻页的转场动画如下: 

探索iOS转场动画_第4张图片

 六、波纹动画

CIRippleTransition提供波纹动画,输入参数如下:

参数 描述
inputCenter 中心点,默认值[150,150]
inputExtent 面积,默认值[0,0,300,300]
inputTime 输入时间,默认值为0
inputWidth 输入宽度,默认值为100
inputScale 缩放系数,默认值为50.0

波纹动画效果如下:

探索iOS转场动画_第5张图片

七、滑动动画

CISwipeTransition提供滑动动画,输入参数如下:

参数 描述
inputExtent 面积,默认值[0,0,300,300]
inputColor 颜色
inputTime 时间,默认值为0
inputAngle 角度,默认值为0
inputWidth 宽度,默认值为300
inputOpacity 透明度,默认值为0

滑动的转场动画,可以指定角度实现从上到下、从下到上、从左到右、从右到左。效果如下:

探索iOS转场动画_第6张图片

你可能感兴趣的:(iOS音视频,图像转场动画)