Android動畫特效之Animator屬性動畫實現
http://www.lxweimin.com/p/255218a29b12
我在百忙之中抽出寶貴時間來實現Android動畫特效，也就是Android Animator動畫效果，使用Animator屬性動畫來實現平移、縮放、透明度、旋轉等動畫效果，采用ValueAnimator、ObjectAnimator類來滿足動畫特效，以及ValueAnimator、ObjectAnimator類的使用。
要實現Android動畫特效，首先要掌握如何自定義view。因為不管實現Android動畫特效，還是工作當中業務需求功能實現，都會經常接觸到自定義view，實現自定義view也是重中之重，作為Android開發者，需要自定義view是必不可少的。
自定義view使用步驟如下：
- 編寫布局文件。
- 實現構造方法。
- 初始化UI。
- 提供對外的方法。
- 在布局當中引用該控件。
- activity中使用。
因此通過示例來詳解如何自定義view。
1.首先編寫布局文件layout_center_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/rlDeviceView"
>
<ImageView
android:id="@+id/ivDeviceView"
android:layout_width="0dp"
android:layout_height="0dp"
/>
</RelativeLayout>
- 實現構造方法。
- 初始化UI。
- 提供對外的方法。
CenterView.java
// 因為我們的布局采用RelativeLayout，所以這里繼承RelativeLayout
public class CenterView extends RelativeLayout {
private static final String TAG = "CenterView";
private ImageView ivDeviceView;
private int deviceDpWith;
private int devicePxWith;
private Context context;
public CenterView(Context context) {
this(context, null);
}
public CenterView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CenterView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
// 初始化UI，可根據業務需求設置默認值
private void initView(Context context) {
this.context = context;
View view = LayoutInflater.from(context).inflate(R
.layout.layout_center_view, null, false);
ivDeviceView = view.findViewById(R.id.ivDeviceView);
devicePxWith = Constants.CENTER_LAYOUT_PIX_SIZE;
// 先添加addView后，再獲取ivDeviceView.getLayoutParams()，否則會報空
refreshing();
addView(view);
}
private void refreshing() {
ivDeviceView.setImageResource(R.mipmap.wifi_icon);
// 拿到的是ivDeviceView父布局的參數，也就是RelativeLayout。
LayoutParams params= (LayoutParams) ivDeviceView.getLayoutParams();
params.width = devicePxWith;
params.height = devicePxWith;
ivDeviceView.setLayoutParams(params);
}
public void setDeviceWith(int deviceWith) {
this.deviceDpWith = deviceWith;
devicePxWith = ScreenUtil.dp2px(context, deviceDpWith);
refreshing();
}
public void setDeivceImageResource(int resId) {
ivDeviceView.setImageResource(resId);
}
// 重寫onMeasure方法進行測量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(measureWith(widthMeasureSpec), measureHeight(heightMeasureSpec));
}
private int measureWith(int measureSpec) {
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
// 設置一個默認值，就是這個View的默認寬度為xxx,
int result = Constants.CENTER_LAYOUT_PIX_SIZE;
if (specMode == MeasureSpec.AT_MOST) { // 相當于我們設置成wrap_content
result = specSize;
} else if (specMode == MeasureSpec.EXACTLY) { // 相當于我們設置成match_content或者一個具體的值
result = specSize;
}
return result;
}
private int measureHeight(int measureSpec) {
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
// 設置一個默認值，就是這個View的默認寬度為xxx,
int result = Constants.CENTER_LAYOUT_PIX_SIZE;
if (specMode == MeasureSpec.AT_MOST) { // 相當于我們設置成wrap_content
result = specSize;
} else if (specMode == MeasureSpec.EXACTLY) { // 相當于我們設置成match_content或者一個具體的值
result = specSize;
}
return result;
}
}
上面并不難，都有注釋，重要的是通過onMeasure方法需要重新測量自身的view。
5.在布局當中引用該控件。本示例暫不引用，通過代碼去引用它。
在編寫一個layout_base_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
從上面可以看出，里面沒有任何子view，聲明RelativeLayout即可。
BaseLayoutView.java
// 因為我們的布局采用RelativeLayout，所以這里繼承RelativeLayout
public class BaseLayoutView extends RelativeLayout {
private static final String TAG = "BaseLayoutView";
private float centerX = 0f;
private float centerY = 0f;
public BaseLayoutView(Context context) {
this(context, null);
}
public BaseLayoutView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BaseLayoutView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
// 初始化UI，可根據業務需求設置默認值
private void initView(Context context) {
View view = LayoutInflater.from(context).inflate(R
.layout.layout_base_view, null, false);
addView(view);
centerX = Constants.SCREEN_WIDTH / Constants.FLOAT_TWO;
centerY = Constants.SCREEN_HEIGHT / Constants.FLOAT_TWO - ScreenUtil.getStatusBarHeight();
Log.i(TAG, "initView getStatusBarHeight= " + ScreenUtil.getStatusBarHeight());
Log.i(TAG, "initView centerX= " + centerX + " centerY= " + centerY);
}
// 返回中心X坐標
public float getCenterX() {
return centerX;
}
// 返回中心Y坐標
public float getCenterY() {
return centerY;
}
}
BaseLayoutView是一個基礎視圖，初始化的時候計算下view的中心坐標，注意：需要減去狀態欄的高度。這樣我們就可以拿到該BaseLayoutView的中心坐標，并對外提供方法可以訪問到BaseLayoutView的x、y坐標。
這樣上面的自定義View已經編好了，分別是CenterView和BaseLayoutView類。接下來我們看activity里面怎么實現呢。
在編寫一個activity的activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
上面可以看出，里面沒有任何的子view，僅聲明RelativeLayout和id即可。
看下Activity代碼怎么寫呢。
MainActivity.java
public class MainActivity extends AppCompatActivity {
private RelativeLayout relativeLayout;
private SolarControl solarControl;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
relativeLayout = findViewById(R.id.rl_layout);
solarControl = new SolarControl(relativeLayout);
}
@Override
protected void onDestroy() {
super.onDestroy();
if (solarControl != null) {
solarControl.release();
solarControl = null;
}
}
}
上面可以看出，RelativeLayout實例化一個對象，拿到布局里面的id即可，將RelativeLayout對象傳遞給SolarControl類即可，剩下的事交給SolarControl類來處理。SolarControl類主要是負責UI顯示和業務交互的地方，當前在activity的onDestroy方法內部調用SolarControl類的release()來釋放資源，為什么這么做呢？
我們來看下SolarControl類里面做了什么事情。
SolarControl.java
public class SolarControl {
private static final String TAG = "SolarControl";
private ViewGroup parentView;
private BaseLayoutView baseView;
private CenterView centerView;
public SolarControl(ViewGroup parent) {
parentView = parent;
baseView = new BaseLayoutView(parentView.getContext());
initView();
}
private void initView() {
centerView = new CenterView(baseView.getContext());
float centerX = baseView.getCenterX() - Constants.CENTER_LAYOUT_PIX_SIZE / Constants.FLOAT_TWO;
float centerY = baseView.getCenterY() - Constants.CENTER_LAYOUT_PIX_SIZE / Constants.FLOAT_TWO;
centerView.setX(centerX);
centerView.setY(centerY);
Log.i(TAG, "initView centerX= " + centerX + " centerY= " + centerY);
baseView.addView(centerView);
parentView.addView(baseView);
}
public void release() {
if (baseView != null) {
baseView.removeView(centerView);
parentView.removeView(baseView);
baseView = null;
parentView = null;
}
if (centerView != null) {
centerView = null;
}
}
}
首先SolarControl類的構造方法傳入的是ViewGroup對象，而ViewGroup是容器，RelativeLayout、LinearLayout、ConstraintLayout等等都繼承ViewGroup。分別實例化CenterView和BaseLayoutView對象，并計算CenterView的x、y坐標，CenterView坐標拿到的是view左上角的坐標，因此想讓view居中，需要重新計算坐標。x、y分別減去CenterView寬度的一半，計算出來的坐標就是讓CenterView在整個屏幕居中顯示。然后將CenterView對象通過addView方法添加到BaseLayoutView對象里面，也可以理解CenterView是BaseLayoutView的子view、子視圖。同樣通過addView方法添加到ViewGroup容器中，也就是需要把BaseLayoutView視圖添加到activity_main.xml布局里面。聲明release方法提供外部調用，方法內部就是移除view，釋放引用，目的就是activity退出的時候釋放內存，這就是編碼過程中需要考慮到優化內存的地方。
接下來運行一下項目，看看效果。
自定義的CenterView在整個屏幕居中了，基本功能就實現了，通過例子，我們需要掌握如何自定義View，在開發過程中，根據需求難免會需要使用自定義view來實現。上面例子已經實現了，為了后面的Android動畫特效項目開發做鋪墊，
小伙伴有興趣的話，搜索并關注公眾號“Android技術迷”關注后可閱讀更多的文章，感謝各位關注。
Android動畫特效之Animator屬性動畫實現
http://www.lxweimin.com/p/255218a29b12
