自定义PathButton按钮动画效果

最新推荐文章于 2024-03-17 09:41:15 发布
最新推荐文章于 2024-03-17 09:41:15 发布
阅读量97 收藏
点赞数
文章标签： 移动开发 java python
原文链接：https://my.oschina.net/heyongrui/blog/792976
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

先上效果图：

感觉很酷吧，我也这么觉得。之前在网上看到一个点击展开的按钮效果，觉得很酷，所以就在网上找了一下，姑且叫做PathButton按钮吧，顾名思义，这是一个自定义的View，看了一些比较厉害的博客，做的很好，自己也想做一下，但是不知道大家有没有这种感觉，就是就算很简单的代码，不是自己打的，理解就会吃力一点，所以他们的代码我是似懂非懂，但是我知道用到是利用动画实现的，所以，根据自己的理解就试着动手做了起来。我是利用属性动画，因为属性动画会改变控件的属性，而补间动画做不到，所以选择属性动画。另外，自己的代码可能比较冗杂，大神勿喷。谢谢！好了，下面看主要代码：

布局文件xml:

<?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"
    >

    <ImageButton
        android:id="@+id/button_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/composer_camera"
        android:visibility="gone" />

    <ImageButton
        android:id="@+id/button_people"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/composer_with"
        android:visibility="gone" />

    <ImageButton
        android:id="@+id/button_place"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/write"
        android:visibility="gone" />

    <ImageButton
        android:id="@+id/path_button"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/path_button" />
</RelativeLayout>

这个就是四个ImageButton，都在同一位置，其中三个设置隐藏，其他没有什么好说的。

下面看一下实现代码：

package hyr.my_diary.com;

import android.animation.AnimatorSet;
import android.animation.Keyframe;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import immortalz.me.library.TransitionsHeleper;

/**
 * Created by haiyuan1995 on 2016/11/16.
 */
public class Diary extends AppCompatActivity implements View.OnClickListener {
    
    private ImageButton button_photo;
    private ImageButton button_place;
    private ImageButton button_people;
    private ImageButton buttons_wrapper;

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

        //初始化View
        initview();

