美文网首页
Android 属性动画实践--天猫详情页

Android 属性动画实践--天猫详情页

作者: jjzxcjj123 | 来源:发表于2017-06-27 16:40 被阅读0次

    效果展示

    动画效果.gif

    实现思路

    首先是布局,这里只关注动画本身,所以布局文件使用的是两个控件加两张图片

    activity_main.xml文件如下

    <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="match_parent"
        tools:context="com.ricky.animation.safari.MainActivity" >
        <LinearLayout
            android:id="@+id/first"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/icon2"
            android:orientation="vertical"
             >
             <Button 
                android:id="@+id/bt"
                android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="显示"
             android:background="#f00"
             android:onClick="startFirstAnim"/>
        </LinearLayout>
        <ImageView
            android:orientation="vertical"
            android:id="@+id/second"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/icon1"
            android:scaleType="fitXY"
            android:layout_alignParentBottom="true"
            android:onClick="startSecondAnim"
            android:visibility="invisible"
            android:clickable="true"
             />
    </RelativeLayout>
    
    • 这里有个小技巧,我们的ImageView是对齐父控件的底部,而且设置为不可见,方便我们后面实现滑出动画。

    我们可以分解动画,实际上第一个界面隐藏,第二个界面滑入和第一个界面弹出,第二个界面再滑出是两组相对的动画来完成的,我们只需要关注其中一个,另一个自然也就容易实现了。

    startFirstAnim点击事件的代码

            //缩放效果
            ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(first, "scaleX", 1.0f, 0.8f);
            firstScaleXAnim.setDuration(300);
            ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(first, "scaleY", 1.0f, 0.8f);
            firstScaleYAnim.setDuration(300);
            //隐藏效果
            ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(first, "alpha", 1.0f, 0.5f);
            firstAlphaAnim.setDuration(300);
            //旋转效果
            ObjectAnimator firstRotationXAnim = ObjectAnimator.ofFloat(first, "rotationX", 0f, 20f);
            firstRotationXAnim.setDuration(200);
    
            //恢复旋转效果
            ObjectAnimator firstResumeRotationXAnim = ObjectAnimator.ofFloat(first, "rotationX", 20f, 0f);
            firstResumeRotationXAnim.setDuration(200);
            firstResumeRotationXAnim.setStartDelay(200);
    
            //向上平移动画
            ObjectAnimator firstTranslationYAnim = ObjectAnimator.ofFloat(first, "translationY", 0, -0.1f * first.getHeight());
            firstTranslationYAnim.setDuration(300);
    
            //向上平移动画
            ObjectAnimator secondTranslationYAnim = ObjectAnimator.ofFloat(second, "translationY", second.getHeight(), 0f);
            secondTranslationYAnim.setDuration(300);
            secondTranslationYAnim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    super.onAnimationStart(animation);
                    second.setVisibility(View.VISIBLE);
                }
            });
    
            AnimatorSet set = new AnimatorSet();
            set.playTogether(firstScaleXAnim, firstScaleYAnim, firstAlphaAnim, firstRotationXAnim, firstResumeRotationXAnim, firstTranslationYAnim, secondTranslationYAnim);
            set.start();
    
    

    所有first开头命名的动画都是控制第一个布局控件的动画,将first动画分解开:

    • 缩小控件
    • 透明度降低
    • 沿着X方向往里旋转
    • 往里旋转结束后,再旋转回来
    • 向上平移

    PS:缩小第一个控件后最上面会留白,所以需要向上平移来填充最上部

    second控件动画就是从最下部画出来,可以从代码secondTranslationYAnim.addListener,我们监听了该动画的onAnimationStart事件,这样可以在动画开始时设置第二控件的可见性

    这样就实现了第一部分的动画,第二部分动画也就是第一个动画的反向,所以这里就不赘述了。


    新手发文,不吝赐教

    相关文章

      网友评论

          本文标题:Android 属性动画实践--天猫详情页

          本文链接:https://www.haomeiwen.com/subject/mjhecxtx.html