标签: android-transitions

我有以下问题:

我正试图从FragmentA 过渡到FragmentB.这些片段之间有一个共享元素,Button以及其他形式View's(参见布局).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:flipper="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.mypackage.view.IndicatorViewFlipper
        android:transitionGroup="true"
        android:id="@+id/intro_viewflipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        flipper:indicatorColor="@color/white"
        flipper:indicatorMargin="4dp"
        flipper:indicatorRadius="4dp"
        flipper:indicatorBarMargin="104dp"/>

    <Button
        android:id="@+id/account_create_btn"
        style="?android:attr/borderlessButtonStyle"
        android:textColor="@color/white"
        android:layout_width="match_parent"
        android:layout_height="@dimen/button_standard_height"
        android:layout_above="@+id/txt_already_account"
        android:background="@drawable/button_yellow_selector"
        android:transitionName="create_account"
        android:text="@string/account_create_btn"
        android:textSize="24sp"
        android:textAllCaps="false" />

    <TextView
        android:id="@+id/txt_already_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_above="@+id/account_login_btn"
        android:layout_marginTop="24dp"
        android:text="@string/account_welcome_already_account"/>

    <Button
        android:id="@+id/account_login_btn"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="@dimen/button_standard_height"
        android:layout_marginTop="8dp"
        android:layout_alignParentBottom="true"
        android:transitionName="login"
        android:background="@drawable/button_blue_selector"
        android:textColor="@color/white"
        android:textSize="24sp"
        android:textAllCaps="false"
        android:text="@string/account_create_login_btn"/>

</RelativeLayout>

我要做的是让Fragment 除了共享元素之外的所有内容,转换(向左滑动)并让所有内容形成FragmentB,除了共享元素从右边滑入.在此内容转换期间,我希望共享元素保持其原始位置,直到内容转换完成,然后让它滑动到FragmentB中的新位置.

最后一个行为是出错的地方:一旦我在FragmentA中开始退出转换,共享元素就会消失并从右边滑入,内容转换为FragmentB.如果我不添加任何退出,共享元素的行为是正确的/输入过渡.

代码(在FragmentA中):

Fragment …

我有一个回收视图来显示所有照片缩略图项目.单击项目时,我将此项目中的imageview转换用于详细活动.问题是图像源是由UIL从互联网获得的.而且有时(并不总是)图像不会重新加载正确的大小是这样的:

 // on view holder item click
  final Pair<View, String>[] pairs = TransitionHelper.createSafeTransitionParticipants(this, false,
                    new Pair<>(((ItemViewHolder) viewHolder).thumbnail, getString(R.string.TransitionName_Profile_Image)),
                    new Pair<>(((ItemViewHolder) viewHolder).tvName, getString(R.string.TransitionName_Profile_Name)));

  ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs);
  startActivityForResult(intent, requestCode, transitionActivityOptions.toBundle());

细节活动

// try to post pone transition until UIL load finish
ActivityCompat.postponeEnterTransition(this);
getSupportFragmentManager().beginTransaction().replace(R.id.layoutContent, new DetailFragment()).commit();

片段细节

