怎么在Android中實(shí)現(xiàn)圖片從左到右逐漸消失

怎么在Android中實(shí)現(xiàn)圖片從左到右逐漸消失？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

AnimationActivity:

package com.example.duoyi.clientaidl;
 
import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
 
import com.example.duoyi.AnimationAdapter;
 
import java.util.ArrayList;
import java.util.List;
 
public class AnimationActivity extends AppCompatActivity {
 
 private static final int MAX_COUNT = 100;
 private static final String TAG = "AnimationActivity";
 
 RecyclerView rv;
 CardView cv;
 ImageView image;
 ObjectAnimator animator;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_animation);
 
  rv = findViewById(R.id.itemRv);
  cv = findViewById(R.id.expand);
  image = findViewById(R.id.insect);
 
  List<String> list = new ArrayList<>();
  for (int i = 0; i < MAX_COUNT; i++) {
   list.add("世界很美好，隊(duì)形走起" + i);
  }
 
  LinearLayoutManager manager = new LinearLayoutManager(this);
  manager.setOrientation(RecyclerView.VERTICAL);
  AnimationAdapter adapter = new AnimationAdapter(list, this);
  rv.setLayoutManager(manager);
  rv.setAdapter(adapter);
  rv.scrollToPosition(list.size() - 1);
 
  image.setTranslationX(dp2px(50));
 
  //監(jiān)聽(tīng)recyclerview的滑動(dòng)事件
  rv.addOnScrollListener(new RecyclerView.OnScrollListener() {
   @Override
   public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
    super.onScrollStateChanged(recyclerView, newState);
    Log.i(TAG, "current scroll state = " + newState);
    image.setTranslationX(dp2px(-1));
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
     //第一種動(dòng)畫方式
//     image.animate()
//       .translationX(dp2px(50))
//       .setDuration(1500)
//       .start();
     //第二種動(dòng)畫方式
     animator = ObjectAnimator.ofFloat(image, "translationX",
       dp2px(50));
     animator.setDuration(1500);
     animator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {
 
      }
 
      @Override
      public void onAnimationEnd(Animator animation) {
       //當(dāng)圖片發(fā)生點(diǎn)擊時(shí)可以通過(guò)下面代碼將圖片復(fù)位到原來(lái)位置
       //否則響應(yīng)點(diǎn)擊事件的圖片可能會(huì)顯示不全，不響應(yīng)點(diǎn)擊的忽略
       //image.setTranslationX(dp2px(-1));
      }
 
      @Override
      public void onAnimationCancel(Animator animation) {
 
      }
 
      @Override
      public void onAnimationRepeat(Animator animation) {
 
      }
     });
     animator.start();
    }
   }
  });
 
  image.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    if (animator != null && animator.isRunning()) {
     animator.cancel();
    }
    image.setImageResource(R.drawable.insect);
   }
  });
 }
 
 public int dp2px(int dip) {
  int dpi = getResources().getDisplayMetrics().densityDpi;
  return dip * (dpi / 160);
 }
}

activity_animator.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".AnimationActivity">
 
 <android.support.v7.widget.RecyclerView
  android:id="@+id/itemRv"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
 
 <android.support.v7.widget.CardView
  android:id="@+id/expand"
  android:layout_width="70dp"
  android:layout_height="30dp"
  android:layout_alignParentEnd="true"
  android:layout_marginTop="40dp"
  android:layout_marginEnd="30dp"
  app:cardBackgroundColor="#00000000"
  app:cardCornerRadius="15dp"
  app:cardElevation="0dp">
 
  <ImageView
   android:id="@+id/insect"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_gravity="end"
   android:scaleType="fitXY"
   android:src="@drawable/insect" />
 
 </android.support.v7.widget.CardView>
 
 
</RelativeLayout>

item_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="50dp"
 tools:context=".AnimationActivity">
 
 <TextView
  android:textSize="16sp"
  android:id="@+id/content"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="hello World" />
 
 
</RelativeLayout>

AnimatorAdapter.java:

package com.example.duoyi;
 
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import com.example.duoyi.clientaidl.AnimationActivity;
import com.example.duoyi.clientaidl.R;
 
import java.util.List;
 
public class AnimationAdapter extends RecyclerView.Adapter<AnimationAdapter.AnimationViewHolder> {
 
 private List<String> list;
 private AnimationActivity context;
 
 public AnimationAdapter(List<String> list, AnimationActivity context) {
  this.list = list;
  this.context = context;
 }
 
