服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - 使用TransitionDrawable实现多张图片淡入淡出效果

使用TransitionDrawable实现多张图片淡入淡出效果

2022-07-29 10:50trebleZ Android

这篇文章主要为大家详细介绍了使用TransitionDrawable实现多张图片淡入淡出效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

欢迎界面想做出广告页自动轮播的效果,图片切换的方式用淡入淡出的方式。这个在h5页面很容易就实现了,但是在android界面中,很容易就想到了动画animation动画来实现,但是发现使用动画的话,这种方式看起来不会自然,因为在调用statAnimation的时候因为图片已经显示了,这样再硬生生的播放一次动画其实会导致细微的闪烁效果。后来发现android中自带了TransitionDrawable类可以很轻松地实现这个效果,但是会有局限性。

先上效果图:

使用TransitionDrawable实现多张图片淡入淡出效果

一、两张图片的切换效果,轻松实现

?
1
2
3
4
5
6
//讲需要切换的两张图片直接给TransitionDrawable对象
TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{getResources().getDrawable(R.drawable.advertiseone),getResources().getDrawable(R.drawable.advertisetwo)});
//一样用
imgAdvertise.setImageDrawable(transitionDrawable);
//切换图片的时间间隔
transitionDrawable.startTransition(3000);

二、切换多张图片

实现思路,通过开启一个线程(死循环),每隔一段时间发送消息到UI主线程中替换主线程中的transitionDrawable对象中的图片就可以了,需要用到handler。这里实现在广告倒计时中无限循环图片切换的次数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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;//倒计时秒数
  private int timeInterval = 1000;//倒计时间隔
  private CountDownTimer mTimer;//计时器
  private int change = 0;//记录下标
  private int[] ids = new int[]{R.drawable.advertiseone, R.drawable.advertisetwo, R.drawable.advertisethree};
  private Drawable[] drawables;//图片集合
  private Thread mThread;//线程
  private boolean mThreadFlag = true;//线程结束标志符
 
  @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++;//改变标识位置
      imgAdvertise.setImageDrawable(transitionDrawable);
      transitionDrawable.startTransition(duration);
      return false;
    }
  });
 
  //开启线程发送消息,让transition一直在改变
  private class MyRunnable implements Runnable {
    @Override
    public void run() {
      //这个while(true)是做死循环
      while (mThreadFlag) {
        int duration = 1000;//改变的间隔
        Message message = mHandler.obtainMessage();
        message.arg1 = duration;
        mHandler.sendMessage(message);
        try {
          Thread.sleep(duration);
          //隔duration秒发送一次
        } 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() {
    // 初始化计时器,第一个参数是共要倒计时的秒数,第二个参数是倒计时的间隔
    mTimer = new CountDownTimer(adTime, timeInterval) {
      // 倒计时开始时要做的事情,参数m是直到完成的时间
      @Override
      public void onTick(long millisUntilFinished) {
        tvTimecount.setText("" + millisUntilFinished / 1000 + "s跳过广告");
      }
      // 结束计时后要做的工作
      @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();
      }
    });
  }
 
  // 跳转页面
  private void jumpActivity() {
    //如果还没结束当前的页面,就结束
    if (!isFinishing()) {
      finish();
    }
    Intent it = new Intent(WelcomeAct.this, LoginAct.class);
    startActivity(it);
  }
 
  @Override
  protected void onDestroy() {
    super.onDestroy();
    //mThread.stop(); 不推荐使用
    mThreadFlag=false;//结束线程
 
  }
}

记录个小tips:如何比较优雅地结束一个线程,只要在while条件中设置自己标识符,在需要结束的地方把标识符改为false就可以了,基础补上。

总结:transitionDrawable是切换两张图片淡入淡出效果的一个类。如果要切换多张图片,那么就相当于不断替换它的胶卷就可以了。因为交卷在UI主线程就准备好了,所以需要用到handler进行通信,然后开启线程轮询。因为实现的是广告欢迎页,倒计时一般只有3-5s,所以轮询的次数也不会太多。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/z_zT_T/article/details/52761432

延伸 · 阅读

精彩推荐