本文的合集已經(jīng)編著成書，高級(jí)Android開(kāi)發(fā)強(qiáng)化實(shí)戰(zhàn)，歡迎各位讀友的建議和指導(dǎo)。在京東即可購(gòu)買：https://item.jd.com/12385680.html
在啟動(dòng)Android應(yīng)用時(shí), 直接顯示頁(yè)面, 就稱之為冷啟動(dòng)(Cold Start). 為了增強(qiáng)用戶體驗(yàn), 可以添加控件動(dòng)畫, 讓啟動(dòng)頁(yè)面更有趣, 用戶也更加容易接受. 提升應(yīng)用的用戶體驗(yàn).
主要講解兩種啟動(dòng)方式, 一種是中心動(dòng)畫, 一種是預(yù)留位置.
中心動(dòng)畫: 使用動(dòng)畫效果逐漸顯示控件, 如位移, 漸變, 縮放等.
預(yù)留位置: 改變控件的位置和大小直至匹配, 如坍塌, 滑入等.
本文源碼的GitHub下載地址
動(dòng)畫效果
1. 中心動(dòng)畫
在顯示控件的過(guò)程中, 可以使用三種動(dòng)畫方式, 位移\漸變\縮放, 可以單獨(dú)使用, 也可以組合使用. 核心類是** ViewCompat**.
位移: 控制Y軸的距離, 向上移動(dòng)300像素.
// 向上移動(dòng)
ViewCompat.animate(mIvLogo)
.translationY(-300)
.setStartDelay(STARTUP_DELAY)
.setDuration(ANIM_ITEM_DURATION)
.setInterpolator(new DecelerateInterpolator(1.2f))
.start();
漸變: 默認(rèn)Alpha是0, 漸變?yōu)?, 并移動(dòng)50像素.
viewAnimator = ViewCompat.animate(v)
.translationY(50).alpha(1)
.setStartDelay((ITEM_DELAY * i) + 500)
.setDuration(1000);
縮放: scaleX和scaleY從0變?yōu)?.
viewAnimator = ViewCompat.animate(v)
.scaleY(1).scaleX(1)
.setStartDelay((ITEM_DELAY * i) + 500)
.setDuration(500);
注意: setStartDelay延遲啟動(dòng)動(dòng)畫, setDuration動(dòng)畫持續(xù)時(shí)間.
2. 預(yù)留位置
在控件顯示的過(guò)程中, 可以改變位置和大小, 動(dòng)畫效果可以是坍塌和滑入. 坍塌效果與CollapsingToolbarLayout相同, 通過(guò)本文代碼, 理解實(shí)現(xiàn)原理.
坍塌: 使用** ValueAnimator**改變Toolbar的高度, 在結(jié)束時(shí), 啟動(dòng)其他動(dòng)畫.
// Toolbar坍塌成ActionBar
private void collapseToolbar(int height) {
TypedValue tv = new TypedValue();
getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true);
int toolBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
ValueAnimator valueAnimator = ValueAnimator.ofInt(height, toolBarHeight); // 動(dòng)畫
valueAnimator.addUpdateListener(animation -> {
ViewGroup.LayoutParams lp = mTToolbar.getLayoutParams();
lp.height = (Integer) animation.getAnimatedValue();
mTToolbar.setLayoutParams(lp);
});
valueAnimator.start();
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mPhRecyclerAdapter.setItems(ModelItem.getFakeItems());
ViewCompat.animate(mFabBar).setStartDelay(500)
.setDuration(500).scaleX(1).scaleY(1).start();
}
});
}
漸入: 在列表加載時(shí), 使用動(dòng)畫效果, 卡片逐張滑入.
// 列表適配器
public static class PhRecyclerAdapter extends RecyclerView.Adapter<PhRecyclerAdapter.PhViewHolder> {
private final ArrayList<ModelItem> mItems = new ArrayList<>(); // 數(shù)據(jù)
public void setItems(List<ModelItem> items) {
// 啟動(dòng)動(dòng)畫的關(guān)鍵位, 順次添加動(dòng)畫效果
int pos = getItemCount();
mItems.addAll(items);
notifyItemRangeInserted(pos, mItems.size());
}
@Override
public PhViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_card, parent, false);
return new PhViewHolder(v);
}
@Override
public void onBindViewHolder(PhViewHolder holder, int position) {
holder.bindTo(mItems.get(position));
}
@Override public int getItemCount() {
return mItems.size();
}
// 數(shù)據(jù)存儲(chǔ)
public static class PhViewHolder extends RecyclerView.ViewHolder {
@Bind(R.id.item_tv_title) TextView mTvTitle;
@Bind(R.id.item_iv_image) ImageView mIvImage;
private Context mContext;
public PhViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
mContext = itemView.getContext().getApplicationContext();
}
public void bindTo(ModelItem item) {
Picasso.with(mContext).load(item.getImgId()).into(mIvImage);
mTvTitle.setText(item.getName());
}
}
}
注意: notifyItemRangeInserted(pos, mItems.size()); 確保單張動(dòng)畫效果.
設(shè)置列表(RecyclerView)的Item動(dòng)畫: mRvRecycler.setItemAnimator(...);
啟動(dòng)動(dòng)畫可以增強(qiáng)應(yīng)用的吸引力, 但也并不是所有頁(yè)面都需要啟動(dòng)動(dòng)畫, 還需要根據(jù)情況具體分析, 交給UE\UX吧, 程序員只要提供這些可選技能即可.
OK, that's all! Enjoy it!
