Android的学习与实践7（旋转和移动动画的实现）

1.收获

今天我们写了两个demo,这两个demo虽然不难，但是也是需要我们理解的，并不是简单我们就能够写的来，也许并不是这样的，当我下来自己背着写的时候才知道有的地方没有理解，是写不下去的。尽管自己在学的时候思路清晰，但是这并不代表你自己单独写的时候也是思路清晰的。所以自己还要多理解，多去写几遍，也许只有这样才能在碰到相同的东西的时候，才有自己的思路和想法。

2.技术

（1）xml文件通用部分代码的优化
（2）平移和旋转动画和属性动画
（3）AnimationSet集合
（4）延长在容器中的控件执行时间

3.技术的实践和应用

（1）xml文件通用部分代码的优化
当我们在xml中配置一些图片的时候，有时候会出现在配置的许多图片的代码中很多的属性是一样的，那么我们为了优化代码，就可以将这些相同部分用一个xml文件装起来。

例如：

 <ImageButton
        android:id="@+id/ib_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/b" />
    <ImageButton
        android:id="@+id/ib_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/c" />
    <ImageButton
        android:id="@+id/ib_d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/d" />
    <ImageButton
        android:id="@+id/ib_e"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/e" />
    <ImageButton
        android:id="@+id/ib_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/f" />
    <ImageButton
        android:id="@+id/ib_g"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/g" />
    <ImageButton
        android:id="@+id/ib_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:src="@drawable/a" />

在此段代码中明显有7个控件，在这7个空键的代码中，有一部分代码是相通的

 android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"

于是我们就要优化一下代码
首先我们新建一个文件来装这相同的属性的代码，当遇到是我们直接调用这个文件就可以了


image.png

然后在这个文件中进行添加形同属性的代码


image.png

优化后的代码量：

 <ImageButton
        android:id="@+id/ib_b"
        style="@style/ManuBottonStyle"
        android:src="@drawable/b" />
    <ImageButton
        android:id="@+id/ib_c"
        style="@style/ManuBottonStyle"
        android:src="@drawable/c" />
    <ImageButton
        android:id="@+id/ib_d"
        style="@style/ManuBottonStyle"
        android:src="@drawable/d" />
    <ImageButton
        android:id="@+id/ib_e"
        style="@style/ManuBottonStyle"
        android:src="@drawable/e" />
    <ImageButton
        android:id="@+id/ib_f"
        style="@style/ManuBottonStyle"
        android:src="@drawable/f" />
    <ImageButton
        android:id="@+id/ib_g"
        style="@style/ManuBottonStyle"
        android:src="@drawable/g" />
    <ImageButton
        android:id="@+id/ib_a"
        style="@style/ManuBottonStyle"
        android:src="@drawable/a" />

（2）平移和旋转动画和属性动画

 //移动的动画
        TranslateAnimation tAnim=new TranslateAnimation(0,x,0,y);
        tAnim.setDuration(500);
        tAnim.setFillAfter(true);
        tAnim.setInterpolator(new BounceInterpolator());
  //旋转动画
        RotateAnimation rotateAnimation=new RotateAnimation(0,3*360,ib.getPivotX(),ib.getPivotY());
        rotateAnimation.setDuration(500);
        rotateAnimation.setFillAfter(true);

上面的旋转和移动动画是补间动画，他的性质并没有改变，只是在我们的视觉上发生了改变。

//移动
    public void test4(){
        ObjectAnimator transAni=ObjectAnimator.ofFloat(v,"translationX",v.getTranslationX()+100);
        transAni.setDuration(1000);
        transAni.start();
    }
//旋转
    public void test2(){
        ObjectAnimator rotatetion=ObjectAnimator.ofFloat(v,"rotation",0,360);
        rotatetion.setDuration(2000);
        rotatetion.start();
    }

上面的旋转和移动动画是补间动画，他的性质并没有改变，只是在我们的视觉上发生了改变。
补间动画（Animation）：只是视觉上的效果，并没改变他的属性，意思就是在表面上是改变了，但是他还是在原来的位置上，只是在我们的视觉上发生了改变。
属性动画(Animator)：刚好与补间动画不同，发生改变后，就是改变后属性，真正从属性上发生了改变。
在我们的应用中很少用补间动画。


image.png

属性动画的使用


image.png

（3）AnimationSet集合
有时候想要两个动画一起执行，那麽我们就可以用一个东西将这两个动画装起来，而这个东西就像是一个容器。

image.png

image.png

（4）延长在容器中的控件执行时间
在动画中，我想要有的动画有时间差的动画，我们我们需要将动画延时执行。那麽我们利用者个控件在某个容器中的性质来进行延时
image.png

