iOS 动画效果小结

作者: 清都 | 来源:发表于2017-10-16 10:31 被阅读8次

    跳转动画

    CA翻转动画

    //动画设置代码
    //CA动画
        CATransition * animation = [CATransition animation];
        [animation setDuration:3];
        /*
         pageCurl 向上翻页
         pageUnCurl 向下翻页
         cube 立方体转换
         rippleEffect 水纹波动
         suckEffect 收缩效果
         oglFilp 上下翻转效果
         */
        [animation setType:@"cube"];
        [animation setSubtype:kCATransitionFromRight];
        [self.view.window.layer addAnimation:animation forKey:@"push"];
        
        //界面推送代码
        [self presentViewController:loginVC animated:YES completion:nil];
    
    

    执行动画

    动画1

    
    [UIView animateWithDuration:0.5 animations:^{
            //动作执行0.5s
            self.frame=CGRectMake(0, HEIGHT_FOR_SCREEN, WIDTH_FOR_SCREEN, 260);
        } completion:^(BOOL finished) {
            //执行完毕后执行该步内容
            [self removeFromSuperview];
        }];
    
    

    CA弹簧动画

        //纵向平滑移动
    
        CASpringAnimation * spring = [CASpringAnimation animationWithKeyPath:@"position.y"];
    
        spring.damping = 5;//阻尼系数0~10
    
        spring.stiffness = 100;//弹簧刚度系数 0 到 100 系数越大力就越大
    
        spring.mass = 1;//弹簧末端的质量 大于0质量越大弹性就越大
    
        spring.initialVelocity = 0;//速度
    
        spring.fromValue = @(self.annotationView.layer.position.y);//起始的位置
    
        spring.toValue = @(self.annotationView.layer.position.y + 10);//结束位置
    
        spring.duration = spring.settlingDuration;//结束时间
    
        [self.annotationView.layer addAnimation:spring forKey:spring.keyPath];
    
        //self.annotationView这里是地图上的标注,具体根据要求更改
    
        //position.y + 10为滑动的纵坐标终点。同理,横向移动为position.x。
    
    
    1. mass:
      质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大。如果把质量改成10,则动画的速度变慢,并且波动幅度变大。

    2. stiffness:
      刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快

    3. damping:
      阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快

    4. initialVelocity:
      初始速率,动画视图的初始速度大小
      速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反
      如果把速率改成-20,则会看到 label 先往左边移动一小段距离,然后再开始往右移动,因为初始速度往左,所以会经历先减速,后加速的过程

    5. settlingDuration:
      结算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算
      通常弹簧动画的时间使用结算时间比较准确

    其他动画

    参考文章:CASpringAnimation 和 UIView.animateWithDuration 分别实现弹性动画iOS9 CASpringAnimation 弹簧动画详解

    相关文章

      网友评论

        本文标题:iOS 动画效果小结

        本文链接:https://www.haomeiwen.com/subject/ueqkuxtx.html