        //当Path按钮展开时，点击屏幕其他位置，按钮关闭
        mListView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (isClick == true) {
                    all_close();
                }
                return false;
            }
        });

        //设置四个按钮的监听事件
        buttons_wrapper.setOnClickListener(this);
        button_place.setOnClickListener(this);
        button_photo.setOnClickListener(this);
        button_people.setOnClickListener(this);
    }

    //展开的三个按钮的其中一个的关闭动画效果
    private void place_close() {
        ObjectAnimator button_place_scaleY = scaleY(button_place, 1f, 0.2f);
        ObjectAnimator button_place_scaleX = scaleX(button_place, 1f, 0.2f);
        ObjectAnimator button_place_rotation = rotation(button_place, 0f, 360f);
        ObjectAnimator button_place_anim = alpha(button_place, 1f, 0f);
        ObjectAnimator button_place_animator = translationY(button_place, 200f);
        ObjectAnimator button_place_animator2 = translationX(button_place, 0f);
        ObjectAnimator self = self_rotation(225f, 0f);

        //设置一个按钮的几个属性动画的播放顺序
        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(button_place_rotation);
        builder.before(button_place_anim);
        set.playTogether(button_place_anim, button_place_animator, self, button_place_animator2, button_place_scaleY, button_place_scaleX);
        set.start();
    }

   //展开的三个按钮的其中一个的关闭动画效果
    private void photo_close() {
        ObjectAnimator button_photo_rotation = rotation(button_photo, 0f, 360f);
        ObjectAnimator button_photo_scaleY = scaleY(button_photo, 1f, 0.2f);
        ObjectAnimator button_photo_scaleX = scaleX(button_photo, 1f, 0.2f);
        ObjectAnimator button_photo_anim = alpha(button_photo, 1f, 0f);
        ObjectAnimator button_photo_animator = translationY(button_photo, 0f);
        ObjectAnimator button_photo_animator2 = translationX(button_photo, 150f);
        ObjectAnimator self = self_rotation(225f, 0f);

        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(button_photo_rotation);
        builder.before(button_photo_anim);
        set.playTogether(button_photo_anim, button_photo_animator, self, button_photo_animator2, button_photo_scaleX, button_photo_scaleY);
        set.start();
    }
    
    //展开的三个按钮的其中一个的关闭动画效果
    private void people_close() {
        ObjectAnimator scaleY = scaleY(button_people, 1f, 0.2f);
        ObjectAnimator scaleX = scaleX(button_people, 1f, 0.2f);
        ObjectAnimator rotation = rotation(button_people, 0f, 360f);
        ObjectAnimator anim = alpha(button_people, 1f, 0f);
        ObjectAnimator animator = translationY(button_people, 100f);
        ObjectAnimator animator2 = translationX(button_people, 150f);
        ObjectAnimator self = self_rotation(225f, 0f);

        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(rotation);
        builder.before(anim);
        set.playTogether(anim, animator, self, animator2, scaleX, scaleY);
        set.start();

    }
    
    //展开的三个按钮的其中一个的展开的动画效果
    private void place_open() {
        ObjectAnimator button_place_scaleY = scaleY(button_place, 0.2f, 1f);
        ObjectAnimator button_place_scaleX = scaleX(button_place, 0.2f, 1f);
        ObjectAnimator button_place_rotation = rotation(button_place, 360f, 0f);
        ObjectAnimator button_place_anim = alpha(button_place, 0.0f, 1f);
        ObjectAnimator button_place_animator = translationY(button_place, -200f);
        ObjectAnimator button_place_animator2 = translationX(button_place, 0f);
        ObjectAnimator propertyValuesHolder = pro_key(button_place);
        ObjectAnimator self = self_rotation(0f, 225f);

        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(button_place_rotation);
        builder.before(propertyValuesHolder);
        set.playTogether(button_place_anim, button_place_animator, button_place_animator2, self, button_place_scaleX, button_place_scaleY, button_place_rotation);
        set.start();
    }

     //展开的三个按钮的其中一个的展开的动画效果
    private void people_open() {
        ObjectAnimator scaleY = scaleY(button_people, 0.2f, 1f);
        ObjectAnimator scaleX = scaleX(button_people, 0.2f, 1f);
        ObjectAnimator rotation = rotation(button_people, 360f, 0f);
        ObjectAnimator anim = alpha(button_people, 0.0f, 1f);
        ObjectAnimator animator = translationY(button_people, -100f);
        ObjectAnimator animator2 = translationX(button_people, -150f);
        ObjectAnimator propertyValuesHolder = pro_key(button_people);
        ObjectAnimator self = self_rotation(0f, 225f);

        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(rotation);
        builder.before(propertyValuesHolder);
        set.playTogether(anim, animator, animator2, self, scaleX, scaleY, rotation);
        set.start();
    }

    //展开的三个按钮的其中一个的展开的动画效果
    private void photo_open() {
        ObjectAnimator button_photo_scaleY = scaleY(button_photo, 0.2f, 1f);
        ObjectAnimator button_photo_scaleX = scaleX(button_photo, 0.2f, 1f);
        ObjectAnimator button_photo_rotation = rotation(button_photo, 360f, 0f);
        ObjectAnimator button_photo_anim = alpha(button_photo, 0.0f, 1f);
        ObjectAnimator button_photo_animator = translationY(button_photo, 0f);
        ObjectAnimator button_photo_propertyValuesHolder = pro_key(button_photo);
        ObjectAnimator button_photo_animator2 = translationX(button_photo, -150f);
        ObjectAnimator self = self_rotation(0f, 225f);

        AnimatorSet set2 = new AnimatorSet();
        AnimatorSet.Builder builder2 = set2.play(button_photo_rotation);
        builder2.before(button_photo_propertyValuesHolder);
        set2.playTogether(button_photo_scaleY, button_photo_scaleX, button_photo_animator2, self, button_photo_anim, button_photo_animator, button_photo_rotation);
        set2.start();
    }
    
    //三个按钮的全部关闭的动画效果
    public void all_close() {
        //判断三个按钮是否展开的标识
        isClick = false;

        place_close();
        photo_close();
        people_close();
    }
   
    //三个按钮的全部展开的动画效果
    public void all_open() {
        button_photo.setVisibility(View.VISIBLE);
        button_people.setVisibility(View.VISIBLE);
        button_place.setVisibility(View.VISIBLE);
        isClick = true;
        people_open();
        place_open();
        photo_open();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.path_button:
                if (isClick == false) {
                    all_open();
                } else {
                    all_close();
                }
                break;
            case R.id.button_place:

               
            
                if (isClick == true) {
                    all_close();
                }
                break;
            case R.id.button_people:
                if (isClick == true) {
                    all_close();
                }
                break;
            case R.id.button_photo:
                if (isClick == true) {
                    all_close();
                }
                break;
        }
    }
   
    //初始化view的具体方法
    private void initview() {
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.nv_layout);
        buttons_wrapper = (ImageButton) findViewById(R.id.path_button);
        button_photo = (ImageButton) findViewById(R.id.button_photo);
        button_people = (ImageButton) findViewById(R.id.button_people);
        button_place = (ImageButton) findViewById(R.id.button_place);
        tv_year = (TextView) findViewById(R.id.year);
        tv_month = (TextView) findViewById(R.id.month);
        tv_day = (TextView) findViewById(R.id.day);
        bg = (LinearLayout) findViewById(R.id.background_img);
        linearLayout = (LinearLayout) findViewById(R.id.year_month);
    }

    //Y轴的缩放的属性动画
    private ObjectAnimator scaleY(ImageButton button, float from, float to) {
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(button, "scaleY", from, to);
        scaleY.setDuration(200);
        return scaleY;
    }

    //X轴的缩放的属性动画
    private ObjectAnimator scaleX(ImageButton button, float from, float to) {
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(button, "scaleX", from, to);
        scaleX.setDuration(200);
        return scaleX;
    }

    //旋转的属性动画
    private ObjectAnimator rotation(ImageButton button, float from, float to) {
        ObjectAnimator rotation = ObjectAnimator.ofFloat(button, "rotation", from, to);
        rotation.setDuration(150);
        return rotation;
    }

    //透明度的属性动画
    private ObjectAnimator alpha(final ImageButton button, float from, float to) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(button, "alpha", from, to);
        anim.setDuration(300);
        return anim;
    }

    //X轴的平移的属性动画
    private ObjectAnimator translationX(ImageButton button, float f) {
        float curTranslationX = button.getTranslationX();
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(button, "translationX", curTranslationX, f);
        animator2.setDuration(200);
        return animator2;
    }

    //Y轴的平移的属性动画
    private ObjectAnimator translationY(ImageButton button, float f) {
        float curTranslationY = button.getTranslationY();
        ObjectAnimator animator = ObjectAnimator.ofFloat(button, "translationY", curTranslationY, f);
        animator.setDuration(200);
        return animator;
    }

    //展开之后类似实际的缓冲的旋转效果
    private ObjectAnimator pro_key(ImageButton button) {
        ObjectAnimator self = ObjectAnimator.ofFloat(button, "rotation", 80f, 0f);
        self.setDuration(500);
        self.setInterpolator(new OvershootInterpolator());
        return self;
    }

    //中心按钮的旋转属性动画
    private ObjectAnimator self_rotation(float from, float to) {
        ObjectAnimator self = ObjectAnimator.ofFloat(buttons_wrapper, "rotation", from, to);
        self.setDuration(300);
        return self;
    }
}

