将视图从一种布局动画化到另一种布局

2024-03-02

检查附图以方便解释。

翻译动画可以工作,但它会在同一视图内进行动画处理。 我希望视图从一种布局飞出到另一种布局。

我从这里的另一个答案尝试过这个。 (相同布局的动画)

public class Animations {
        public Animation fromAtoB(float fromX, float fromY, float toX, float toY, int speed){


            Animation fromAtoB = new TranslateAnimation(
                    Animation.ABSOLUTE, //from xType
                    fromX,
                    Animation.ABSOLUTE, //to xType
                    toX,
                    Animation.ABSOLUTE, //from yType
                    fromY,
                    Animation.ABSOLUTE, //to yType
                    toY
            );

            fromAtoB.setDuration(speed);
            fromAtoB.setInterpolator(new AnticipateOvershootInterpolator(1.0f));

            return fromAtoB;
        }

我最近使用 Animators 制作了类似的动画。一般来说,视图不会在其父级边界之外显示自己,视图将被其父级边界剪切。这就是为什么,技巧是将一个新视图 (shuttleView) 放置在您想要设置动画的原始视图 (fromView) 之上,对齐它们,并将 ShuttleView 的缩放/平移动画设置为目标视图 (toView)。

该解决方案支持缩放和平移,示例如下:https://www.dropbox.com/s/iom95o93076h52f/device-2016-06-03-111557.mp4?dl=0 https://www.dropbox.com/s/iom95o93076h52f/device-2016-06-03-111557.mp4?dl=0

这是代码:

活动主文件

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:layout_alignParentTop="true"
    android:background="@android:color/holo_blue_dark">

    <TextView
        android:id="@+id/itemTo"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="@android:color/holo_blue_bright"
        android:text="to"/>

</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:layout_alignParentBottom="true"
    android:background="@android:color/holo_blue_dark">

    <TextView
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/holo_blue_bright" />

    <TextView
        android:id="@+id/itemFrom"
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:text="from"
        android:background="@android:color/holo_blue_bright" />

    <TextView
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/holo_blue_bright" />
</LinearLayout>

<View
    android:id="@+id/shuttle"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/holo_blue_bright"/>

活动类别:

public class MainActivity extends AppCompatActivity {
    public static final int ANIMATION_SPEED = 3000;
    private RelativeLayout rootView;
    private View fromView, toView, shuttleView;

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

        rootView = (RelativeLayout) findViewById(R.id.rootView);
        fromView = findViewById(R.id.itemFrom);
        toView = findViewById(R.id.itemTo);
        shuttleView = findViewById(R.id.shuttle);

        fromView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Rect fromRect = new Rect();
                Rect toRect = new Rect();
                fromView.getGlobalVisibleRect(fromRect);
                toView.getGlobalVisibleRect(toRect);

                AnimatorSet animatorSet = getViewToViewScalingAnimator(rootView, shuttleView, fromRect, toRect, ANIMATION_SPEED, 0);

                animatorSet.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        shuttleView.setVisibility(View.VISIBLE);
                        fromView.setVisibility(View.INVISIBLE);
                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        shuttleView.setVisibility(View.GONE);
                        fromView.setVisibility(View.VISIBLE);
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
                animatorSet.start();
            }
        });
    }


    public static AnimatorSet getViewToViewScalingAnimator(final RelativeLayout parentView,
                                                           final View viewToAnimate,
                                                           final Rect fromViewRect,
                                                           final Rect toViewRect,
                                                           final long duration,
                                                           final long startDelay) {
        // get all coordinates at once
        final Rect parentViewRect = new Rect(), viewToAnimateRect = new Rect();
        parentView.getGlobalVisibleRect(parentViewRect);
        viewToAnimate.getGlobalVisibleRect(viewToAnimateRect);

        viewToAnimate.setScaleX(1f);
        viewToAnimate.setScaleY(1f);

        // rescaling of the object on X-axis
        final ValueAnimator valueAnimatorWidth = ValueAnimator.ofInt(fromViewRect.width(), toViewRect.width());
        valueAnimatorWidth.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // Get animated width value update
                int newWidth = (int) valueAnimatorWidth.getAnimatedValue();

                // Get and update LayoutParams of the animated view
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewToAnimate.getLayoutParams();

                lp.width = newWidth;
                viewToAnimate.setLayoutParams(lp);
            }
        });

        // rescaling of the object on Y-axis
        final ValueAnimator valueAnimatorHeight = ValueAnimator.ofInt(fromViewRect.height(), toViewRect.height());
        valueAnimatorHeight.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // Get animated width value update
                int newHeight = (int) valueAnimatorHeight.getAnimatedValue();

                // Get and update LayoutParams of the animated view
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewToAnimate.getLayoutParams();
                lp.height = newHeight;
                viewToAnimate.setLayoutParams(lp);
            }
        });

        // moving of the object on X-axis
        ObjectAnimator translateAnimatorX = ObjectAnimator.ofFloat(viewToAnimate, "X", fromViewRect.left - parentViewRect.left, toViewRect.left - parentViewRect.left);

        // moving of the object on Y-axis
        ObjectAnimator translateAnimatorY = ObjectAnimator.ofFloat(viewToAnimate, "Y", fromViewRect.top - parentViewRect.top, toViewRect.top - parentViewRect.top);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setInterpolator(new DecelerateInterpolator(1f));
        animatorSet.setDuration(duration); // can be decoupled for each animator separately
        animatorSet.setStartDelay(startDelay); // can be decoupled for each animator separately
        animatorSet.playTogether(valueAnimatorWidth, valueAnimatorHeight, translateAnimatorX, translateAnimatorY);

        return animatorSet;
    }
}

