Question

我正在开发一个项目，该项目要求以类似于Zazzle应用程序的导航栏的方式实现导航栏。动画不是我的专长，所以我想从开发社区获得关于如何实现这样的动画的一些想法。

这是导航抽屉的图像，注意左边的前一个片段是如何保持在视图中的。

Zazzle_navigation_Drawer

这是按下菜单按钮时导航过渡的屏幕截图。它在屏幕的右侧转动并将其自身折叠起来，当菜单被取消时，它会逆转该过程。

Zazzle_nav_transition

我正在寻找关于如何实施这一建议的建议，以及我应该考虑使用的一些资源或要学习的信息，以便有效地复制这种效果。

到目前为止我做了什么。

我观看并记录了Sliding Animations DevBytes视频。因此，到目前为止，我的策略是将导航作为我所有其他屏幕的片段，并尝试在它们之间实现一些滑动动画。我认为这应该给我基础。

因此我更多地询问动画是如何构建的。我之前从未做过动画，所以我要求一些关于如何在android中实现自定义动画的帮助以及关于如何在这种情况下完成动画的建议

Answer 1

如果有人绊倒了......

我通过使用Android developer training网站上的示例项目来解决这个问题。我在res中创建了一个anim文件夹，并使用Object animator标记添加了xml set文件。我不明白如何正确地操纵值来获得所需的动画但是经过一些探索后我意识到以下

 <objectAnimator
    android:valueFrom=
    android:valueTo=
    android:propertyName="
    android:interpolator=
    android:duration= />

valueFrom标记和valueTo标记定义了动画之间运行的点，而android则填充其余部分。属性名称用于描述正在操作的运动类型（translationX，translationY，rotationX，translationY，scaleX和scaleY）。插值器设置动画的变化率，最后持续时间指定动画应该花多长时间。

制作动画文件后，可以使用以下代码在事务期间设置片段上的动画。

 getFragmentManager()
                    .beginTransaction()        
                    .setCustomAnimations(
                            R.animator.exampleOut, R.animator.exampleIn,
                            R.animator.exampleOut, R.animator.exampleIn, 
                    ).add(R.id.container, new mFragment()).addToBackStack(null).commit();\

setCustomAnimations（）的前两个参数设置启动事务时两个片段的运动，最后两个参数设置事务反转时两个片段的运动，即按下后退按钮。 / p>

这可用于实现所需的动画但是我发现出站片段由于某种原因会从视图中消失。因此我必须使用AnimatorListener，如下所示：

Animator.AnimatorListener listener = new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator arg0) {
            getFragmentManager()
                    .beginTransaction()        
                    .setCustomAnimations(
                            R.animator.exampleOut, 0,
                            0, R.animator.exampleIn
                    )


                    .add(R.id.container, new mFragment())

                    .addToBackStack(null)

                    .commit();
        }
    };
    slideback(listener);

    mHandler.post(new Runnable() {
        @Override
        public void run() {
            invalidateOptionsMenu();
        }
    });
}

private void slideback(Animator.AnimatorListener listener) {
    View movingFragmentView = cardFrontFragment.getView();

    PropertyValuesHolder rotateY =  PropertyValuesHolder.ofFloat("rotationY", 15f);
    PropertyValuesHolder scaleX =  PropertyValuesHolder.ofFloat("scaleX", 0.8f);
    PropertyValuesHolder scaleY =  PropertyValuesHolder.ofFloat("scaleY", 0.8f);
    PropertyValuesHolder translateX = PropertyValuesHolder.ofFloat("translationX", 500f);
    ObjectAnimator movingFragmentAnimator = ObjectAnimator.
            ofPropertyValuesHolder(movingFragmentView, rotateY, scaleX, scaleY, translateX);



    ObjectAnimator movingFragmentRotator = ObjectAnimator.
            ofFloat(movingFragmentView, "rotationY",15f, 0f);
    movingFragmentAnimator.setDuration(DURATION_TIME);
    movingFragmentRotator.setStartDelay(DELAY_TIME);


    AnimatorSet s = new AnimatorSet();
    s.playTogether(movingFragmentAnimator, movingFragmentRotator);
    s.addListener(listener);
    s.start();
}
private void slideForward (Animator.AnimatorListener listener) {
    View movingFragmentView = cardFrontFragment.getView();

    PropertyValuesHolder rotateY =  PropertyValuesHolder.ofFloat("rotationY", 15f);
    PropertyValuesHolder scaleX =  PropertyValuesHolder.ofFloat("scaleX", 1.0f);
    PropertyValuesHolder scaleY =  PropertyValuesHolder.ofFloat("scaleY", 1.0f);
    PropertyValuesHolder translateX = PropertyValuesHolder.ofFloat("translationX", 0f);
    ObjectAnimator movingFragmentAnimator = ObjectAnimator.
            ofPropertyValuesHolder(movingFragmentView, rotateY, scaleX, scaleY, translateX);



    ObjectAnimator movingFragmentRotator = ObjectAnimator.
            ofFloat(movingFragmentView, "rotationY",15f, 0f);
    movingFragmentAnimator.setDuration(DURATION_TIME);
    movingFragmentRotator.setStartDelay(DELAY_TIME);
    movingFragmentRotator.setDuration(DURATION_TIME);


    AnimatorSet s = new AnimatorSet();
    s.playTogether(movingFragmentAnimator, movingFragmentRotator);
    s.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
           mShowingBack = false;
        }
    });
    s.start();
}

这允许您在运行时动态设置出站片段的属性，并且由于某种原因允许片段保持在视图中。

如何在Zazzle中复制滑动片段3d动画

1 个答案: