zoukankan      html  css  js  c++  java
  • ios animation 动画效果实现

    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, 20, 20);
        CGPathAddCurveToPoint(aPath, nil, 
                              20, 40,
                              220, 40,
                              240, 380);
        
        ani.path=aPath;
        ani.duration=10;
        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=1;
        //是否反转变为原来的属性值
        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

  • 相关阅读:
    Big-data:Linux基础(04)--快捷键
    Big-data:Linux基础(03)
    Big-data:Linux基础(02)
    [mysql]删除和修改
    git使用两个异常处理
    jmeter函数使用以及json格式的后置处理器
    jmeter遇到中文不可见
    jmeter参数化
    GIT简易使用
    mysql基本语句(更新中)
  • 原文地址:https://www.cnblogs.com/chaochaobuhuifei55/p/5834367.html
Copyright © 2011-2022 走看看