使用TransitionDrawable實(shí)現(xiàn)多張圖片淡入淡出效果
歡迎界面想做出廣告頁自動輪播的效果,圖片切換的方式用淡入淡出的方式。這個在h5頁面很容易就實(shí)現(xiàn)了,但是在android界面中,很容易就想到了動畫animation動畫來實(shí)現(xiàn),但是發(fā)現(xiàn)使用動畫的話,這種方式看起來不會自然,因?yàn)樵谡{(diào)用statAnimation的時候因?yàn)閳D片已經(jīng)顯示了,這樣再硬生生的播放一次動畫其實(shí)會導(dǎo)致細(xì)微的閃爍效果。后來發(fā)現(xiàn)android中自帶了TransitionDrawable類可以很輕松地實(shí)現(xiàn)這個效果,但是會有局限性。
先上效果圖:
一、兩張圖片的切換效果,輕松實(shí)現(xiàn)
//講需要切換的兩張圖片直接給TransitionDrawable對象 TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{getResources().getDrawable(R.drawable.advertiseone),getResources().getDrawable(R.drawable.advertisetwo)}); //一樣用 imgAdvertise.setImageDrawable(transitionDrawable); //切換圖片的時間間隔 transitionDrawable.startTransition(3000);
二、切換多張圖片
實(shí)現(xiàn)思路,通過開啟一個線程(死循環(huán)),每隔一段時間發(fā)送消息到UI主線程中替換主線程中的transitionDrawable對象中的圖片就可以了,需要用到handler。這里實(shí)現(xiàn)在廣告倒計時中無限循環(huán)圖片切換的次數(shù)
package com.coofond.carservice; import android.content.Intent; import android.graphics.drawable.Drawable; import android.graphics.drawable.TransitionDrawable; import android.os.Build; import android.os.Bundle; import android.os.CountDownTimer; import android.os.Handler; import android.os.Message; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import com.coofond.carservice.mine.ui.LoginAct; /** * Created by IBM on 2016/10/7. */ public class WelcomeAct extends AppCompatActivity { private TextView tvTimecount; private ImageView imgAdvertise; private int adTime = 6000;//倒計時秒數(shù) private int timeInterval = 1000;//倒計時間隔 private CountDownTimer mTimer;//計時器 private int change = 0;//記錄下標(biāo) private int[] ids = new int[]{R.drawable.advertiseone, R.drawable.advertisetwo, R.drawable.advertisethree}; private Drawable[] drawables;//圖片集合 private Thread mThread;//線程 private boolean mThreadFlag = true;//線程結(jié)束標(biāo)志符 @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.act_welcome); initView(); initData(); initEvent(); } //定義hander private Handler mHandler = new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { int duration = msg.arg1; TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{drawables[change % ids.length], drawables[(change + 1) % ids.length]}); change++;//改變標(biāo)識位置 imgAdvertise.setImageDrawable(transitionDrawable); transitionDrawable.startTransition(duration); return false; } }); //開啟線程發(fā)送消息,讓transition一直在改變 private class MyRunnable implements Runnable { @Override public void run() { //這個while(true)是做死循環(huán) while (mThreadFlag) { int duration = 1000;//改變的間隔 Message message = mHandler.obtainMessage(); message.arg1 = duration; mHandler.sendMessage(message); try { Thread.sleep(duration); //隔duration秒發(fā)送一次 } catch (InterruptedException e) { e.printStackTrace(); } } } } private void initView() { tvTimecount = (TextView) findViewById(R.id.tv_advert); imgAdvertise = (ImageView) findViewById(R.id.iv_advetise); //填充圖片 drawables=new Drawable[ids.length]; for (int i = 0; i < ids.length; i++) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { drawables[i] = getDrawable(ids[i]); } else { drawables[i] = getResources().getDrawable(ids[i]); } } } private void initData() { // 初始化計時器,第一個參數(shù)是共要倒計時的秒數(shù),第二個參數(shù)是倒計時的間隔 mTimer = new CountDownTimer(adTime, timeInterval) { // 倒計時開始時要做的事情,參數(shù)m是直到完成的時間 @Override public void onTick(long millisUntilFinished) { tvTimecount.setText("" + millisUntilFinished / 1000 + "s跳過廣告"); } // 結(jié)束計時后要做的工作 @Override public void onFinish() { jumpActivity(); } }; //開啟計時器 mTimer.start(); //開啟線程,改變transition,切換圖片 mThread= new Thread(new MyRunnable()); mThread.start(); } private void initEvent() { tvTimecount.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mTimer.cancel(); jumpActivity(); } }); } // 跳轉(zhuǎn)頁面 private void jumpActivity() { //如果還沒結(jié)束當(dāng)前的頁面,就結(jié)束 if (!isFinishing()) { finish(); } Intent it = new Intent(WelcomeAct.this, LoginAct.class); startActivity(it); } @Override protected void onDestroy() { super.onDestroy(); //mThread.stop(); 不推薦使用 mThreadFlag=false;//結(jié)束線程 } }
記錄個小tips:如何比較優(yōu)雅地結(jié)束一個線程,只要在while條件中設(shè)置自己標(biāo)識符,在需要結(jié)束的地方把標(biāo)識符改為false就可以了,基礎(chǔ)補(bǔ)上。
總結(jié):transitionDrawable是切換兩張圖片淡入淡出效果的一個類。如果要切換多張圖片,那么就相當(dāng)于不斷替換它的膠卷就可以了。因?yàn)榻痪碓赨I主線程就準(zhǔn)備好了,所以需要用到handler進(jìn)行通信,然后開啟線程輪詢。因?yàn)閷?shí)現(xiàn)的是廣告歡迎頁,倒計時一般只有3-5s,所以輪詢的次數(shù)也不會太多。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android模仿To圈兒個人資料界面層疊淡入淡出顯示效果
- Android使用TransitionDrawable漸變切換多張圖片
- Android實(shí)現(xiàn)滑動屏幕切換圖片
- android控件實(shí)現(xiàn)多張圖片漸變切換
- Android開發(fā)之使用ViewPager實(shí)現(xiàn)圖片左右滑動切換效果
- Android編程單擊圖片實(shí)現(xiàn)切換效果的方法
- Android中ViewPager組件的基本用法及實(shí)現(xiàn)圖片切換的示例
- Android實(shí)現(xiàn)圖片輪播切換實(shí)例代碼
- Android自定義ImageView實(shí)現(xiàn)點(diǎn)擊兩張圖片切換效果
- Android應(yīng)用中圖片瀏覽時實(shí)現(xiàn)自動切換功能的方法詳解
相關(guān)文章
Android 自定義底部上拉控件的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Android 自定義底部上拉控件的實(shí)現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01Android開發(fā)之手勢檢測及通過手勢實(shí)現(xiàn)翻頁功能的方法
這篇文章主要介紹了Android開發(fā)之手勢檢測及通過手勢實(shí)現(xiàn)翻頁功能的方法,結(jié)合實(shí)例形式分析了Android GestureDetector類實(shí)現(xiàn)手勢檢測功能的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09OpenGL Shader實(shí)例分析(7)雪花飄落效果
這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實(shí)例分析第7篇,實(shí)現(xiàn)雪花飄落效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-02-02Android開發(fā)實(shí)戰(zhàn)之漂亮的ViewPager引導(dǎo)頁
這篇文章主要介紹了Android開發(fā)實(shí)戰(zhàn)中漂亮ViewPager引導(dǎo)頁的制作過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08Android開發(fā)設(shè)置RadioButton點(diǎn)擊效果的方法
這篇文章主要介紹了Android開發(fā)設(shè)置RadioButton點(diǎn)擊效果的方法,詳細(xì)分析了Android開發(fā)中RadioButton屬性功能及相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-06-06android實(shí)現(xiàn)貝塞爾曲線之波浪效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)貝塞爾曲線之波浪效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06