ImageLoader.getInstance().displayImage(url, imageViewDetail, new ImageLoadingListener() {
                @Override
                public void onLoadingStarted(String imageUri, View view) {

                }

                @Override
                public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                    finishAnimation();
                }

                @Override
                public void onLoadingComplete(String …

我正在开发一个概念验证,我在TableLayout中有一些自定义视图.单击其中一个视图时,我想要为扩展为新活动的视图设置动画.我想要达到的效果类似于这里看到的效果.

从我的研究来看,似乎这样做的方法是使用共享元素Transitions.但是,我无法让它正常工作,我想知道是否因为我使用自己的自定义视图.

具体来说,衰落正在发生,但缩放和翻译动作不是.检查下面的GIF,看看我在哪里.在示例中,我单击左上角的圆圈,我想将其转换为新活动中的整个圆圈.按下后退按钮时也会出现此问题.

我认为这是不正确的,因为必须绘制视图,但有没有办法进一步自定义我的视图以使其工作？我发现的这种转换的所有示例都包含ImageViews,Buttons和TextViews.

以下是相关来源.我的自定义视图很大,不包含任何特殊代码,只是覆盖onDraw()和onMeasure().

MainActivity.java

package com.rscottcarson.circleschedulertest;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Toast;
public class MainActivity extends Activity {

    private View view1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view1 = findViewById(R.id.circle1);

        view1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent intent = new Intent(MainActivity.this, DetailActivity.class);
                // create the transition animation - the images in the layouts
                // of both activities …

我希望我的项目ListView扩展为Fragment/ Activity显示项目详细信息.

这是一个显示动画的示例 - https://dl.dropboxusercontent.com/u/75404011/inbox-animation.mp4

我看了像垃圾收集器项目开放动画的谷歌收件箱,但无法感知到本质.

有人能给我一些指示吗？

我正在尝试实现共享元素转换,当ImageViews一个屏幕上的2 转到下一个屏幕时.其中一个图像centerCrop在两个屏幕上都有scaleType .我面临的问题是,当转换开始时,图像将在其动画到下一个屏幕之前进入原始大小(裁剪之前).当它到达下一个屏幕时,它以原始大小到达它,然后它被裁剪到目标图像视图.

整个体验并不顺畅,真正让人眼前一亮.我使用的代码是:

public void animateIntent(View view, ArticleCoverData articleCoverData) {
    Intent intent = new Intent(mActivity, ReaderActivity.class);
    intent.putExtra(Constants.ARTICLE_DATA, articleCoverData);

    // The view animation will start from
    View coverStartView = view.findViewById(R.id.coverImage);
    View coverDiagonalDecoratorStartView = view.findViewById(R.id.diagonal_image_decorator);

    Pair<View, String> pair1 = Pair.create(coverStartView, mActivity.getString(R.string.transition_timeline_cover_image_to_reader_name));
    Pair<View, String> pair2 = Pair.create(coverDiagonalDecoratorStartView, mActivity.getString(R.string.transition_timeline_cover_image_diagonal_decorator_to_reader_name));

    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity, pair1, pair2);
    ActivityCompat.startActivity(mActivity, intent, options.toBundle());
}

使用Glide以下代码从Web加载图像:

Glide.with(mActivity).load(articleCoverData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).dontTransform().into(holder.coverImage);

在接收方,图像加载如下:

Glide.with(mContext).load(mData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).into(mCoverImageView);

在我定义的样式中:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Add this line -->
    <item name="android:windowContentTransitions">true</item>

    <!-- This is …

我已经在这个问题上工作了好几个星期,我仍然无法解决这个问题.

所以,我有一个包含带有ImageView的LinearLayout的CardView.

没有该半径,Shared Element Transition可以无缝地工作.但是,当我将半径(app:cardCornerRadius ="25dp")添加到该CardView时,共享元素转换看起来很难看,因为它首先删除半径然后开始动画.

第一种方法: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帖子来使用Transformation Class,如ChangeImageTransform和ChangeBounds.

我确实定义了我建议的应用程序主题(my_transition包含ChangeImageTransform transitionSet)

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

但它不起作用..

第三种方法 - 天真

我的最后一次尝试是强制目标ImageView的半径也是25dp.因为目标ImageView可能是方形的,因此可能我的CardView被转换为方形,但正如您所猜测的那样,它不起作用.

第四种方法 - 不使用CardView

如您所见,我正在使用Penguin图像并使用CardView来制作半径.我可以使用图像转换使图像四舍五入,但我仍然认为这不是创建共享元素转换的正确方法.

这是我的问题,有没有办法使CardView半径的共享元素转换工作而不首先删除半径？

在RecyclerView中使用MotionLayouts时,我注意到如果高度发生变化,MotionLayouts将无法为其子项周围的环绕设置动画.

重现该行为的简单方法是使用以下布局:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.motion.MotionLayout
        android:id="@+id/motion_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layoutDescription="@xml/scene">

        <View
            android:id="@+id/child"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.motion.MotionLayout>

</FrameLayout>

以及与OnClick触发器关联的MotionScene:

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <OnClick
            motion:target="@id/child"
            motion:mode="toggle"/>

    </Transition>

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@id/child"
            android:layout_height="200dp"/>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@id/child"
            android:layout_height="400dp"/>

    </ConstraintSet>

</MotionScene>

这将产生以下结果:

如您所见,MotionLayout的高度在过渡开始时设置为最终预期高度,使其蓝色背景可见,直到子视图完成其自身的高度过渡并完全重叠.

如果您尝试实现扩展项目动画,则在RecyclerView中会发生同样的事情.

有没有办法让MotionLayout在转换期间完全适合它的孩子的高度,或者只是太高的成本效益？

我正在尝试在 2 个片段 BlankFragment 和 BlankFragment2 之间使用共享元素动画。BlankFragment 有一个回收器视图，而 BlankFragment2 是一个详细信息屏幕。他们共享一张图片，而我正在使用新的导航组件。

在 BlankFragment 中，我正在使用共享图像的转换名称构建FragmentNavigator.Extras附加内容并将其传递给我的调用navigate（因为它是一个回收器视图，并且这些需要是唯一的），

在 BlankFragment2 中，我收到此名称，将其设置为我的图像并设置 setSharedElementEnterTransition

结果是进入动画工作正常但退出/返回没有，我试过设置它们而不是设置它们（因为我相信导航组件应该为我处理这个）有人可以帮忙吗？

MainActivity 导航设置

private void setNavigation() {
    navController = Navigation.findNavController(this, R.id.main_fragment);
    NavigationUI.setupActionBarWithNavController(this, navController);
}

处理后退按钮

@Override
public boolean onSupportNavigateUp() {
    return Navigation.findNavController(this, R.id.main_fragment).navigateUp()
        || super.onSupportNavigateUp();
}

空白片段点击

@Override
public void onClick(View view, int position) {

    NavController navController = Navigation.findNavController(recyclerView);

    FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder().addSharedElement(view, view.getTransitionName()).build();

    BlankFragmentDirections.ActionBlankFragmentToBlankFragment2 directions = BlankFragmentDirections.actionBlankFragmentToBlankFragment2(view.getTransitionName());

    navController.navigate(directions,extras);

}

BlankFragment2 onCreate 带有返回/退出转换

@Override
public void onCreate(Bundle savedInstanceState) …

想要创建与以下 UI 相同的视图寻呼机，应用了自定义转换器但不起作用。

ViewPager.java

public class MyViewPager extends ViewPager implements ViewPager.PageTransformer {
public static final String TAG = "MyViewPager";
private float MAX_SCALE = 0.0f;
private int mPageMargin;
private boolean animationEnabled=true;
private boolean fadeEnabled=false;
private  float fadeFactor=0.5f;


public MyViewPager(Context context) {
    this(context, null);
}

public MyViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    // clipping should be off on the pager for its children so that they can scale out of bounds.
    setClipChildren(false);
    setClipToPadding(false);
    // to avoid fade effect at the end …

我目前正在探索一个类似于BottomSheetBehaviourGoogle地图中使用的复杂UI ,其中可以将项目从折叠状态设置为展开状态.这两个状态之间的转换是使用TransitionManager框架的场景转换,并且工作得非常好.

我现在正在探索一种将扩展视图再次拖动到折叠状态的方法,反之亦然,但我没有找到任何明显的方法来手动进行场景转换.

我需要的是:Transition.setAnimatedFraction(0.5f) 基于用户在两个州之间拖动的百分比.

这里有没有人知道如何实现这一目标？