Android開(kāi)發(fā)仿映客送禮物效果
這里寫(xiě)鏈接內(nèi)容仿映客送小禮物的特效,順便復(fù)習(xí)一下屬性動(dòng)畫(huà),話(huà)不多說(shuō)先看效果圖。

需求分析
可以看到整個(gè)動(dòng)畫(huà)有幾部分組成,那我們就把每個(gè)部分拆分出來(lái)各個(gè)擊破。
1.要顯示那些內(nèi)容以及內(nèi)容間的位置關(guān)系?
可以看到我們要顯示用戶(hù)頭像,昵稱(chēng),禮物圖標(biāo)以及數(shù)量。所以這里我選擇用FrameLayout來(lái)作為根布局。
2.需要哪些動(dòng)畫(huà)以及動(dòng)畫(huà)的執(zhí)行順序?
a.首先是整體從左到右飛入并有一個(gè)回彈(translationX + OvershootInterpolator)
b.然后是禮物從左到右飛入而且是一個(gè)帶減速效果的(translationX + DecelerateInterpolator)
c.禮物數(shù)量依次累加同時(shí)伴隨著縮放(scale+repeat)
d.后面的粒子效果(幀動(dòng)畫(huà))
e.整體向上平移并且逐漸消失(translationY + alpha)
3.送禮的區(qū)域有兩塊(A,B),如何分配?
因?yàn)橛脩?hù)送禮的數(shù)量不固定,所以動(dòng)畫(huà)持續(xù)的時(shí)間也不一定。但是我們希望這兩塊區(qū)域能得到充分的使用,即我們需要一個(gè)隊(duì)列存放這些禮物實(shí)例,A和B誰(shuí)空閑,就分配給誰(shuí)處理。
4.以上所有內(nèi)容是否使用原生的空間就能實(shí)現(xiàn)?
正如上面的分析,我們有時(shí)操作整體,有時(shí)操作局部。這時(shí)我們最好能自定義一個(gè)布局繼承FrameLayout,其實(shí)也就是封裝一層,這樣我們就可以很好的控制整個(gè)布局。除此之外,還有我們注意到禮物數(shù)量是帶描邊的,貌似需要我們自定義實(shí)現(xiàn)了。
功能實(shí)現(xiàn)
需求分析完了,接下來(lái)我們說(shuō)說(shuō)功能的實(shí)現(xiàn)。
首先來(lái)打我們的整體布局。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:id="@+id/animation_person_rl" android:layout_width="wrap_content" android:layout_height="39dp" android:layout_gravity="left" android:layout_marginTop="22dp" android:background="@drawable/bg_giftlayout"> <ImageView android:id="@+id/gift_userheader_iv" android:layout_width="39dp" android:layout_height="39dp" android:layout_margin="3dp" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@mipmap/ember" /> <TextView android:id="@+id/gift_usernickname_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="6dp" android:layout_marginTop="4dp" android:layout_toRightOf="@id/gift_userheader_iv" android:text="庫(kù)日天" android:textColor="#ffffff" android:textSize="12sp" /> <TextView android:id="@+id/gift_usersign_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@id/gift_usernickname_tv" android:layout_below="@id/gift_usernickname_tv" android:layout_marginTop="4dp" android:ellipsize="end" android:text="送一個(gè)超級(jí)無(wú)敵" android:textColor="#ffea79" android:textSize="11sp" /> <ImageView android:id="@+id/animation_gift" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/gift_usersign_tv" android:background="@mipmap/diamond2x" /> </RelativeLayout> <ImageView android:id="@+id/animation_light" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="120dp" android:src="@drawable/light_star_anim" /> <com.example.work.animationdemo.StrokeTextView android:id="@+id/animation_num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="185dp" android:layout_marginTop="12dp" android:text="x 1" android:textColor="#0076ff" android:textSize="24sp" app:innnerColor="#ffffff" app:outerColor="#0076ff" /> </FrameLayout>
這里比較簡(jiǎn)單不多說(shuō)了,重點(diǎn)看下StrokeTextView,帶描邊的textview,其實(shí)就是重寫(xiě)了ondraw方法先繪制外層,在繪制內(nèi)層。
@Override
protected void onDraw(Canvas canvas) {
if (m_bDrawSideLine) {
// 描外層
setTextColorUseReflection(mOuterColor);
m_TextPaint.setStrokeWidth(5);
m_TextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
super.onDraw(canvas);
// 描內(nèi)層,恢復(fù)原先的畫(huà)筆
setTextColorUseReflection(mInnerColor);
m_TextPaint.setStrokeWidth(0);
m_TextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
}
super.onDraw(canvas);
}
/**
* 使用反射的方法進(jìn)行字體顏色的設(shè)置
* @param color
*/
private void setTextColorUseReflection(int color) {
Field textColorField;
try {
textColorField = TextView.class.getDeclaredField("mCurTextColor");
textColorField.setAccessible(true);
textColorField.set(this, color);
textColorField.setAccessible(false);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
m_TextPaint.setColor(color);
}
定義禮物的實(shí)體類(lèi)
public class GiftSendModel {
private int giftCount;
private String userAvatarRes;
private String nickname;
private String sig;
private int giftRes;
private String gift_id;
private int star;
public GiftSendModel(int giftCount) {
this.giftCount = giftCount;
}
public int getGiftCount() {
return giftCount;
}
public void setGiftCount(int giftCount) {
this.giftCount = giftCount;
}
......
封裝整體布局
public class GiftFrameLayout extends FrameLayout {
private LayoutInflater mInflater;
RelativeLayout anim_rl;
ImageView anim_gift, anim_light, anim_header;
TextView anim_nickname, anim_sign;
StrokeTextView anim_num;
/**
* 禮物數(shù)量的起始值
*/
int starNum = 1;
int repeatCount = 0;
private boolean isShowing = false;
public GiftFrameLayout(Context context) {
this(context, null);
}
public GiftFrameLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mInflater = LayoutInflater.from(context);
initView();
}
private void initView() {
View view = mInflater.inflate(R.layout.animation, this, false);
anim_rl = (RelativeLayout) view.findViewById(R.id.animation_person_rl);
anim_gift = (ImageView) view.findViewById(R.id.animation_gift);
anim_light = (ImageView) view.findViewById(R.id.animation_light);
anim_num = (StrokeTextView) view.findViewById(R.id.animation_num);
anim_header = (ImageView) view.findViewById(R.id.gift_userheader_iv);
anim_nickname = (TextView) view.findViewById(R.id.gift_usernickname_tv);
anim_sign = (TextView) view.findViewById(R.id.gift_usersign_tv);
this.addView(view);
}
public void hideView() {
anim_gift.setVisibility(INVISIBLE);
anim_light.setVisibility(INVISIBLE);
anim_num.setVisibility(INVISIBLE);
}
public void setModel(GiftSendModel model){
if (0!=model.getGiftCount()) {
this.repeatCount = model.getGiftCount();
}
if (!TextUtils.isEmpty(model.getNickname())) {
anim_nickname.setText(model.getNickname());
}
if (!TextUtils.isEmpty(model.getSig())) {
anim_sign.setText(model.getSig());
}
}
public boolean isShowing(){
return isShowing;
}
public AnimatorSet startAnimation( final int repeatCount) {
hideView();
//布局飛入
ObjectAnimator flyFromLtoR = GiftAnimationUtil.createFlyFromLtoR(anim_rl, -getWidth(), 0, 400,new OvershootInterpolator());
flyFromLtoR.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
GiftFrameLayout.this.setVisibility(View.VISIBLE);
GiftFrameLayout.this.setAlpha(1f);
isShowing = true;
anim_num.setText("x " + 1);
Log.i("TAG", "flyFromLtoR A start");
}
});
//禮物飛入
ObjectAnimator flyFromLtoR2 = GiftAnimationUtil.createFlyFromLtoR(anim_gift, -getWidth(), 0, 400,new DecelerateInterpolator());
flyFromLtoR2.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
anim_gift.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationEnd(Animator animation) {
GiftAnimationUtil.startAnimationDrawable(anim_light);
anim_num.setVisibility(View.VISIBLE);
}
});
//數(shù)量增加
ObjectAnimator scaleGiftNum = GiftAnimationUtil.scaleGiftNum(anim_num, repeatCount);
scaleGiftNum.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationRepeat(Animator animation) {
anim_num.setText("x " + (++starNum));
}
});
//向上漸變消失
ObjectAnimator fadeAnimator = GiftAnimationUtil.createFadeAnimator(GiftFrameLayout.this, 0, -100, 300, 400);
fadeAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
GiftFrameLayout.this.setVisibility(View.INVISIBLE);
}
});
// 復(fù)原
ObjectAnimator fadeAnimator2 = GiftAnimationUtil.createFadeAnimator(GiftFrameLayout.this, 100, 0, 20, 0);
AnimatorSet animatorSet = GiftAnimationUtil.startAnimation(flyFromLtoR, flyFromLtoR2, scaleGiftNum, fadeAnimator, fadeAnimator2);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
starNum = 1;
isShowing = false;
}
});
return animatorSet;
我們將所有的動(dòng)畫(huà)方法都寫(xiě)到了GiftAnimationUtil中便于管理
public class GiftAnimationUtil {
/**
* @param target
* @param star 動(dòng)畫(huà)起始坐標(biāo)
* @param end 動(dòng)畫(huà)終止坐標(biāo)
* @param duration 持續(xù)時(shí)間
* @return
* 創(chuàng)建一個(gè)從左到右的飛入動(dòng)畫(huà)
* 禮物飛入動(dòng)畫(huà)
*/
public static ObjectAnimator createFlyFromLtoR(final View target, float star, float end, int duration, TimeInterpolator interpolator) {
//1.個(gè)人信息先飛出來(lái)
ObjectAnimator anim1 = ObjectAnimator.ofFloat(target, "translationX",
star, end);
anim1.setInterpolator(interpolator);
anim1.setDuration(duration);
return anim1;
}
/**
* @param target
* @return
* 播放幀動(dòng)畫(huà)
*/
public static AnimationDrawable startAnimationDrawable(ImageView target){
AnimationDrawable animationDrawable = (AnimationDrawable) target.getDrawable();
if(animationDrawable!=null) {
target.setVisibility(View.VISIBLE);
animationDrawable.start();
}
return animationDrawable;
}
/**
* @param target
* @param drawable
* 設(shè)置幀動(dòng)畫(huà)
*/
public static void setAnimationDrawable(ImageView target, AnimationDrawable drawable){
target.setBackground(drawable);
}
/**
* @param target
* @param num
* @return
* 送禮數(shù)字變化
*/
public static ObjectAnimator scaleGiftNum(final TextView target , int num){
PropertyValuesHolder anim4 = PropertyValuesHolder.ofFloat("scaleX",
1.7f, 0.8f,1f);
PropertyValuesHolder anim5 = PropertyValuesHolder.ofFloat("scaleY",
1.7f, 0.8f,1f);
PropertyValuesHolder anim6 = PropertyValuesHolder.ofFloat("alpha",
1.0f, 0f,1f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(target, anim4, anim5, anim6).setDuration(480);
animator.setRepeatCount(num);
return animator;
}
/**
* @param target
* @param star
* @param end
* @param duration
* @param startDelay
* @return
* 向上飛 淡出
*/
public static ObjectAnimator createFadeAnimator(final View target, float star, float end, int duration, int startDelay){
PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", star,end);
PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("alpha", 1.0f,0f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(target, translationY, alpha);
animator.setStartDelay(startDelay);
animator.setDuration(duration);
return animator;
}
/**
* @param animators
* @return
* 按順序播放動(dòng)畫(huà)
*/
public static AnimatorSet startAnimation(ObjectAnimator animator1, ObjectAnimator animator2, ObjectAnimator animator3, ObjectAnimator animator4, ObjectAnimator animator5){
AnimatorSet animSet = new AnimatorSet();
// animSet.playSequentially(animators);
animSet.play(animator1).before(animator2);
animSet.play(animator3).after(animator2);
animSet.play(animator4).after(animator3);
animSet.play(animator5).after(animator4);
animSet.start();
return animSet;
}
}
所有的動(dòng)畫(huà)效果均是用屬性動(dòng)畫(huà)完成,其中不僅有單個(gè)的動(dòng)畫(huà),還有組合動(dòng)畫(huà)。屬性動(dòng)畫(huà)用起來(lái)方面而且功能十分強(qiáng)大!
最后看下MainActivity中的實(shí)現(xiàn)
public class MainActivity extends AppCompatActivity {
private GiftFrameLayout giftFrameLayout1;
private GiftFrameLayout giftFrameLayout2;
List<GiftSendModel> giftSendModelList = new ArrayList<GiftSendModel>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
giftFrameLayout1 = (GiftFrameLayout) findViewById(R.id.gift_layout1);
giftFrameLayout2 = (GiftFrameLayout) findViewById(R.id.gift_layout2);
findViewById(R.id.action).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
starGiftAnimation(createGiftSendModel());
}
});
}
private GiftSendModel createGiftSendModel(){
return new GiftSendModel((int)(Math.random()*10));
}
private void starGiftAnimation(GiftSendModel model){
if (!giftFrameLayout1.isShowing()) {
sendGiftAnimation(giftFrameLayout1,model);
}else if(!giftFrameLayout2.isShowing()){
sendGiftAnimation(giftFrameLayout2,model);
}else{
giftSendModelList.add(model);
}
}
private void sendGiftAnimation(final GiftFrameLayout view, GiftSendModel model){
view.setModel(model);
AnimatorSet animatorSet = view.startAnimation(model.getGiftCount());
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
synchronized (giftSendModelList) {
if (giftSendModelList.size() > 0) {
view.startAnimation(giftSendModelList.get(giftSendModelList.size() - 1).getGiftCount());
giftSendModelList.remove(giftSendModelList.size() - 1);
}
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
其中關(guān)于緩存區(qū)的策略大家可以根據(jù)實(shí)際需求進(jìn)行定制。
以上所述是小編給大家介紹的Android開(kāi)發(fā)仿映客送禮物效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android Splash界面白屏、黑屏問(wèn)題的解決方法
- Android編程中activity啟動(dòng)時(shí)出現(xiàn)白屏、黑屏問(wèn)題的解決方法
- 設(shè)計(jì)簡(jiǎn)單的Android圖片加載框架
- Android Rsa數(shù)據(jù)加解密的介紹與使用示例
- 深入理解Android MD5數(shù)據(jù)加密
- Android仿知乎客戶(hù)端關(guān)注和取消關(guān)注的按鈕點(diǎn)擊特效實(shí)現(xiàn)思路詳解
- Android 判斷SIM卡是中國(guó)移動(dòng)\中國(guó)聯(lián)通\中國(guó)電信(移動(dòng)運(yùn)營(yíng)商)
- Android開(kāi)發(fā)仿掃一掃實(shí)現(xiàn)拍攝框內(nèi)的照片功能
- Android設(shè)計(jì)模式系列之工廠(chǎng)方法模式
- Android app啟動(dòng)時(shí)黑屏或者白屏的原因及解決辦法
相關(guān)文章
Flutter 狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Flutter 狀態(tài)管理的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Android 中 viewpager 滑動(dòng)指示器的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了android 中 viewpager 滑動(dòng)指示器,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
android 如何獲取MCC/MNC控制小區(qū)廣播的開(kāi)啟
獲取MCC/MNC以便控制小區(qū)廣播的開(kāi)啟下面針對(duì)于單卡、雙卡,為大家詳細(xì)介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下哈2013-06-06
Android?ASM插樁探索實(shí)戰(zhàn)詳情
這篇文章主要介紹了Android?ASM插樁探索實(shí)戰(zhàn)詳情,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09
Android實(shí)現(xiàn)返回拍攝的圖片功能實(shí)例
這篇文章主要介紹了Android實(shí)現(xiàn)返回拍攝的圖片功能,以實(shí)例形式較為詳細(xì)的分析了Android返回拍攝圖片功能的具體步驟與實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Android Drawable必備知識(shí)小結(jié)
這篇文章主要為大家詳細(xì)了Android Drawable必備基礎(chǔ)知識(shí) ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
Android定制自己的EditText輕松改變底線(xiàn)顏色
這篇文章主要介紹了Android如何定制自己的EditText,如何輕松改變底線(xiàn)顏色,感興趣的小伙伴們可以參考一下2015-12-12
Android 反射注解與動(dòng)態(tài)代理綜合使用詳解
本篇文章主要介紹了Android 反射注解與動(dòng)態(tài)代理綜合使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
關(guān)于Android冷啟動(dòng)耗時(shí)優(yōu)化詳解
大家好,本篇文章主要講的是關(guān)于Android冷啟動(dòng)耗時(shí)優(yōu)化詳解,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話(huà)記得收藏一下2022-01-01

