前言
而我已經分不清
你是友情
還是錯過的愛情
簡介
CircularReveal是Google在Api版本21實現的一種動畫，視覺效果類似於漣漪，主要實現api是通過ViewAnimationUtils的createCircularReveal方法。
效果圖
方法
/**
* @param view 動畫view
* @param centerX 擴展圓的圓心x座標
* @param centerY 擴展圓的圓心y座標
* @param startRadius 開始半徑
* @param endRadius 結束半徑
*/
public static Animator createCircularReveal(View view,
int centerX, int centerY, float startRadius, float endRadius) {
return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
}原理圖
xml文件
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:onClick="doAnimation"
android:text="開始動畫" />
<View
android:id="@+id/animation_view"
android:layout_width="240dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:background="#f00" />實現
public class MainActivity extends AppCompatActivity {
View mAnimationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAnimationView = findViewById(R.id.animation_view);
}
public void doAnimation(View view) {
//動畫最低支持Api21
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
return;
}
int width = mAnimationView.getWidth();
int height = mAnimationView.getHeight();
int centerX = width / 2;
int centerY = height / 2;
int radius = Math.max(width, height);
if (mAnimationView.isShown()) {
//消失動畫
Animator dismissAnimation = ViewAnimationUtils
.createCircularReveal(mAnimationView, centerX, centerY, radius, 0);
dismissAnimation.setDuration(1000);
dismissAnimation.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mAnimationView.setVisibility(View.INVISIBLE);
}
});
dismissAnimation.start();
} else {
//顯示動畫
Animator showAnimation = ViewAnimationUtils
.createCircularReveal(mAnimationView, centerX, centerY, 0, radius);
showAnimation.setDuration(1000);
mAnimationView.setVisibility(View.VISIBLE);
showAnimation.start();
}
}
}修改圓心
通過改變擴展圓的圓心座標和半徑，我們可以實現不同的擴散效果。
分析
上面這種效果我們擴展圓的圓心爲(width, 0),擴展半徑爲對角線的長度。
實現
很簡單，我們只需要把圓心座標和半徑處理下就OK了。
public void doAnimation(View view) {
//動畫最低支持Api21
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
return;
}
int width = mAnimationView.getWidth();
int height = mAnimationView.getHeight();
//指定圓心位於view右上角
int centerX = width;
int centerY = 0;
//半徑爲對角線長度
int radius = (int) Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
if (mAnimationView.isShown()) {
//消失動畫
Animator dismissAnimation = ViewAnimationUtils
.createCircularReveal(mAnimationView, centerX, centerY, radius, 0);
dismissAnimation.setDuration(1000);
dismissAnimation.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mAnimationView.setVisibility(View.INVISIBLE);
}
});
dismissAnimation.start();
} else {
//顯示動畫
Animator showAnimation = ViewAnimationUtils
.createCircularReveal(mAnimationView, centerX, centerY, 0, radius);
showAnimation.setDuration(1000);
mAnimationView.setVisibility(View.VISIBLE);
showAnimation.start();
}
}