探索iOS转场动画网站首页 技术杂谈

探索iOS转场动画

徐福记456 2024-06-30 06:01:02

简介探索iOS转场动画

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

一、溶解动画

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

在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

复印机的转场动画如下：

四、暴露动画

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

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

对应的转场动画效果：

五、翻页动画

CIPageCurlWithShadowTransition提供翻页动画，输入参数如下：

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

翻页的转场动画如下：

六、波纹动画

CIRippleTransition提供波纹动画，输入参数如下：

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

波纹动画效果如下：

七、滑动动画

CISwipeTransition提供滑动动画，输入参数如下：

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