您可以根据 animatorSet 侦听器中动画不同阶段出现和消失的内容进行大量自定义。希望它有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将视图从一种布局动画化到另一种布局 的相关文章

随机推荐

  • 如何使 Bootstrap 下拉菜单尊重移动设备上的水平视口限制?

    引导类dropdown menu可以自动检测屏幕的视口并进行相应调整 因此 如果下拉菜单没有空间打开到底部 它就会打开 如下例所示 然而 对于视口的水平限制 这种情况不会发生 我最终得到了这个水平滚动 这是发生这种情况的一个例子
  • 如何使用未硬编码到程序集中的数据填充 MEF 插件?

    我正在开发一个可以与各种硬件进行通信的程序 由于它通信和控制的项目具有不同的性质 我需要为每个不同的硬件配备不同的 驱动程序 这让我认为 MEF 是一种将这些驱动程序制作为插件的好方法 即使在产品发布后也可以添加这些插件 我已经看过很多如何
  • HTML/PHP - 表单 - 作为数组输入

    我有一个这样的表格
  • Matlab:导出用 myaa 制作的图形

    我正在尝试使用 E Wegert 的复杂函数浏览器制作更高质量的复杂函数相图CFE http de mathworks com matlabcentral fileexchange 45464 complex function explor
  • Rails 3 在启动时加载所有模型

    我的所有模型中都混合了一个类方法 当评估模型类时会调用该方法 不幸的是 对我来说 每当开发环境中需要模型时 这似乎是按需的 Rails 如何在启动时加载所有模型 这是否可取 class Foo lt ActiveRecord Base in
  • 如何将 tex 添加到八度图

    我有一个条形图 我使用 text 在每个条形上方显示分数 例如 text 1 20 300 400 在位置 1 20 处显示字符串 300 400 我现在想美化分数 以便出现 300 over 400 300 400 有没有办法做到这一点
  • 在 Windows 资源管理器中显示文件

    我最喜欢的 IDEWing IDE http www wingware com 有一个用于在资源管理器中显示活动文件的命令 这意味着当您启动该命令时 它会在文件所在的文件夹上打开一个资源管理器窗口 然后选择该文件 问题是 如果窗口已经打开
  • 如何更改 OAuth2RestTemplate 中 MappingJacksonHttpMessageConverter 的 MediaType

    我有一个应用程序 它使用 Spring Source OAuth2 作为客户端从资源服务器检索用户数据并创建本地用户 当 OAuth2ClientContextFilter 尝试检索令牌时 我不断收到错误 org springframewo
  • Gnuplot 绘制两个 CSV 文件的排序合并

    我正在尝试合并和排序两个 CSV 文件 跳过前 8 行 我尝试按我使用的第 36 列对其中一个文件进行排序 awk NR gt 8 print Hight 5x5 csv sort nk36 并合并两个文件 cat Hight 5x5 cs
  • 如何让PHP自动为每个用户创建子域?

    如何创建子域http user mywebsite example 我必须访问吗 htaccess不知何故 实际上是否可以通过纯 PHP 代码创建它 或者我需要使用一些外部脚本服务器端语言 对于那些回答的人 那么 我应该询问我的托管服务是否
  • 转换为值类型“Double”失败,因为具体化值为 null

    CODE double cafeSales db InvoiceLines Where x gt x UserId user UserId x DateCharged gt dateStart x DateCharged lt dateEn
  • 如何在 Java 中抛出一般异常?

    考虑这个简单的程序 该程序有两个文件 File 车辆 java class Vehicle private int speed 0 private int maxSpeed 100 public int getSpeed return sp
  • 将 div 浮动在右下角,但不在页脚内

    我正在尝试实现一个浮动在页面右下角的 转到顶部 按钮 我可以使用以下代码来完成此操作 但我不希望此按钮进入我的页面的页脚 当用户将页面向下滚动到页面底部时 如何阻止它进入页脚并停留在页脚顶部 CSS to top position fixe
  • C++ - 区间树实现

    有人知道有什么好办法吗interval tree在C 中实现 显然 模板驱动的东西更好boost 风格 还有一个问题 如果有人测试过 会做一个基本的测试std vector基于排序的区间树实现可以击败通用区间树 O lg 运算 在实践中 我
  • JQuery:在“内存”而不是 DOM 中构建 HTML

    有没有办法在将 HTML 片段添加到 DOM 之前 预先构建 它 例如 mysnippet append h1 hello h1 mysnippet append h1 world h1 destination append mysnipp
  • JavaScript 函数声明

    下面给出的 JavaScript 代码片段是某种函数声明吗 如果没有 有人可以概述一下它们是什么吗 some func function value some code here and show function value some c
  • 如何复制视图的所有属性?

    我正在创建一个货币汇率应用程序来学习 Android 该应用程序将在列表中列出所有汇率 每个汇率都有这样的布局 本质上
  • 指针到指针到指针[重复]

    这个问题在这里已经有答案了 可能的重复 用于多级指针取消引用 https stackoverflow com questions 758673 uses for multiple levels of pointer dereferences
  • React Native - 如何在地图函数中传递索引

    我有一个地图函数来重复动态地创建组件 假设是这样的 renderBoxes return Array map data gt this myFunction indexOfThisArray 如何传递数组的索引 这样 myFunction
  • 将视图从一种布局动画化到另一种布局

    检查附图以方便解释 翻译动画可以工作 但它会在同一视图内进行动画处理 我希望视图从一种布局飞出到另一种布局 我从这里的另一个答案尝试过这个 相同布局的动画 public class Animations public Animation f