ios animation 动画效果实现

2022-05-30 10:38:23

1.过渡动画 CATransition

　　 CATransition *animation = [CATransition animation];

    [animation setDuration:1.0];

    [animation setType:kCATransitionFade];

    [animation setSubtype:kCATransitionFromLeft];

    [_imgPic.layer addAnimation:animation forKey:nil];

说明：

　　（1）.Duration 延迟

　　（2）.Type

　　　　kCATransitionFade 　　 // 交叉淡化过渡(不支持过渡方向)

　　　　kCATransitionMoveIn 　　// 新视图移到旧视图上面

　　　　kCATransitionPush　　　 // 新视图把旧视图推出去

　　　 kCATransitionReveal　　 // 将旧视图移开,显示下面的新视图

　　　　cube // 立方体翻滚效果

　　　　oglFlip // 上下左右翻转效果

　　　　suckEffect // 收缩效果，如一块布被抽走(不支持过渡方向)

　　　　rippleEffect // 滴水效果(不支持过渡方向)

　　　　pageCurl // 向上翻页效果

　　　　pageUnCurl // 向下翻页效果

　　　　cameraIrisHollowOpen // 相机镜头打开效果(不支持过渡方向)

　　　　cameraIrisHollowClose // 相机镜头关上效果(不支持过渡方向)

2.路径动画 CAKeyframeAnimation

    CAKeyframeAnimation *ani=[CAKeyframeAnimation animation];

    CGMutablePathRef aPath=CGPathCreateMutable();

    CGPathMoveToPoint(aPath, nil, , );

    CGPathAddCurveToPoint(aPath, nil,

                          , ,

                          , ,

                          , );

    ani.path=aPath;

    ani.duration=;

    ani.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    ani.rotationMode=@"autoReverse";

    [redView.layer addAnimation:ani forKey:@"position"];

//特殊曲线贝塞尔曲线

//贝塞尔曲线路径

    UIBezierPath *movePath = [UIBezierPath bezierPath];

    [movePath moveToPoint:CGPointMake(0.0, 0.0)];

    [movePath addQuadCurveToPoint:CGPointMake(self.view.frame.size.width/2.0, self.view.frame.size.height/2.0) controlPoint:CGPointMake(self.view.frame.size.width, self.view.frame.size.height)];

说明：（1）.moveToPoint :动画起始位置

　　　（2）.轨迹

　　　- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

　　　//endPoint 完成位置 controllerPoint 轨迹中的位置

3.基本类型 CABasicAnimation 事例

　　//背景色动画

    CABasicAnimation *animation=[CABasicAnimation animation];

    //设置颜色

    animation.toValue=(id)[UIColor blueColor].CGColor;

    //动画时间

    animation.duration=;

    //是否反转变为原来的属性值

    animation.autoreverses=YES;

    //把animation添加到图层的layer中，便可以播放动画了。forKey指定要应用此动画的属性

    [self.view.layer addAnimation:animation forKey:@"backgroundColor"];

//缩放动画

    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];

    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];

    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

    scaleAnim.removedOnCompletion = YES;

//透明动画

    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];

    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];

    opacityAnim.toValue = [NSNumber numberWithFloat:0.1];

    opacityAnim.removedOnCompletion = YES;

4. UIViewAnimationWithBlocks

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

// UIViewAnimationOptions

UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。

UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸

UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画

UIViewAnimationOptionRepeat //动画无限重复

UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复

UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间

UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线

UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照

UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果

UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项

//时间函数曲线相关

UIViewAnimationOptionCurveEaseInOut //时间曲线函数，由慢到快

UIViewAnimationOptionCurveEaseIn //时间曲线函数，由慢到特别快

UIViewAnimationOptionCurveEaseOut //时间曲线函数，由快到慢

UIViewAnimationOptionCurveLinear //时间曲线函数，匀速

//转场动画相关的

UIViewAnimationOptionTransitionNone //无转场动画

UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转

UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转

UIViewAnimationOptionTransitionCurlUp //上卷转场

UIViewAnimationOptionTransitionCurlDown //下卷转场

UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失

UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转

UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转

测试demo：https://github.com/lvdachao/animation

码农公寓

相关文章