iOS 弹簧动画详解CASpringAnimation

最新推荐文章于 2023-10-30 18:42:05 发布

想名真难

最新推荐文章于 2023-10-30 18:42:05 发布

阅读量1.5k

点赞数

分类专栏：动画文章标签： ios 动画 spring

原文链接：https://blog.csdn.net/zhao18933/article/details/47110469

版权

动画专栏收录该内容

10 篇文章

订阅专栏

本文介绍了iOS中CASpringAnimation的使用，它用于创建弹簧效果的动画。通过设置mass、stiffness、damping和initialVelocity等参数，可以调整动画的速度、幅度和停止方式。示例代码展示了如何创建一个从左向右的弹簧动画，并解释了各参数的影响。此外，还提到了UIView的弹簧动画封装，提供了更简便的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. CASpringAnimation
iOS9才引入的动画类，它继承于CABaseAnimation，用于制作弹簧动画，先演示个例子

这里写图片描述
2. 构建过程

let spring = CASpringAnimation(keyPath: "position.x")
spring.damping = 5;
spring.stiffness = 100;
spring.mass = 1;
spring.initialVelocity = 0;
spring.fromValue = label.layer.position.x;
spring.toValue = label.layer.position.x + 50;
spring.duration = spring.settlingDuration;
label.layer.addAnimation(spring, forKey: spring.keyPath);

把 label 替换成你要进行动画的视图，然后完成一个弹簧动画了

3. 参数说明
mass:
质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大
如果把质量改成10，则动画变成

这里写图片描述
动画的速度变慢，并且波动幅度变大

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

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

initialVelocity:
初始速率，动画视图的初始速度大小
速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反
如果把速率改成-20，则动画变成

这里写图片描述

这里会看到 label 先往左边移动一小段距离，然后再开始往右移动，因为初始速度往左，所以会经历先减速，后加速的过程

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

UIView自然也有弹簧动画的封装

[UIView animateWithDuration:2 delay:0
    usingSpringWithDamping:10
    initialSpringVelocity:5
                  options:UIViewAnimationOptionCurveLinear animations:^{


} completion:^(BOOL finished) {

}];