【Android动画】简单的组合动画按钮

最新推荐文章于 2021-05-25 15:47:07 发布
最新推荐文章于 2021-05-25 15:47:07 发布
阅读量2.7k 收藏 9
点赞数 1
分类专栏： Android动画 文章标签： android 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyb829/article/details/50723428
版权

1.效果图

这也是产品要求达到的效果，于是才有了这个实现。
这里写图片描述

2.实现思路

总共就是7个按钮，中间的按钮然后被遮住的3个周报、日报、月报按钮，点击笔图标的按钮时，将被遮住的三个按钮移出，分别做左移、上移、右移100%的位置。给三个按钮添加动画监听事件，在onAnimationEnd方法里将按钮展开时，三个目标地点的按钮显示出来。
如图：
这里写图片描述
1）初始状态就是step1中那样，这里包含显示在最上层的按钮和被遮住的3个按钮。点击这个圆形按钮后，被遮住的按钮将启动定义好的动画开始移动，像step2那样。动画监听事件里有个表示动画结束的方法onAnimationEnd，在onAnimationEnd方法里将step3里面外围3个按钮setVisibility(View.VISIBLE)。这就是展开动画。
2）同理收拢的动画，是先隐藏外围三个按钮，然后启动动画。

3.核心代码

1）Activity

public class MainActivity extends Activity {
    private ImageView imgWrite;
    private TextView txtDaily, txtDailyShow, txtWeekly, txtWeeklyShow, txtMonthly, txtMonthlyShow;
    private boolean isFold = true; // 卫星按钮展开状态

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

        initUI(); // 初始化界面
        initAnimation(); // 初始化动画
    }

    /**
     * 初始化界面
     */
    private void initUI() {
        imgWrite = (ImageView) this.findViewById(R.id.daily_write_imageview);
        txtDaily = (TextView) this.findViewById(R.id.daily_dialy_textview);
        txtDailyShow = (TextView) this.findViewById(R.id.daily_dialy_show_textview);
        txtWeekly = (TextView) this.findViewById(R.id.daily_weekly_textview);
        txtWeeklyShow = (TextView) this.findViewById(R.id.daily_weekly_show_textview);
        txtMonthly = (TextView) this.findViewById(R.id.daily_monthly_textview);
        txtMonthlyShow = (TextView) this.findViewById(R.id.daily_monthly_show_textview);
        // 绑定事件
        this.imgWrite.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isFold) {
                    txtDaily.startAnimation(dailyUnfoldAnimation);
                    txtWeekly.startAnimation(weeklyUnfoldAnimation);
                    txtMonthly.startAnimation(monthlyUnfoldAnimation);
                } else {
                    txtDaily.startAnimation(dailyFoldAnimation);
                    txtWeekly.startAnimation(weeklyFoldAnimation);
                    txtMonthly.startAnimation(monthlyFoldAnimation);
                }
                isFold = !isFold;
                if (isFold) {
                    imgWrite.setBackgroundResource(R.drawable.write_daily_fold_icon);
                } else {
                    imgWrite.setBackgroundResource(R.drawable.write_daily_unfold_icon);
                }
            }
        });
    }

    private Animation dailyUnfoldAnimation, dailyFoldAnimation, weeklyUnfoldAnimation,
        weeklyFoldAnimation, monthlyUnfoldAnimation, monthlyFoldAnimation;
    /**
     * 初始化动画
     */
    private void initAnimation() {
        // 展开日报，展开结束时，在停留点显示控件
        dailyUnfoldAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, -1.05f);
        dailyUnfoldAnimation.setDuration(500);
        dailyUnfoldAnimation.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                txtDailyShow.setVisibility(View.VISIBLE);
            }
        });
        // 收起日报，开始动画时，隐藏起始点控件
        dailyFoldAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, -1.05f, Animation.RELATIVE_TO_SELF, 0f);
        dailyFoldAnimation.setDuration(500);
        dailyFoldAnimation.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                txtDailyShow.setVisibility(View.GONE);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
            }
        });
        // 展开周报
        weeklyUnfoldAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, -1.05f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
        weeklyUnfoldAnimation.setDuration(500);
        weeklyUnfoldAnimation.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                txtWeeklyShow.setVisibility(View.VISIBLE);
            }
        });
        // 收起周报
        weeklyFoldAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, -1.05f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
        weeklyFoldAnimation.setDuration(500);
        weeklyFoldAnimation.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                txtWeeklyShow.setVisibility(View.GONE);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
            }
        });
        // 展开月报
        monthlyUnfoldAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.05f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
        monthlyUnfoldAnimation.setDuration(500);
        monthlyUnfoldAnimation.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                txtMonthlyShow.setVisibility(View.VISIBLE);
            }
        });
        // 收起月报
        monthlyFoldAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 1.05f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
        monthlyFoldAnimation.setDuration(500);
        monthlyFoldAnimation.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                txtMonthlyShow.setVisibility(View.GONE);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
            }
        });
    }
}