 @Override
 public AnimationViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
  View view = LayoutInflater.from(context).inflate(R.layout.item_anim, viewGroup, false);
  return new AnimationViewHolder(view);
 }
 
 @Override
 public void onBindViewHolder(AnimationViewHolder holder, int position) {
  String content = list.get(position);
  holder.content.setText(content);
 }
 
 @Override
 public int getItemCount() {
  return list.size();
 }
 
 static class AnimationViewHolder extends RecyclerView.ViewHolder {
 
  TextView content;
 
  AnimationViewHolder(View view) {
   super(view);
   content = view.findViewById(R.id.content);
  }
 }
}

三、邏輯分析

首先實(shí)現(xiàn)的效果是圖片從做到右顯示，那我們就使用平移動(dòng)畫，讓圖片從左到右移動(dòng)消失，所以就在需要顯示ImageView嵌套一層父容器，這樣圖片不斷移出容器的范圍內(nèi)就會(huì)造成一種圖片從左到右消失的效果 

需求：父容器需設(shè)置為圓角顯示

如果需要實(shí)現(xiàn)ImageView的父容器為圓角布局的話，那就采用CardView，通過(guò)改變其屬性

app:cardCornerRadius="15dp"

實(shí)現(xiàn)，不要使用其他諸如LinearLayout的父容器，設(shè)置其backgroud為一個(gè)圓角的drawable方式實(shí)現(xiàn)，這樣的話內(nèi)部的圖片如果是矩形，即時(shí)你設(shè)置了父容器為圓角的，但是內(nèi)部圖片的顯示還是會(huì)超出圓角的范圍顯示

需求：圖片消失的動(dòng)畫中響應(yīng)點(diǎn)擊事件，完整顯示另一張圖片

這個(gè)實(shí)現(xiàn)我們首先需要在圖片的點(diǎn)擊事件中判斷當(dāng)前動(dòng)畫是否還是運(yùn)行isRunning()，如果運(yùn)行的話調(diào)用animator的cancel()方法取消動(dòng)畫，然后進(jìn)行圖片的位置的復(fù)位；如果我們不進(jìn)行復(fù)位操作，此時(shí)ImageView的位置由于平移動(dòng)畫發(fā)生改變，當(dāng)我們顯示另一張圖片可能會(huì)發(fā)生顯示不全情況

當(dāng)動(dòng)畫終止(可能自然終止，也可能調(diào)用了動(dòng)畫的cance()方法)，會(huì)響應(yīng)其結(jié)束的監(jiān)聽(tīng)方法，然后我們?cè)谠摲椒◤?fù)位圖片的位置即可：

animator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {
      }
      @Override
      public void onAnimationEnd(Animator animation) {
       //當(dāng)圖片發(fā)生點(diǎn)擊時(shí)可以通過(guò)下面代碼將圖片復(fù)位到原來(lái)位置
       //否則響應(yīng)點(diǎn)擊事件的圖片可能會(huì)顯示不全，不響應(yīng)點(diǎn)擊的忽略
       //image.setTranslationX(dp2px(-1));
      }
      @Override
      public void onAnimationCancel(Animator animation) {
      }
      @Override
      public void onAnimationRepeat(Animator animation) {
      }
     });

動(dòng)畫實(shí)現(xiàn)的兩種方式:

直接通過(guò)組件的animator()方式可以實(shí)現(xiàn)動(dòng)畫的鏈?zhǔn)秸{(diào)用，并且可以通過(guò)其withEndAction(）或者withStartAction()方法在動(dòng)畫啟動(dòng)和結(jié)束的時(shí)候執(zhí)行一些邏輯，該方式可以不需要調(diào)用其start()就能執(zhí)行，因?yàn)槠鋾?huì)在屏幕刷新的時(shí)候會(huì)自動(dòng)執(zhí)行 

//第一種動(dòng)畫方式
image.animate()
  .translationX(dp2px(50))
  .setDuration(1500)
  .start();

下面這種方式就是比較老實(shí)的方式，但是我們可以通過(guò)將其賦值給一個(gè)全局變量進(jìn)行動(dòng)畫的操控(pause() cancel())

animator = ObjectAnimator.ofFloat(image, "translationX",
       dp2px(50));
animator.setDuration(1500);
animato.start();

關(guān)于怎么在Android中實(shí)現(xiàn)圖片從左到右逐漸消失問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。