Material Design动画

作者: kim_liu | 来源:发表于2018-07-17 17:10 被阅读89次

    Material Design中特有的动画效果,如水波纹,Activity转场动画等

    1.Touch FeedBack 水波纹

    水波纹效果是Android5.0自带的动画效果,但是要使用AppCompat的主题
    将需要设置水波纹的控件设置背景
    1.android:background="?attr/selectableItemBackgroundBorderless"
    无边框水波纹
    2.android:background="?attr/selectableItemBackground" 水波纹动画在控件边框内
    如果要自定义水波纹效果可以在v21的style文件中修改这两个属性:
    <item name="colorControlHighlight">@color/colorPrimary_pink</item> 水波纹颜色
    <item name="colorButtonNormal">@color/material_blue_grey_800</item> 背景色

    2.Reveal Effect(揭露效果)

    揭露效果类似于PPT中的出现动画,使用ViewAnimationUtils实现。但是API需>21


    揭露动画.gif
     float hypot = (float) Math.hypot(view.getWidth(), view.getHeight());//勾股定理
     Animator animator = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2,
                    view.getHeight() / 2, 0, hypot);//参数:1.作用于哪个view 2 3 4 5
                                                   //分别是中心点X Y 开始半径,结束半径
            animator.setDuration(1000);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.start();
    

    3.Activity transition(Activity转场动画效果)

    Android5.0之后出现的Activity进入,退出屏幕的动画,使用ActivityOptions类实现,或者使用其兼容类ActivityOptionsCompat实现,兼容类并不能在5.0以下的版本实现转场动画,只是省去了开发时需要判断版本的步骤。
    原始方法:overridePendingTransition(enterAnim,exitAnim);

    使用官方转场动画,必须要允许参与的Activity都使用它,具体方法:
    方法一:在代码中设置oncreate中:
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);//允许其使用转场动画
    方法二:在xml中设置:
    修改主题:<item name="android:windowContentTransitions">true</item>
    注意修改的主题需要是v21文件夹下的。

    转场动画包括两种动画:

    1.共享元素转换

    共享元素的装换.gif

    实现步骤:
    1.在两个Activity中需要共享元素的控件,比如ImageView,Button等设置一个相同的属性:
    android:transitionName="iv_button1"
    2.使用ActivityOptionsCompat类,实现单个多个元素共享
    单个:

            ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this,//上下文
                    view,//实现转场动画的View
                    "iv_button1"//xml中设置的transitionName
            );
            Intent intent = new Intent(this,SecondActivity.class);
            startActivity(intent,optionsCompat.toBundle());
    

    多个:使用pair

    ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this, Pair.create(view, "iv_button1"), Pair.create((View) bt, "bn")
            );
            Intent intent = new Intent(this,SecondActivity.class);
            startActivity(intent,activityOptionsCompat.toBundle());
    

    ActivityOptionsCompat中的其他方法可以自定义从哪里开始缩放,退出动画的效果也不相同。

    2.普通转场动画。Api21以上才可以使用

    系统自带:滑动效果(Slide)、展开效果(Explode)、渐变显示隐藏效果Fade

    1.slide:
    
            Slide slide = new Slide();
            slide.setDuration(1000);
            getWindow().setExitTransition(slide);//出去动画
            getWindow().setEnterTransition(slide);//进入动画
    
            ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this);
    
           // ActivityOptionsCompat activityOptionsCompat = 
          //ActivityOptionsCompat.makeSceneTransitionAnimation(
                   // this,view,"iv_button1");//可以加入共享元素
            Intent intent = new Intent(this,SecondActivity.class);
            startActivity(intent,activityOptionsCompat.toBundle());
    
    2.Explode:
    
            Explode explode = new Explode();
            explode.setDuration(1000);
            getWindow().setEnterTransition(explode);
            getWindow().setExitTransition(explode);
    
    3.Fade:渐变显示
    
            Fade fade = new Fade();
            fade.setDuration(1000);
            getWindow().setEnterTransition(fade);
            getWindow().setExitTransition(fade);
    

    一个例子:

    1.仿淘宝选择规格,效果图如下:


    动画1.gif

    代码如下:布局 外层使用相对布局

    <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.kimliu.materialdesign.TaobaoChooseActivity">
    
    
        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/icon_2"
            >
    
            <Button
                android:id="@+id/bn"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#f00"
                android:text="显示"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                />
    
    
        </LinearLayout>
    
        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:src="@drawable/icon_1"
            android:scaleType="fitEnd"
            android:clickable="true"
            android:visibility="invisible"
    
            />
    
    </RelativeLayout>
    

    java:各个步骤的注释写的很清楚了

     private Button bn;
        private ImageView iv;
        private LinearLayout ll;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_taobao_choose);
    
            bn = findViewById(R.id.bn);
            iv = findViewById(R.id.iv);
            ll = findViewById(R.id.ll);
    
    
            bn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    oneAnim();//背景动画
                }
            });
    
            iv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //第二张图的动画
                    secondAnim();
    
                }
            });
    
        }
    
        /**
         * 第二张图的动画
         * 一切恢复原状
         */
        private void secondAnim() {
    
            //1.前面的图片向下平移 回到原来的位置
            ObjectAnimator sixAnim = ObjectAnimator.ofFloat(iv,"translationY",0f,iv.getHeight());
    //        sixAnim.setStartDelay(600);
            sixAnim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    iv.setVisibility(View.GONE);
                }
            });
    
            //2.背景图片的恢复
            //1.恢复到80%
            ObjectAnimator fifthAnimY = ObjectAnimator.ofFloat(ll,"translationY",0f,0f);
            fifthAnimY.setDuration(200);
    
            //2.缩放回正常大小
            ObjectAnimator secondAnimX = ObjectAnimator.ofFloat(ll,"ScaleX",0f,1f);
            secondAnimX.setDuration(200);
            ObjectAnimator secondAnimY = ObjectAnimator.ofFloat(ll,"ScaleY",0f,1f);
            secondAnimY.setDuration(200);
    
            //3.透明度
            ObjectAnimator thirdAnim = ObjectAnimator.ofFloat(ll,"alpha",0.5f,1f);
            thirdAnim.setDuration(200);
    
            AnimatorSet set = new AnimatorSet();
            set.playTogether(sixAnim,fifthAnimY,secondAnimX,secondAnimY,thirdAnim);
            set.start();
    
        }
    
        /**
         * 1.背景图的旋转(绕x轴旋转),缩放()透明度变化()
         * 2.第二张图:向上平移
         *
         */
        private void oneAnim() {
    
            //1.翻转
            ObjectAnimator fristAnim
                    = ObjectAnimator.ofFloat(ll,"rotationX",0f,25f);
            //绕X轴翻转 从0f-25f
            fristAnim.setDuration(300);
    
            //2.缩放
            ObjectAnimator secondAnimX = ObjectAnimator.ofFloat(ll,"ScaleX",1f,0.8f);
            secondAnimX.setDuration(200);
            ObjectAnimator secondAnimY = ObjectAnimator.ofFloat(ll,"ScaleY",1f,0.8f);
            secondAnimY.setDuration(200);
    
            //3.透明度
            ObjectAnimator thirdAnim = ObjectAnimator.ofFloat(ll,"alpha",1f,0.5f);
    
            //4.转正
            ObjectAnimator fourAnim
                    = ObjectAnimator.ofFloat(ll,"rotationX",25f,0f);
            //绕X轴翻转 从0f-25f
            fourAnim.setDuration(300);
            fourAnim.setStartDelay(200);
    
            //5.到达顶部 缩放了80% 那么离顶端 10% ll
            ObjectAnimator fifthAnimY = ObjectAnimator.ofFloat(ll,"translationY",0f,-0.1f*ll.getHeight());
            fifthAnimY.setDuration(200);
            fifthAnimY.setStartDelay(400);
    
            //6.前面的iv往上平移出来
            ObjectAnimator sixAnim = ObjectAnimator.ofFloat(iv,"translationY",iv.getHeight(),0f);
    //        sixAnim.setStartDelay(600);
            sixAnim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    super.onAnimationStart(animation);
                    iv.setVisibility(View.VISIBLE);
                }
            });
    
            AnimatorSet set = new AnimatorSet();
            set.playTogether(fristAnim,secondAnimX,secondAnimY,thirdAnim,fourAnim,fifthAnimY,sixAnim);
            set.start();
    
        }
    

    相关文章

      网友评论

        本文标题:Material Design动画

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