彈性動畫方法animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity: options: animations...
這個動畫效果是從IOS7開始有的,個人覺得動畫效果的使用者體驗很好,用起來也方便,但是這裡面的dampingRatio和velocity涉及到物理力學的知識,比較難理解和計算,只能通過Demo試驗來理解它所代表的意思。通過形象生動的比喻來理解它。
Performs
animations
using a timing curve described by the motion of a spring. WhendampingRatio
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的閉包中除了位置的變化外,還有透明度的變化,它也同樣有彈簧動畫的效果,只不過它沒有位置變化那麼明顯和貼近真實,它會表現出一閃一閃的效果:
相關文章
- 利用動畫延遲(animation-delay)實現複雜動畫動畫
- 讓View具有彈性效果的動畫——SpringAnimationView動畫Spring
- 包教包會 - 彈性動畫的原理與實現動畫
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- 如何用 Swift 實現一個好玩的彈性動畫Swift動畫
- 微信小程式之animation底部彈窗動畫(兩種方法)微信小程式動畫
- input delay和output delay講解
- jQuery delay()jQuery
- 用彩色動畫 GIF 大圖解釋彈性盒工作機制動畫圖解
- 有趣的CSS彈跳動畫CSS動畫
- 鴻蒙HarmonyOS實戰-ArkUI動畫(彈簧曲線動畫)鴻蒙UI動畫
- 屬性動畫動畫
- Android 動畫之屬性動畫Android動畫
- Sanic head(), options(), patch(), put() 方法/函式函式
- RocketMQ彈性HAMQ
- flex 彈性盒子Flex
- 彈性盒子flexFlex
- Android 動畫詳解:屬性動畫、View 動畫和幀動畫Android動畫View
- android動畫——屬性動畫(Property Animation)Android動畫
- Android屬性動畫:動畫流控制Android動畫
- JavaScript 動畫方式彈出圓角框JavaScript動畫
- 【Android 動畫】動畫詳解之屬性動畫(三)Android動畫
- 【Android 動畫】動畫詳解之屬性動畫(五)Android動畫
- iOS動畫 屬性屬性解析iOS動畫
- Android屬性動畫詳解(一),屬性動畫基本用法Android動畫
- 初識屬性動畫——使用Animator建立動畫動畫
- 屬性動畫:基本使用和組合動畫動畫
- Flutter 全域性彈窗Flutter
- Dapr 彈性的策略
- Flex彈性盒子與容器屬性Flex
- SVG restart動畫屬性SVGREST動畫
- SVG restart 動畫屬性SVGREST動畫
- SVG 動畫 fill 屬性SVG動畫
- android屬性動畫Android動畫
- end-to-end delay proof
- js模擬Sleep/DelayJS
- 屬性動畫 58同城資料載入動畫動畫
- CSS 屬性篇(四):Flex彈性盒子CSSFlex