2）layout代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView 
        android:id="@+id/daily_weekly_textview"
        android:layout_width="48dip"
        android:layout_height="48dip"
        style="@style/normal_text_style_white"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="周报"
        android:background="@drawable/main_color_oval_bg"/>

    <TextView 
        android:id="@+id/daily_dialy_textview"
        android:layout_width="48dip"
        android:layout_height="48dip"
        style="@style/normal_text_style_white"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="日报"
        android:background="@drawable/main_color_oval_bg"/>

    <TextView 
        android:id="@+id/daily_monthly_textview"
        android:layout_width="48dip"
        android:layout_height="48dip"
        style="@style/normal_text_style_white"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="月报"
        android:background="@drawable/main_color_oval_bg"/>

    <ImageView
        android:id="@+id/daily_write_imageview"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_centerInParent="true"
        android:background="@drawable/write_daily_fold_icon" />

    <TextView 
        android:id="@+id/daily_weekly_show_textview"
        android:layout_width="48dip"
        android:layout_height="48dip"
        style="@style/normal_text_style_white"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/daily_write_imageview"
        android:layout_marginRight="1dip"
        android:gravity="center"
        android:text="周报"
        android:visibility="gone"
        android:background="@drawable/main_color_oval_bg"/>

    <TextView 
        android:id="@+id/daily_dialy_show_textview"
        android:layout_width="48dip"
        android:layout_height="48dip"
        style="@style/normal_text_style_white"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/daily_write_imageview"
        android:layout_marginBottom="1dip"
        android:gravity="center"
        android:text="日报"
        android:visibility="gone"
        android:background="@drawable/main_color_oval_bg"/>

    <TextView 
        android:id="@+id/daily_monthly_show_textview"
        android:layout_width="48dip"
        android:layout_height="48dip"
        style="@style/normal_text_style_white"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/daily_write_imageview"
        android:layout_marginLeft="1dip"
        android:gravity="center"
        android:text="月报"
        android:visibility="gone"
        android:background="@drawable/main_color_oval_bg"/>

</RelativeLayout>

至于样式背景和资源就不一一给出，有需要的可以去我的github下载源码
https://github.com/Acoee/aoce_anim_demo.git

