00851B11.gif
二话不说，上代码效果图
GIF.gif
今天花了一天时间弄这个效果，本来一会就可以弄好的，可能是脑壳铁。唉
/**
* 文字上线轮播组件
* author：bigbear
*
* 实现思路：
* 1、单个动画顺序：显示动画-> 开始动画-> 结束动画 循环
* 2、前一个组件执行完显示动画后；在开始动画监听中，开始时调用下一个组件的显示动画，开始动画执行完完调用自身结束动画，并调用下一个组件的开始动画
* 一次成为一个闭环循环。
*
*/
public class RollTextView extends RelativeLayout {
Context mContext;
AnimationSet showAnim, startAnimOne, startAnimTwo, startAnimThree, endAnim;
TextView mRollTextViewOne, mRollTextViewTwo, mRollTextViewThree;
List<String> mData = null;
int index = 0;
public RollTextView(Context context) {
super(context);
this.mContext = context;
initView();
initData();
}
public RollTextView(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
initView();
initData();
}
public RollTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView();
initData();
}
/**
* 初始化视图
*/
private void initView() {
View view = LayoutInflater.from(mContext).inflate(R.layout.widget_roll_text_view, this);
mRollTextViewOne = view.findViewById(R.id.mRollTextViewOne);
mRollTextViewTwo = view.findViewById(R.id.mRollTextViewTwo);
mRollTextViewThree = view.findViewById(R.id.mRollTextViewThree);
}
public void setData(List<String> data){
this.mData = data;
}
/**
* 初始化数据
*/
private void initData() {
AlphaAnimation aaShow = new AlphaAnimation(0, 0.4f);
aaShow.setDuration(2000);
TranslateAnimation taShow = new TranslateAnimation(15, 15, 0, 0);
taShow.setDuration(2000);
ScaleAnimation saShow = new ScaleAnimation(0.9f, 0.9f, 0.9f, 0.9f);
saShow.setDuration(2000);
AlphaAnimation aaStart = new AlphaAnimation(0.4f, 1);
aaStart.setDuration(3000);
AlphaAnimation aaEnd = new AlphaAnimation(1, 0.4f);
aaEnd.setDuration(3000);
TranslateAnimation taStart = new TranslateAnimation(15, 0, 0, 60);
taStart.setDuration(3000);
TranslateAnimation taEnd = new TranslateAnimation(0, 15, 60, 120);
taEnd.setDuration(3000);
ScaleAnimation saStart = new ScaleAnimation(0.9f, 1, 0.9f, 1);
saStart.setDuration(3000);
ScaleAnimation saEnd = new ScaleAnimation(1, 0.9f, 1, 0.9f);
saEnd.setDuration(3000);
// 显示动画
showAnim = new AnimationSet(true);
showAnim.setDuration(3000);
showAnim.setStartOffset(1000);
showAnim.setFillAfter(true);
showAnim.addAnimation(aaShow);
showAnim.addAnimation(taShow);
showAnim.addAnimation(saShow);
// 结束动画
endAnim = new AnimationSet(true);
endAnim.setDuration(3000);
endAnim.addAnimation(aaEnd);
endAnim.addAnimation(taEnd);
endAnim.addAnimation(saEnd);
// 第一个组件开始动画
startAnimOne = new AnimationSet(true);
startAnimOne.setDuration(3000);
startAnimOne.addAnimation(aaStart);
startAnimOne.addAnimation(taStart);
startAnimOne.addAnimation(saStart);
startAnimOne.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
mRollTextViewTwo.setText(getData());
mRollTextViewTwo.startAnimation(showAnim);
}
@Override
public void onAnimationEnd(Animation animation) {
mRollTextViewOne.startAnimation(endAnim);
mRollTextViewTwo.startAnimation(startAnimTwo);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
// 第二个组件开始动画
startAnimTwo = new AnimationSet(true);
startAnimTwo.setDuration(3000);
startAnimTwo.addAnimation(aaStart);
startAnimTwo.addAnimation(taStart);
startAnimTwo.addAnimation(saStart);
startAnimTwo.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
mRollTextViewThree.setText(getData());
mRollTextViewThree.startAnimation(showAnim);
}
@Override
public void onAnimationEnd(Animation animation) {
mRollTextViewTwo.startAnimation(endAnim);
mRollTextViewThree.startAnimation(startAnimThree);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
// 第三个组件开始动画
startAnimThree = new AnimationSet(true);
startAnimThree.setDuration(3000);
startAnimThree.addAnimation(aaStart);
startAnimThree.addAnimation(taStart);
startAnimThree.addAnimation(saStart);
startAnimThree.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
mRollTextViewOne.setText(getData());
mRollTextViewOne.startAnimation(showAnim);
}
@Override
public void onAnimationEnd(Animation animation) {
mRollTextViewThree.startAnimation(endAnim);
mRollTextViewOne.startAnimation(startAnimOne);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
/**
* 启动
*/
public void start(){
mRollTextViewOne.setText(getData());
mRollTextViewOne.startAnimation(startAnimOne);
}
/**
* 获取显示的数据
* @return s
*/
private String getData(){
return "烤鸡翅膀，我最爱吃" + index++;
}
}
当然少不了widget_roll_text_view.xml 代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:gravity="center_horizontal"
android:layout_height="100dp">
<TextView
android:id="@+id/mRollTextViewOne"
android:text="烤鸡翅膀，我最爱吃1"
android:textSize="14sp"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/mRollTextViewTwo"
android:text="烤鸡翅膀，我最爱吃2"
android:textSize="14sp"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/mRollTextViewThree"
android:text="烤鸡翅膀，我最爱吃3"
android:textSize="14sp"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
网友评论