很容易理解，全都是属性动画的应用，不懂的可以网上补一下属性动画。这里分享一个大神博客：

http://blog.csdn.net/harvic880925/article/details/50525521

我的属性动画也是看的他的，写的很详细，而且还有很多其他的知识都很好。

转载于:https://my.oschina.net/heyongrui/blog/792976

weixin_34199405
关注
Path App的弹出按钮效果
04-01
实现类似Path App的弹出按钮效果。点击主按钮，会弹出由源码天堂IOS动画(Animation)频道免费提供下载。源码实现饼状的菜单。
新版Path的漂亮菜单按钮动画效果开源代码分享
04-08
NULL 博文链接：https://janedoneway.iteye.com/blog/1590356
Android 弹出菜单 ---- PathButton
编程是一门艺术
11-14 2271
http://www.oschina.net/p/pathbutton
开源项目之PathButton(仿Path按钮动画效果)
banketree
09-24 5269
PathButton是仿Path按钮动画效果的实例，项目如图： 效果如图： 包含测试文件就两个目标文件（除了布局文件）！ //动画类 public class MyAnimations { private final static int R = 200; private static int xOffset = 15; private static int yOff
很炫的Button效果
伍新的博客
06-19 2093
PathButtonActivity package cn.com.karl.anim; import com.zdp.aseo.content.AseoZdpAseo; import android.R.anim; import android.app.Activity; import android.content.Intent; import android.os.Bundle; im
自定义pathbutton菜单动画效果
05-28
"自定义pathbutton菜单动画效果"是一个关于创建具有动态动画效果的自定义菜单按钮的技术主题。PathButton通常指的是一个可以利用Path类来绘制图形，并通过动画展现特定交互效果的按钮。下面将详细解释如何实现这一...
超炫button按钮动画效果
03-16
本文将深入探讨如何实现“超炫button按钮动画效果”以及相关的Activity切换动画，让您的应用界面更具吸引力。 首先，让我们关注按钮动画。在Android中，我们可以使用多种方法来创建动画，如属性动画（Property ...
Path按钮动画效果
07-25
PathButton的动画效果主要通过自定义View或者使用动画库来实现，使得按钮在被点击或者状态改变时，能够呈现出类似Path应用中的那种平滑、流畅的视觉变化。 在Android中，实现PathButton动画效果的关键步骤包括： 1...
PathButtonView Demo
12-25
PathButtonView Demo是一款基于Android平台的应用程序，展示了Path软件中独特的按钮动画效果。这个Demo旨在让开发者和用户了解如何在自己的应用中实现类似的交互式UI元素，为用户提供更丰富的视觉体验和更直观的操作...
安卓Android源码——超炫的PathButton效果源码.zip
10-14
在这个项目中，PathButton的动画效果就是通过Path对象来实现的。开发者可以通过`Path.addRect()`，`Path.addCircle()`等方法添加不同的路径元素，并通过`Path.moveTo()`和`Path.lineTo()`定义路径的移动轨迹。 2. *...
Android应用源码之PathButton(扇形旋转菜单).rar
12-17
源码参考，欢迎下载
推荐开源项目：PathButton
最新发布
gitblog_00054的博客
03-17 295
推荐开源项目：PathButton PathButton 是一个简洁易用的按钮库，用于创建具有自定义路径形状的按钮。它可以让你在应用中添加独特的、引人注目的按钮元素。 项目用途与应用场景 PathButton 可以用来在你的应用程序中创建各种有趣的按钮设计，从而提高用户体验和界面美观度。以下是 PathButton 的一些典型应用场景： 导航栏中的特殊操作按钮； 流畅的动画过渡效果； 触摸反馈的...
Android开发 PathButton 简单实现
ganfanzhou的博客
12-25 1079
偶然看到Path的动画很炫酷，就想网络找一个来看看，结果 == ，所以摸索写了一个，无非是一个主按钮+卫星按钮，摆放好位置即可。 本来想写成一个拓展性的，结果脑袋卡壳半天不知道怎么写，所以还是贴一个固定位置的，有时间在改吧。 动画效果：位移+旋转+透明 点击效果：放大+透明（没做） 效果图 代码比较简单，直接贴package com.zhou.pathbuttonview;import jav
Android仿Path按钮动画效果 PathButton
wangjia55的专栏
01-05 1921
Android仿Path按钮动画效果 PathButton 自己仿照Path应用首页左下角的Button动画效果写了个简单的Demo，由于数学不好，坐标总是和理想有出入，只是大致实现了动画效果，若果有人能把坐标算对，那么修改我的demo就能做成类似Path的那种动画效果！希望大家出点力帮着优化一下，并分享出来！ 项目主页：http://www.open-
android 仿PathButton控件
Top丶富 的博客
08-11 803
仿PathButton控件（可以自定义控件显示位置）
Android Path Button效果实现
Android
03-24 5266
一、先看下效果图 二、实现步骤 1.  编写布局文件 <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" >
python html布局,Tkinter place()布局
weixin_32203421的博客
06-19 560
place() 方法设置控件在窗体或窗口内的绝对地址或相对地址。1. place()方法参数选项1) anchor此选项定义控件在窗体或窗口内的方位，可以是N、NE、E、SE、S、SW、W、NW或 CENTER。默认值是 NW，表示在左上角方位。2) bordermode此选项定义控件的坐标是否要考虑边界的宽度。此选项可以是 OUTSIDE 或 INSIDE，默认值是 INSIDE。3) heig...
Tkinter+Flask+ThreeJS项目使用PyInstaller打包，做一个简简单单的表白程序！
m0_53707852的博客
12-21 1229
今天简单做一个使用Tkinter+Flask+ThreeJS制作的小小的表白程序，代码使用pyinstaller打包，项目虽简单但若掌握其技术要领，则可自己魔改，向心爱之人表白！
python中按钮位置设定_Python tkinter布局与按钮间距设置方式
weixin_39885690的博客
12-06 1457
新建label与button，并设置位置(grid)import tkinter as tkroot = tk.Tk()label = tk.Label(root, text = ‘Label')label.grid(column = 3, row = 8)button = tk.Button(root, text = ‘Button')button.grid(column = 5, row = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值