Acoe
关注
专栏目录
Android带动态效果的Button(按钮)
09-22
Android带动态效果的Button(按钮)
android 两种按钮的动画效果
04-16
NULL 博文链接：https://iaiai.iteye.com/blog/1807774
Android带有动画效果可弹出并收回的一组按钮菜单
09-10
实现起来很简单，看到代码之后我相信你就可以随心所欲地做出带有酷炫的动画效果的按钮菜单了。环境：Android Studio
Android自定义带动画的开关按钮
04-25
Android自定义带动画的开关按钮，类似于小米手机里的通讯录的开关按钮效果，是个可以很好的练习demo
android 按键上浮动画_在Android中动画按钮的按下/点击
weixin_28989357的博客
12-29 229
I'm trying to create a button-click animation, e.g. the button scales down a little when you press it, scales back up when you release. If you simply tap, you get the press and release strung together...
Android模拟开关按钮点击打开动画（属性动画之平移动画）
01-20
在Android开发中，动画是提升用户体验的关键因素之一。本文主要探讨如何使用属性动画来实现一个模拟开关按钮点击打开的平移动画。属性动画是Android 3.0（API级别11）引入的一种新机制，相较于补间动画，它提供了更...
Android动画 实现开关按钮动画（属性动画之平移动画）实例代码
09-01
总结来说，实现Android开关按钮的平移动画涉及到以下几个关键点： 1. 了解Android的动画体系，包括逐帧动画、补间动画和属性动画。 2. 引入NineOldAndroids库（如果需要兼容低版本系统）。 3. 创建布局文件，定义...
Android实现定制返回按钮动画效果的方法
09-02
在Android开发中，自定义返回按钮的动画效果可以极大地提升用户体验，给用户带来更生动、直观的操作反馈。本文将详细讲解如何实现这一功能，涉及到的关键技术包括Android控件的使用和动画的处理。 首先，我们要了解...
按钮 资源整理
09-03 603
1.Android中ImageButton自定义按钮的按下效果的代码实现方法，附网上2种经典解决方法 首先看看网上的2种方法： 【以下为引用网络，来源：http://www.eoeandroid.com/thread-7931-1-1.html】 使用Button时为了让用户有“按下”的效果，有两种实现方式： 1.在代码里面。 view plain imag
Android多个按钮的动画设置
08-03
主要是多个按钮依次出现，点击后依次消失的动画设置
android按钮点击动画特效
06-03
android按钮点击动画特效，有关注按钮点击效果，有收藏按钮，点赞按钮，评论按钮等各种效果，适合按钮效果处理。很不错的Android特效，按钮点击效果。大家可以下载看看。
android按钮点击动画特效，有关注按钮点击效果，有收藏按钮，点赞按钮，评论按钮等各种效果
05-19
android按钮点击动画特效，有关注按钮点击效果，有收藏按钮，点赞按钮，评论按钮等各种效果，适合按钮效果处理。很不错的Android特效，按钮点击效果。大家可以下载看看。
Android 实现 按钮从两边移到中间动画效果
java开发指南博客 【转载】
05-21 418
Android 实现 按钮从两边移到中间动画效果 http://blog.csdn.net/aminfo/article/details/7589149 package org.shuxiang.test; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import andr...
android 按钮变形动画,android-动画切换按钮
weixin_39990029的博客
05-25 139
我已经创建了动画切换,如果android：checked =“ true”即：它可从1-9播放可绘制,但它工作完美,但如果android：checked =“ false”,它可绘制在10上,但它应从10-20播放.从那时起可以完美地工作,但是当应用程序启动时,它存在以上问题.为什么它停留在可绘制的10上,而实际上它应该是20,因为这是最终图像.(Off)当前因为它停留在10上看起来仍然处于ON状...
Android 点击View炫酷动画
weixin_39413778的博客
10-14 330
package view; import android.animation.ObjectAnimator; import android.animation.PropertyValuesHolder; import android.annotation.SuppressLint; import android.content.Context; import android.util.Attr...
Android Button动画与炫酷跳转
热门推荐
TongZhang1314的博客
01-17 1万+
背景 近日浏览国外的网站发现了一个酷炫的按钮动画，想着自己造轮子实现，同时也记录下实现的过程。由于是第一次写技术文章，不足之处请在评论区多多赐教。不胜感激。 先上效果图 这个是在国外网站看到的。想自己实现按钮动画与跳转。 步骤： 乍一看挺复杂，细细分析应该是多种动画效果的组合。刚开始点击按钮，按钮由长条变为圆形，圆形按钮中间有个白色的圆弧在不断旋转，然后按钮突然放大跳转界面。整理一下
Android_自定义view动画按钮
givemeacondom的专栏
07-15 7794
源代码在文章最后,应各位读者留言,奉上代码下载地址昨天偶偶然看见UI 给的一个交互的效果,原图如下 就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面展开的效果下面是demo的button效果 这个View用到的知识点比较简单: view的坐标系知识,(大家没有不熟悉的吧) view的canvas基本API(画矩形,画扇形,) view的自
android按钮动画的实现
一杯咖啡，一行代码，是一种境界，也是一种追求！
10-28 2213
在我们用过的很多应用中都会涉及到按钮动画的效果，他会根据用户不同的操作显示不同的状态。常见的就是一个按钮当被点击时会有动画，或者是颜色上的变化，给用户更好的体验度。当然这样的效果会有很多的实现方式，这里就通过<selector/></selector>来实现背景的切换，进而实现按钮背景色的变化。
Android属性动画实现开关按钮点击打开效果
文章提到了Android支持的两种动画类型：补间动画和属性动画，并指出属性动画在实现动态效果上的优势。在Android 3.0以下版本，需要借助JakeWharton的NineOldAndroids库来支持属性动画。 在实现该动画前，开发者需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值