4.今日demo

1.菜单动画
效果：

录制_2019_09_23_23_21_37_506.gif

1.添加图片控件

<ImageButton
        android:id="@+id/ib_b"
        style="@style/ManuBottonStyle"
        android:src="@drawable/b" />
    <ImageButton
        android:id="@+id/ib_c"
        style="@style/ManuBottonStyle"
        android:src="@drawable/c" />
    <ImageButton
        android:id="@+id/ib_d"
        style="@style/ManuBottonStyle"
        android:src="@drawable/d" />
    <ImageButton
        android:id="@+id/ib_e"
        style="@style/ManuBottonStyle"
        android:src="@drawable/e" />
    <ImageButton
        android:id="@+id/ib_f"
        style="@style/ManuBottonStyle"
        android:src="@drawable/f" />
    <ImageButton
        android:id="@+id/ib_g"
        style="@style/ManuBottonStyle"
        android:src="@drawable/g" />
    <ImageButton
        android:id="@+id/ib_a"
        style="@style/ManuBottonStyle"
        android:src="@drawable/a" />

2.将图片添加到一个数组中，以便于进行动画的添加

private int[] resID={R.id.ib_b,R.id.ib_c,R.id.ib_d,R.id.ib_e,R.id.ib_f,R.id.ib_g};

3.判断当前是打开还是关闭，进行相应动画的添加

private boolean isopen=false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
       ImageButton menu=findViewById(R.id.ib_a);

       menu.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               for(int i=0;i<resID.length;i++ ){
                   //判断是打开还是关闭
                   if(isopen==true){
                       close(i);
                   }else{
                       open(i);
                   }
               }
               isopen=!isopen;
           }
       });
    }
    public void open(int i){
        //计算平分之后两个之间的角度
        double angle=(2*Math.PI/(resID.length));
        //获取id相应的控件
        ImageButton ib=findViewById(resID[i]);

        //计算当前空间的角度
        double mangle=(i+1)*angle;
        //计算x的距离
        float x=(float)Math.cos(-mangle)*400;
        //计算y的距离
        float y=(float)Math.sin(-mangle)*400;
        //移动的动画
        TranslateAnimation tAnim=new TranslateAnimation(0,x,0,y);
        tAnim.setDuration(500);
        tAnim.setFillAfter(true);
        tAnim.setInterpolator(new BounceInterpolator());
        //旋转动画
        RotateAnimation rotateAnimation=new RotateAnimation(0,3*360,ib.getPivotX(),ib.getPivotY());
        rotateAnimation.setDuration(500);
        rotateAnimation.setFillAfter(true);

        //创建一个AnimationSet集合 包裹多个动画
        AnimationSet set=new AnimationSet(false);
        set.addAnimation(rotateAnimation);
        set.addAnimation(tAnim);
        set.setFillAfter(true);

        //开始动画
        ib.startAnimation(set);
    }
    public void close(int i){
        //计算平分之后两个之间的角度
        double angle=(2*Math.PI/(resID.length));
        //获取id相应的控件
        ImageButton ib=findViewById(resID[i]);

        //计算当前空间的角度
        double mangle=(i+1)*angle;
        //计算x的距离
        float x=(float)Math.cos(-mangle)*400;
        //计算y的距离
        float y=(float)Math.sin(-mangle)*400;
        //移动的动画
        TranslateAnimation tAnim=new TranslateAnimation(x,0,y,0);
        //tAnim.setDuration(500);
        //tAnim.setFillAfter(true);
        //tAnim.setInterpolator(new BounceInterpolator());
        //旋转动画
        RotateAnimation rotateAnimation=new RotateAnimation(0,3*360,
                ib.getPivotX(),ib.getPivotY());
        //rotateAnimation.setDuration(500);
        //rotateAnimation.setInterpolator(new BounceInterpolator());
        //rotateAnimation.setFillAfter(true);

        //创建一个AnimationSet集合 包裹多个动画
        AnimationSet set=new AnimationSet(false);
        set.addAnimation(rotateAnimation);
        set.addAnimation(tAnim);
        set.setInterpolator(new BounceInterpolator());
        set.setFillAfter(true);

        //开始动画
        ib.startAnimation(set);
    }
    public void animate(int i,boolean state){

    }

2.半旋转动画
效果：

录制_2019_09_24_00_11_51_635.gif

1.添加图片控件

