CardView與半徑的共享元素轉換

我一直在解決這個問題幾個星期，我仍然無法解決這個問題。CardView與半徑的共享元素轉換

所以，我有一個CardView，包含一個帶有ImageView的LinearLayout。

沒有這種半徑共享元素轉換無縫工作。但是，當我向該CardView添加半徑（app：cardCornerRadius =「25dp」）時，共享元素轉換看起來很難看，因爲它先移除半徑，然後開始動畫。

1方法：ObjectAnimator

創建ObjectAnimator動畫卡半徑值，動畫結束後開始它的過渡。

ObjectAnimator animator = ObjectAnimator 
      .ofFloat(view, "radius", AppUtil.dpAsPixel(this, 25), 0); 
animator.setDuration(150); 
animator.addListener(// start new Activity with Transition); 
animator.start();

這可行，但它看起來不太好，因爲過渡等待動畫在開始過渡之前完成。我需要的是在轉換到新的Activity時，半徑是動畫效果（類似於TransitionSet中的ORDERING_TOGETHER）。

第二個方法 - ChangeImageTransform

我讀過StackOverflow post使用變換類像ChangeImageTransform和ChangeBounds。

我做了定義我的應用程序的主題像有人建議（my_transition包含ChangeImageTransform transitionSet）

<item name="android:windowSharedElementEnterTransition">@transition/my_transition</item> 
<item name="android:windowSharedElementExitTransition">@transition/my_transition</item>

但它不工作..

3方法 - 天真

我最後一次嘗試是強制目標ImageView的半徑爲25dp。因爲也許我的CardView被轉換成方形，因爲目標ImageView是方形的，但正如你猜測的那樣，它不起作用。

第四屆方法 - 不使用CardView

正如你所看到的，我使用的企鵝圖像，並使用CardView做出的半徑。我可以通過使用圖像轉換使圖像四捨五入，但我仍然認爲這不是創建共享元素過渡的正確方法。

這裏是我的問題，有沒有辦法讓共享元素過渡使用CardView半徑無需先移除半徑即可工作？

來源

2017-02-16 aldok

你能顯示轉換文件嗎？你有什麼看法指定過渡？ – azizbekian

@azizbekian在這裏你去https://gist.github.com/aldoKelvianto/ebc337d6766506171c2c285e97278805，沒有什麼特別的xml和共享元素轉換代碼 – aldok

這是你的xml。但是，您在哪裏指定要轉換的iD視圖？ – azizbekian

我終於能夠解決它。對於那些有興趣的人，這裏是如何：

爲什麼它在開始轉換之前刪除半徑？因爲目標ImageView沒有任何半徑。

activity_detail。XML

<ImageView 
    android:id="@+id/iv_image_cover" 
    android:layout_width="match_parent" 
    android:layout_height="250dp" 
    android:scaleType="centerCrop" 
    android:src="@{animal.imageRes}" 
    android:transitionName="animalImage" 
    tools:src="@drawable/acat" 
/>

當我使用CardView無半徑，它不是noticable，但它居然成了目標共享視圖。

要實現半徑到無半徑轉換，您必須將目標共享視圖設置爲四捨五入。我只是用卡片視圖（半徑）來包裝它。

activity_detail.xml

<android.support.v7.widget.CardView 
    android:id="@+id/card" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:transitionName="card" 
    app:cardCornerRadius="25dp" 
> 

    <ImageView 
     android:id="@+id/iv_image_cover" 
     android:layout_width="match_parent" 
     android:layout_height="250dp" 
     android:scaleType="centerCrop" 
     android:src="@{animal.imageRes}" 
     android:transitionName="animalImage" 
     tools:src="@drawable/acat" 
    /> 

</android.support.v7.widget.CardView>

一定要改變你的makeSceneTransition使用「一卡通」，而不是「animalImage」

ListActivity.class

ActivityOptionsCompat option = ActivityOptionsCompat 
.makeSceneTransitionAnimation(ListActivity.this, cardView, "card"); 

startActivity(intent, option.toBundle());

在DetailActivity中，您可以在轉換開始時啓動半徑動畫。

DetailActivity.java

@Override 
protected void onCreate(@Nullable Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    getWindow().getSharedElementEnterTransition() 
     .addListener(new Transition.TransitionListener() { 
      @Override 
      public void onTransitionStart(Transition transition) { 
       ObjectAnimator animator = ObjectAnimator 
        .ofFloat(activityDetailBinding.card, "radius", 0); 
       animator.setDuration(250); 
       animator.start(); 
      } 
     }); 
}

享受平滑過渡

注：要旨爲layout和activities

來源

2017-02-19 18:13:04 aldok

CardView與半徑的共享元素轉換

回答

相關問題