美文网首页iOS 的那些事儿
弹性动画方法animateWithDuration: delay

弹性动画方法animateWithDuration: delay

作者: CharlyZheng | 来源:发表于2016-09-12 18:03 被阅读348次

这个动画效果是从IOS7开始有的,个人觉得动画效果的用户体验很好,用起来也方便,但是这里面的dampingRatio和velocity涉及到物理力学的知识,比较难理解和计算,只能通过Demo试验来理解它所代表的意思。通过形象生动的比喻来理解它。

Performs animations using a timing curve described by the motion of a spring. When dampingRatio is 1, the animation will smoothly decelerate to its final model values without oscillating. Damping ratios less than 1 will oscillate more and more before coming to a complete stop. You can use the initial spring velocity to specify how fast the object at the end of the simulated spring was moving before it was attached. It's a unit coordinate system, where 1 is defined as travelling the total animation distance in a second. So if you're changing an object's position by 200pt in this animation, and you want the animation to behave as if the object was moving at 100pt/s before the animation started, you'd pass 0.5. You'll typically want to pass 0 for the velocity.

方法调用:

[UIView animateWithDuration:duration
     
                          delay:delayTime
     
         usingSpringWithDamping:dampingRate
     
          initialSpringVelocity:velocity options:options
     
                     animations:^{
                         //code here
                     } completion:nil];
  • usingSpringWithDamping:弹簧动画的阻尼值,也就是相当于摩擦力的大小,该属性的值从0.0到1.0之间,越靠近0,阻尼越小,弹动的幅度越大,反之阻尼越大,弹动的幅度越小,如果大道一定程度,会出现弹不动的情况。换句话说, 范围 0~1 当它设置为1时,动画是平滑的没有振动的达到静止状态,越接近0 振动越大

  • initialSpringVelocity:就是形变的速度,从视觉上看可以理解弹簧的形变速度,到动画结束,该速度减为0,所以,velocity速度越大,那么形变会越快,当然在同等时间内,速度的变化(就是速率)也会越快,因为速度最后都要到0。值越小弹簧的动力越小,弹簧拉伸的幅度越小,反之动力越大,弹簧拉伸的幅度越大。这里需要注意的是,如果设置为0,表示忽略该属性,由动画持续时间和阻尼计算动画的效果。

补充
当usingSpringWithDamping属性值为0.1时,表示阻尼很小,虽然没有动力因素的影响,但登录按钮弹动的幅度依然比较大,相当于在冰面滑行一样。当该属性为1时,表示阻尼非常大,可以看到登录按钮几乎是没有什么弹动的幅度。这就是阻尼的效果。

值的注意的一点是,弹簧动画并不只作用于位置的变化,它可以作用于所有动画属性的变化,比如我们在animations的闭包中除了位置的变化外,还有透明度的变化,它也同样有弹簧动画的效果,只不过它没有位置变化那么明显和贴近真实,它会表现出一闪一闪的效果:

相关文章

网友评论

    本文标题:弹性动画方法animateWithDuration: delay

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