<RelativeLayout
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@drawable/level1"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        >

        <ImageButton
            android:id="@+id/ib_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_home"
            android:background="@null"
            android:layout_centerInParent="true"
            />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/ib_level2"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="@drawable/level2"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">

        <ImageButton
            android:id="@+id/ib_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_menu"
            android:background="@null"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_search"
            android:background="@null"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="5dp"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_myyouku"
            android:background="@null"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="5dp"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/ib_level3"
        android:layout_width="300dp"
        android:layout_height="150dp"
        android:background="@drawable/level3"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel1"
            android:background="@null"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="5dp"/>
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel2"
            android:background="@null"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="60dp"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel3"
            android:background="@null"
            android:layout_marginLeft="60dp"
            android:layout_marginTop="20dp"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel4"
            android:background="@null"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="2dp"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel5"
            android:background="@null"
            android:layout_alignParentRight="true"
            android:layout_marginRight="60dp"
            android:layout_marginTop="20dp"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel6"
            android:background="@null"
            android:layout_alignParentRight="true"
            android:layout_marginRight="25dp"
            android:layout_marginTop="60dp"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel7"
            android:background="@null"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="5dp"/>
    </RelativeLayout>

2.在此动画中有两种动画，一个是旋转入，一个是旋转出，那么我们用两个xml文件配置
旋转入

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="1000">
    <rotate android:fromDegrees="180" android:toDegrees="0" android:pivotX="50%" android:pivotY="100%"/>

</set>

旋转出

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="1000">
    <rotate android:fromDegrees="0" android:toDegrees="-180" android:pivotX="50%" android:pivotY="100%"/>

</set>

3.加载荣容器，因为我们再旋转的是后是旋转的是容器，而不是单个的控件，找到需要被点击的控件

 //加载容器
        level3=findViewById(R.id.ib_level3);
        level2=findViewById(R.id.ib_level2);

        //menu按钮
        ImageButton menu=findViewById(R.id.ib_menu);
        ImageButton home=findViewById(R.id.ib_home);
        //添加点击事件
        menu.setOnClickListener(this);
        home.setOnClickListener(this);

4.判断当前控件的状态，是需要转出还是转入

@Override
    public void onClick(View view){
        switch (view.getId()){
            case R.id.ib_menu:
                if(islevel3open){
                    //关闭
                    closelevel(level3,0);
                }else{
                    //打开
                    openlevel(level3);
                }
                //改变状态
                islevel3open=!islevel3open;
                break;
            case R.id.ib_home:
                if(islevel3open){
                    //关闭第三层
                    closelevel(level3,0);
                    islevel3open=!islevel3open;
                }
                if(islevel2open){
                    //关闭第二层
                    closelevel(level2,200);
                }else{
                    openlevel(level2);
                }
                islevel2open=!islevel2open;
                break;
            default:
                break;
        }
    }

    public void openlevel(RelativeLayout rl){
        Animation in=AnimationUtils.loadAnimation(this,R.anim.rotate_in);
        rl.startAnimation(in);
        //子控件可点击
        changeState(rl,true);
    }
    public void closelevel(RelativeLayout rl,long delay){
        Animation out=AnimationUtils.loadAnimation(this,R.anim.rotate_out);
        out.setStartOffset(delay);
        rl.startAnimation(out);
        //子控件不可点击
        changeState(rl,false);
    }
    public void changeState(RelativeLayout rl,boolean enable){
        //遍历容器的子控件

        //1.获取子控件的个数
        int count=rl.getChildCount();
        //2.遍历子控件
        for(int i=0;i<count;i++){
             View view=rl.getChildAt(i);
             //设置子控件的状态
            view.setEnabled(enable);
        }
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354

推荐阅读更多精彩内容

  • Android 动画
    【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...
    Rtia阅读 6,153评论 1赞 38
  • [转]Android三种动画详解
    1 背景 不能只分析源码呀，分析的同时也要整理归纳基础知识，刚好有人微博私信让全面说说Android的动画，所以今...
    未聞椛洺阅读 2,709评论 0赞 10
  • Android中的View动画和属性动画
    概述 在Android开发的过程中，View的变化是很常见的，如果View变化的过程没有动画来过渡而是瞬间完成，会...
    小芸论阅读 38,977评论 18赞 134
  • Android应用开发之所有动画使用详解
    转载一篇高质量博文，原地址请戳这里转载下来方便今后查看。1 背景不能只分析源码呀，分析的同时也要整理归纳基础知识，...
    Elder阅读 1,942评论 0赞 24
  • Android 三种动画详解
    1 背景 不能只分析源码呀，分析的同时也要整理归纳基础知识，刚好有人微博私信让全面说说Android的动画，所以今...
    lisx_阅读 964评论 0赞 0