ConstraintLayout動畫之圓形動畫

2023年5月7號, constraintlayout 1.0.2發布. 近一年之後, 2023年4月12號, constraintlayout 1.1.0終於發布(下方可能會縮寫constraintlayout為ctlay). google的constraintlayout開發人員說他們花了這麼多時間, 不僅是因為1.1.0有眾多新功能, 還因為他們還要花時間來做androidstudio上constraintlayout的預覽等功能. 對於我們開發來說, 1.1.0有諸多好用的功能, 掘金上其實已經有不少文章在介紹了. 如:

[譯] 帶你領略 constraintlayout 1.1 的新功能

約束布局（constraintlayout）1.1.0的新特性

constraintlayout 1.1.1 最詳細使用

今天主要是講解1.1.x中的circle position布局的問題.

以前在寫圓形布局時是比較麻煩的, 得自己計算sin, cos. 而且有經驗的同學肯定還記得math.sin(num)中的num是弧度的, 不是角度. 即是用π來表示180°. 所以我們在計算角度時還得先把角度轉成弧度, 如把90°轉成π/2.

除此以外, 要是還有圓形布局還要配合動畫, 那就更複雜了, 還要涉及到半徑, 軌道等等.

舉乙個例子, 鴻洋在2023年初寫過一篇文章android 打造炫目的圓形選單秒秒鐘高仿建行圓形選單, 裡面為了實現乙個圓形選單, 用了大量的數學計算, 我來摘錄一部分, 大家隨意感受一下.

left = layoutradius
/ 2+ (int) math.round(tmp
* math.cos(math.toradians(mstartangle)) - 1 / 2f
* cwidth);
return (float) (math.asin(y / math.hypot(x, y)) * 180 / math.pi);
複製**

所幸的是, 現在我們有了constraintlayout 1.1.0, 圓形布局變得超容易了.

現在我們可以對constraintlayout中的任意子view加上下面三個屬性:

舉個例子: 我現在要讓鬧鐘的按鈕, 在hamburger按鈕的正右邊, 如下圖所示:

那我們要做的就是在fabalarm這個floatingactionbar裡加上三句:

android:id="@+id/fabalarm"
/>
複製**

同時注意, 經我測試, -45度不會是在圓心的左上角, circleangle只接收正數. 所以你要有-45度的效果, 就應該使用315度.

早些年, 有乙個應用叫path, 它有乙個圓弧選單, 在當時還算蠻新穎的. 效果類似這樣的:

(圖出自 github/saurabharora90/materialarcmenu)

經過上面講解, 這個動畫就變容易了吧. 我們來分析一下, 幾個選單都是以270度, 300度, 330度, 360度的效果. 而整個彈出的效果其實就是radius在一直變大的效果嘛.

這樣分析了一下, 那我們布局好xml

<?xml version="1.0" encoding="utf-8"
?>
xmlns:android=""
android:layout_width="match_parent"
android:layout_height="match_parent"
>
android:id="@+id/fabtotal"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_margin="16dp"
android:src="@drawable/ic_menu"
android:tint="#fff"
/>
android:id="@+id/fabmenualarm"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_alarm"
android:tint="#fff"
android:visibility="invisible"
/>
android:id="@+id/fabmenuautorenew"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_autorenew"
android:tint="#fff"
android:visibility="invisible"
/>
android:id="@+id/fabmenubuild"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_build"
android:tint="#fff"
android:visibility="invisible"
/>
android.support.constraint.constraintlayout>
複製**

每次按一下處於圓心的fab時, 我們就開啟動畫

fun
open() 
private
funstartanim
(start: int, end: int, isvisible: boolean)
}anim.start()
}複製**

關鍵幾點就是:

對layoutparams.circleradius做動畫, 從0到最終位置end.

為了結尾有乙個回彈的效果, 我們給animator加的interpolator是bounceinterpolator()

同時, 關閉選單就可以使用:

fun
close() 
複製**

總體效果因為只是個demo, 所以只是粗糙的效果. 但相信大家也都了解了, 如何用constraintlayout來做圓形動畫了. 比如說太陽系行星環繞的布局與動畫, 也可以使用類似的技巧來做.

ConstraintLayout動畫之圓形動畫

Android之動畫 Tween動畫（線性動畫）

緩動函式與動畫

canvas動畫圓形擴散運動軌跡

ConstraintLayout動畫 之 圓形動畫

Android之動畫 Tween動畫（線性動畫）

緩動函式與動畫

canvas動畫 圓形擴散 運動軌跡

相關推薦

ConstraintLayout動畫之圓形動畫

canvas動畫圓形擴散運動軌跡