一、简单介绍
视频转场是在AVFoundation框架下，用AVMutableVideoComposition的AVVideoCompositionInstruction数组实现转场。
图解.png
AVMutableVideoComposition: 用来生成video的组合指令，包含多段instruction。可以决定最终视频的尺寸，裁剪需要在这里进行 视频效果集合(转场、水印等)
AVMutableVideoCompositionInstruction: 一个指令，决定一个timeRange内每个轨道的状态，包含多个layerInstruction
AVMutableVideoCompositionLayerInstruction: 视频显示layer层效果 需要添加到AVMutableVideoCompositionInstruction
转场需要两个AVMutableVideoCompositionInstruction对象，一个是始终显示的layer集合,一个是转场需要的layer集合。
始终显示的layer集合:
AVMutableVideoCompositionInstruction *passThroughInstruction = [AVMutableVideoCompositionInstruction videoCompositionInstruction];
passThroughInstruction.timeRange = passThroughTimeRanges[i];
AVMutableVideoCompositionLayerInstruction *passThroughLayer = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:self.compositionVideoTracks[i]];//由track轨道初始化layer层对象
passThroughInstruction.layerInstructions = [NSArray arrayWithObject:passThroughLayer];
[instructions addObject:passThroughInstruction];
转场layer集合：
AVMutableVideoCompositionInstruction *transitionInstruction = [self transitionInstructionWith:self.compositionVideoTracks[i] next:self.compositionVideoTracks[i+1] timeRange:transitionTimeRanges[i] transitionType:type];
[instructions addObject:transitionInstruction];
二、实现转场
实现讲解
实现转场需要获得两个视频轨道的layer,一个是当前视频轨道，一个是下一个视频轨道。
初始化两个视频轨道layer
AVMutableVideoCompositionLayerInstruction *fromLayer = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:compositionVideoTrack];//当前视频track
AVMutableVideoCompositionLayerInstruction *toLayer = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];//下一个视频track
转场效果
1.无转场
没有转场，只需加载toLayer
[toLayer setOpacity:1.0 atTime:kCMTimeZero];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer ,nil];
2.溶解
在转场时间内Opacity从1到0，其Opacity值为1是显示，值为0不显示即黑屏
[fromLayer setOpacityRampFromStartOpacity:1.0 toEndOpacity:0.0 timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
2.gif
3.擦除
向四角擦除消失
AVMutableVideoCompositionLayerInstruction *fromLayerRightup = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:compositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *fromLayerLeftup = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:compositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *fromLayerLeftDown = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:compositionVideoTrack];
//右下
CGRect startRect = CGRectMake(videoWidth/2.0, videoHeight/2.0, videoWidth/2.0, videoHeight/2.0);
CGRect endRect = CGRectMake(videoWidth, videoHeight, 0.0f, 0.0f);
//通过裁剪实现擦除
[fromLayer setCropRectangleRampFromStartCropRectangle:startRect toEndCropRectangle:endRect timeRange:transitionTimeRange];
//右上
startRect = CGRectMake(videoWidth/2.0, 0, videoWidth/2.0, videoHeight/2.0);
endRect = CGRectMake(videoWidth, 0.0f, 0.0f, 0.0f);
//通过裁剪实现擦除
[fromLayerRightup setCropRectangleRampFromStartCropRectangle:startRect toEndCropRectangle:endRect timeRange:transitionTimeRange];
//左上
startRect = CGRectMake(0, 0, videoWidth/2.0, videoHeight/2.0);
endRect = CGRectZero;
//通过裁剪实现擦除
[fromLayerLeftup setCropRectangleRampFromStartCropRectangle:startRect toEndCropRectangle:endRect timeRange:transitionTimeRange];
//左上
startRect = CGRectMake(0, videoHeight/2.0, videoWidth/2.0, videoHeight/2.0);
endRect = CGRectMake(0, videoHeight, 0.0f, 0.0f);
//通过裁剪实现擦除
[fromLayerLeftDown setCropRectangleRampFromStartCropRectangle:startRect toEndCropRectangle:endRect timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer,fromLayerRightup,fromLayerLeftup,fromLayerLeftDown, nil];
3.gif
4.简单旋转
不熟悉CGAffineTransform变换的可以先看看知识点。缩放、旋转、平移等
CGAffineTransform scaleT = CGAffineTransformMakeScale(0.1, 0.1);
CGAffineTransform rotateT = CGAffineTransformMakeRotation(M_PI);
CGAffineTransform transform = CGAffineTransformTranslate(CGAffineTransformConcat(scaleT, rotateT), 1, 1);
[fromLayer setTransformRampFromStartTransform:CGAffineTransformIdentity toEndTransform:transform timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
4.gif
5.四边向中间至消失
需适配缩放和平移的比例，缩放是以左上角为坐标进行的。
CGAffineTransform scaleT = CGAffineTransformMakeScale(0.001, 0.001);
CGAffineTransform transform = CGAffineTransformTranslate(scaleT, videoWidth*500,videoHeight*500);
[fromLayer setTransformRampFromStartTransform:CGAffineTransformIdentity toEndTransform:transform timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
5.gif
6.水平从右边平推
[fromLayer setTransformRampFromStartTransform:CGAffineTransformIdentity toEndTransform:CGAffineTransformMakeTranslation(-videoWidth, 0) timeRange:transitionTimeRange];
[toLayer setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(videoWidth, 0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
6.gif
7.水平从左边平推至右
[fromLayer setTransformRampFromStartTransform:CGAffineTransformIdentity toEndTransform:CGAffineTransformMakeTranslation(compositionVideoTrack.naturalSize.width, 0.0) timeRange:transitionTimeRange];
[toLayer setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(-compositionVideoTrack.naturalSize.width, 0.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
7.gif
8.纵向从上往下推
[fromLayer setTransformRampFromStartTransform:CGAffineTransformIdentity toEndTransform:CGAffineTransformMakeTranslation(0, compositionVideoTrack.naturalSize.height) timeRange:transitionTimeRange];
[toLayer setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(0, -compositionVideoTrack.naturalSize.height) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
8.gif
9.纵向从下往上推
[fromLayer setTransformRampFromStartTransform:CGAffineTransformIdentity toEndTransform:CGAffineTransformMakeTranslation(0, -compositionVideoTrack.naturalSize.height) timeRange:transitionTimeRange];
[toLayer setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(0, +compositionVideoTrack.naturalSize.height) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayer, fromLayer, nil];
9.gif
10.上下各一半 从左右平移推
基于- (void)setCropRectangle:(CGRect)cropRectangle atTime:(CMTime)time实现layer显示区域的控制
[fromLayer setOpacityRampFromStartOpacity:1.0 toEndOpacity:0.0 timeRange:transitionTimeRange];
AVMutableVideoCompositionLayerInstruction *toLayerLeft = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerRight = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
[toLayerLeft setCropRectangle:CGRectMake(0, 0, videoWidth, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerLeft setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(-videoWidth, 0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerRight setCropRectangle:CGRectMake(0, videoHeight/2.0, videoWidth, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerRight setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(videoWidth, 0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayerRight,toLayerLeft, fromLayer, nil];
10.gif
11.左右各一半 从上下纵向移动
[fromLayer setOpacityRampFromStartOpacity:1.0 toEndOpacity:0.0 timeRange:transitionTimeRange];
AVMutableVideoCompositionLayerInstruction *toLayerUp = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerDown = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
[toLayerUp setCropRectangle:CGRectMake(0, 0, videoWidth/2.0, videoHeight) atTime:kCMTimeZero];
[toLayerUp setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(0, -videoHeight) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerDown setCropRectangle:CGRectMake(videoWidth/2.0, 0, videoWidth/2.0, videoHeight) atTime:kCMTimeZero];
[toLayerDown setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(0, videoHeight) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayerUp,toLayerDown, fromLayer, nil];
11.gif
12.上下左右四角移动到中间合成
[fromLayer setOpacityRampFromStartOpacity:1.0 toEndOpacity:0.0 timeRange:transitionTimeRange];
AVMutableVideoCompositionLayerInstruction *toLayerUpLeft = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerUpRight = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerDownLeft = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerDownRight = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
[toLayerUpLeft setCropRectangle:CGRectMake(0, 0, videoWidth/2.0, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerUpLeft setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(-videoWidth/2.0, -videoHeight/2.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerUpRight setCropRectangle:CGRectMake(videoWidth/2.0, 0, videoWidth/2.0, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerUpRight setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(videoWidth/2.0, -videoHeight/2.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerDownLeft setCropRectangle:CGRectMake(0, videoHeight/2.0, videoWidth/2.0, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerDownLeft setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(-videoWidth/2.0, videoHeight/2.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerDownRight setCropRectangle:CGRectMake(videoWidth/2.0, videoHeight/2.0, videoWidth/2.0, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerDownRight setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(videoWidth/2.0, videoHeight/2.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayerUpLeft,toLayerDownLeft,toLayerDownRight,toLayerUpRight, fromLayer, nil];
12.gif
13.左右到中间合成
[fromLayer setOpacityRampFromStartOpacity:1.0 toEndOpacity:0.0 timeRange:transitionTimeRange];
AVMutableVideoCompositionLayerInstruction *toLayerLeft = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerRight = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
[toLayerLeft setCropRectangle:CGRectMake(0, 0, videoWidth/2.0, videoHeight) atTime:kCMTimeZero];
[toLayerLeft setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(-videoWidth/2.0, 0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerRight setCropRectangle:CGRectMake(videoWidth/2.0, 0, videoWidth/2.0, videoHeight) atTime:kCMTimeZero];
[toLayerRight setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(videoWidth/2.0, 0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayerRight,toLayerLeft, fromLayer, nil];
13.gif
14.上下到中间合成
[fromLayer setOpacityRampFromStartOpacity:1.0 toEndOpacity:0.0 timeRange:transitionTimeRange];
AVMutableVideoCompositionLayerInstruction *toLayerUp = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
AVMutableVideoCompositionLayerInstruction *toLayerDown = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:nextcompositionVideoTrack];
[toLayerUp setCropRectangle:CGRectMake(0, 0, videoWidth, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerUp setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(0, -videoHeight/2.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
[toLayerDown setCropRectangle:CGRectMake(0.0, videoHeight/2.0, videoWidth, videoHeight/2.0) atTime:kCMTimeZero];
[toLayerDown setTransformRampFromStartTransform:CGAffineTransformMakeTranslation(0, videoHeight/2.0) toEndTransform:CGAffineTransformIdentity timeRange:transitionTimeRange];
transitionInstruction.layerInstructions = [NSArray arrayWithObjects:toLayerUp,toLayerDown, fromLayer, nil];
14.gif
网友评论