超炫按钮 Path按钮的实现+源码

最新推荐文章于 2021-06-09 11:48:36 发布
最新推荐文章于 2021-06-09 11:48:36 发布
阅读量727 收藏
点赞数
文章标签： Path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ289665044/article/details/9033961
版权

这个鄙人在CSDN上面发表的第一篇文章，很多不足，望大家体谅。

首先将PathButtons做为一个工具类，该类代码稍长，但方便其他程序使用Path按钮时直接继承就可以了。

/**
 * 该类作用：
 *@auther TangBowen
 *@Tel:
 *@E-mail:289665044@qq.com
 *@data 2013-5-23上午12:05:43
 */
package com.Berwin.pathbuttons.utils;

import com.Berwin.pathbuttons.R;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.ViewFlipper;

/**
 * 该类作用：将PathButtons生成一个工具类，方便其他程序中使用PathButton时直接继承就可用
 * 
 * @author TangBowen Tel:18200387036 E-mail:289665044@qq.com 2013-5-23上午12:05:43
 */
public class PathButtons extends Activity implements OnClickListener {
	// 红色按钮
	private ImageView ivComposer;
	private RotateAnimation clockwiseAm;
	private RotateAnimation anticlockwiseAm;

	// 摄像头
	private ImageView ivCamera;
	private TranslateAnimation cameraOutTA;
	private TranslateAnimation cameraInTA;

	// 个人信息
	private ImageView ivWith;
	private TranslateAnimation withOutTA;
	private TranslateAnimation withInTA;

	// 地方
	private ImageView ivPlace;
	private TranslateAnimation placeOutTA;
	private TranslateAnimation placeInTA;

	// 音乐
	private ImageView ivMusic;
	private TranslateAnimation musicOutTA;
	private TranslateAnimation musicInTA;

	// 聊天
	private ImageView ivThought;
	private TranslateAnimation thoughtOutTA;
	private TranslateAnimation thoughtInTA;

	// 睡眠
	private ImageView ivHome;
	private TranslateAnimation homeOutTA;
	private TranslateAnimation homeInTA;

	public static boolean isClockwise = true;
	AnimationSet animationSet = new AnimationSet(true);
	
	private RelativeLayout camera_Layout = null;
	private RelativeLayout music_Layout= null;
	private RelativeLayout place_Layout= null;
	private RelativeLayout home_Layout= null;
	private RelativeLayout thought_Layout= null;
	private RelativeLayout with_Layout= null;
	private ViewFlipper mViewFlipper = null;
	private Context mContext = null;
	private int mLastPosition = 0;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		mContext = this;
		findView();
	}

	/**
	 * 通过findViewById找到对应的组件 并设置一些移动或者旋转的属性
	 */
	private void findView() {
		ivComposer = (ImageView) this.findViewById(R.id.ivComposer);
		ivCamera = (ImageView) this.findViewById(R.id.ivCamera);
		ivWith = (ImageView) this.findViewById(R.id.ivWith);
		ivPlace = (ImageView) this.findViewById(R.id.ivPlace);
		ivMusic = (ImageView) this.findViewById(R.id.ivMusic);
		ivThought = (ImageView) this.findViewById(R.id.ivThought);
		ivHome = (ImageView) this.findViewById(R.id.ivHome);

		camera_Layout = (RelativeLayout) this.findViewById(R.id.camera_page);
		music_Layout = (RelativeLayout) this.findViewById(R.id.music_page);
		place_Layout = (RelativeLayout) this.findViewById(R.id.place_page);
		home_Layout = (RelativeLayout) this.findViewById(R.id.home_page);
		thought_Layout = (RelativeLayout) this.findViewById(R.id.thought_page);
		with_Layout = (RelativeLayout) this.findViewById(R.id.with_page);

		mViewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper1);

		camera_Layout.setVisibility(View.GONE);
		music_Layout.setVisibility(View.GONE);
		place_Layout.setVisibility(View.GONE);
		home_Layout.setVisibility(View.GONE);
		thought_Layout.setVisibility(View.GONE);
		with_Layout.setVisibility(View.GONE);

		ivComposer.setOnClickListener(this);
		ivCamera.setOnClickListener(this);
		ivWith.setOnClickListener(this);
		ivPlace.setOnClickListener(this);
		ivMusic.setOnClickListener(this);
		ivThought.setOnClickListener(this);
		ivHome.setOnClickListener(this);

		clockwiseAm = new RotateAnimation(0, +360, Animation.RELATIVE_TO_SELF,
				0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		clockwiseAm.setDuration(300);
		// 定义了动画的变化速度，可以实现匀速、正加速、负加速、无规则变加速等
		// LinearInterpolator平稳不变的
		// DecelerateInterpolator 在中间加速,两头慢
		// CycleInterpolator，曲线运动特效，要传递float型的参数
		// LinearInterpolator lin = new LinearInterpolator();
		DecelerateInterpolator decelerateInterpolator = new DecelerateInterpolator();
		clockwiseAm.setInterpolator(decelerateInterpolator);
		clockwiseAm.setAnimationListener(clockwiseAmListener);

		anticlockwiseAm = new RotateAnimation(0, -360,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		anticlockwiseAm.setDuration(300);
		anticlockwiseAm.setInterpolator(decelerateInterpolator);
		anticlockwiseAm.setAnimationListener(anticlockwiseAmListener);
		// http://www.cnblogs.com/sysbug/archive/2012/01/18/2325530.html
		cameraOutTA = new TranslateAnimation(Animation.ABSOLUTE, -5.0f,
				Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, 240.0f,
				Animation.ABSOLUTE, 10.0f);
		withOutTA = new TranslateAnimation(Animation.ABSOLUTE, -75f,
				Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, 225.0f,
				Animation.ABSOLUTE, 10.0f);
		placeOutTA = new TranslateAnimation(Animation.ABSOLUTE, -135f,
				Animation.ABSOLUTE, -10.0f, Animation.ABSOLUTE, 190f,
				Animation.ABSOLUTE, 10.0f);
		musicOutTA = new TranslateAnimation(Animation.ABSOLUTE, -175f,
				Animation.ABSOLUTE, -10.0f, Animation.ABSOLUTE, 130f,
				Animation.ABSOLUTE, 10.0f);
		thoughtOutTA = new TranslateAnimation(Animation.ABSOLUTE, -205f,
				Animation.ABSOLUTE, -10.0f, Animation.ABSOLUTE, 70f,
				Animation.ABSOLUTE, 10.0f);
		homeOutTA = new TranslateAnimation(Animation.ABSOLUTE, -215f,
				Animation.ABSOLUTE, -10.0f, Animation.ABSOLUTE, 5f,
				Animation.ABSOLUTE, 10.0f);
		// 设置持续时间
		cameraOutTA.setDuration(200);
		withOutTA.setDuration(200);
		placeOutTA.setDuration(200);
		musicOutTA.setDuration(200);
		thoughtOutTA.setDuration(200);
		homeOutTA.setDuration(200);

		cameraInTA = new TranslateAnimation(Animation.ABSOLUTE, 0.0f,
				Animation.ABSOLUTE, -5.0f, Animation.ABSOLUTE, 10.0f,
				Animation.ABSOLUTE, 240.0f);
		withInTA = new TranslateAnimation(Animation.ABSOLUTE, 0.0f,
				Animation.ABSOLUTE, -75f, Animation.ABSOLUTE, 10.0f,
				Animation.ABSOLUTE, 225.0f);
		placeInTA = new TranslateAnimation(Animation.ABSOLUTE, -10.0f,
				Animation.ABSOLUTE, -135f, Animation.ABSOLUTE, 10.0f,
				Animation.ABSOLUTE, 190f);
		musicInTA = new TranslateAnimation(Animation.ABSOLUTE, -10.0f,
				Animation.ABSOLUTE, -175f, Animation.ABSOLUTE, 10.0f,
				Animation.ABSOLUTE, 130f);
		thoughtInTA = new TranslateAnimation(Animation.ABSOLUTE, -10.0f,
				Animation.ABSOLUTE, -205f, Animation.ABSOLUTE, 10.0f,
				Animation.ABSOLUTE, 70f);
		homeInTA = new TranslateAnimation(Animation.ABSOLUTE, -10.0f,
				Animation.ABSOLUTE, -215f, Animation.ABSOLUTE, 10.0f,
				Animation.ABSOLUTE, 5f);

		cameraInTA.setDuration(200);
		withInTA.setDuration(200);
		placeInTA.setDuration(200);
		musicInTA.setDuration(200);
		thoughtInTA.setDuration(200);
		homeInTA.setDuration(200);

		ScaleAnimation scaleAnimation = new ScaleAnimation(1, 10f, 1, 10f,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		scaleAnimation.setDuration(150);
		animationSet.addAnimation(scaleAnimation);
		// animationSet.setFillAfter(true); //让其保持动画结束时的状态。

	}

	private void buttomOutAction() {
		ivComposer.startAnimation(clockwiseAm);

		ivCamera.startAnimation(cameraOutTA);
		ivCamera.setVisibility(View.VISIBLE);

		// 设置持续时间
		withOutTA.setStartOffset(20);
		ivWith.startAnimation(withOutTA);
		ivWith.setVisibility(View.VISIBLE);

		placeOutTA.setStartOffset(40);
		ivPlace.startAnimation(placeOutTA);
		ivPlace.setVisibility(View.VISIBLE);

		musicOutTA.setStartOffset(60);
		ivMusic.startAnimation(musicOutTA);
		ivMusic.setVisibility(View.VISIBLE);

		thoughtOutTA.setStartOffset(80);
		ivThought.startAnimation(thoughtOutTA);
		ivThought.setVisibility(View.VISIBLE);

		homeOutTA.setStartOffset(100);
		ivHome.startAnimation(homeOutTA);
		ivHome.setVisibility(View.VISIBLE);
	}

	private void buttomInAction() {
		ivComposer.startAnimation(anticlockwiseAm);

		ivHome.startAnimation(homeInTA);
		ivHome.setVisibility(View.GONE);

		thoughtInTA.setStartOffset(20);
		ivThought.startAnimation(thoughtInTA);
		ivThought.setVisibility(View.GONE);

		musicInTA.setStartOffset(40);
		ivMusic.startAnimation(musicInTA);
		ivMusic.setVisibility(View.GONE);

		placeInTA.setStartOffset(60);
		ivPlace.startAnimation(placeInTA);
		ivPlace.setVisibility(View.GONE);

		withInTA.setStartOffset(80);
		ivWith.startAnimation(withInTA);
		ivWith.setVisibility(View.GONE);

		cameraInTA.setStartOffset(100);
		ivCamera.startAnimation(cameraInTA);
		ivCamera.setVisibility(View.GONE);
	}

	private void AllButtonGone() {
		ivComposer.startAnimation(anticlockwiseAm);
		ivCamera.setVisibility(View.GONE);
		ivWith.setVisibility(View.GONE);
		ivPlace.setVisibility(View.GONE);
		ivMusic.setVisibility(View.GONE);
		ivThought.setVisibility(View.GONE);
		ivHome.setVisibility(View.GONE);

	}

	private void ActivityAction(int number){
		mViewFlipper.setInAnimation(mContext, R.anim.push_up_in);
		mViewFlipper.getChildAt(mLastPosition).setVisibility(View.VISIBLE);
		mViewFlipper.setOutAnimation(mContext, R.anim.push_up_out);
		mViewFlipper.setDisplayedChild(number);
		
	}
	/**
	 * 点击Button的事件
	 */
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.ivComposer:
			if (isClockwise) {
				buttomOutAction();
			} else {
				buttomInAction();
			}
			break;
		case R.id.ivCamera:
			ivCamera.startAnimation(animationSet);
			camera_Layout.setVisibility(View.VISIBLE);

			ActivityAction(0);
			mLastPosition = 0;
			AllButtonGone();
			break;
		case R.id.ivWith:
			ivWith.startAnimation(animationSet);
			with_Layout.setVisibility(View.VISIBLE);
			
			ActivityAction(1);
			mLastPosition = 1;
			AllButtonGone();
			break;
		case R.id.ivPlace:
			ivPlace.startAnimation(animationSet);
			place_Layout.setVisibility(View.VISIBLE);

			ActivityAction(2);
			mLastPosition = 2;
			AllButtonGone();
			break;
		case R.id.ivMusic:
			ivMusic.startAnimation(animationSet);
			music_Layout.setVisibility(View.VISIBLE);

			ActivityAction(3);
			mLastPosition = 3;
			AllButtonGone();
			break;
		case R.id.ivThought:
			ivThought.startAnimation(animationSet);
			thought_Layout.setVisibility(View.VISIBLE);

			ActivityAction(4);
			mLastPosition = 4;
			AllButtonGone();
			break;
		case R.id.ivHome:
			System.out.println("ivSleep");
			ivHome.startAnimation(animationSet);
			home_Layout.setVisibility(View.GONE);
			
			ActivityAction(5);
			mLastPosition = 5;
			AllButtonGone();
			break;
		}
		isClockwise = isClockwise ? false : true;
	}

	/**
	 * 当点击红色Button弹出功能按键时“+”的旋转特效
	 */
	private AnimationListener clockwiseAmListener = new AnimationListener() {
		public void onAnimationEnd(Animation arg0) {
			Matrix matrix = new Matrix();
			matrix.setRotate(45);
			Bitmap source = BitmapFactory.decodeResource(
					PathButtons.this.getResources(),
					R.drawable.composer_icn_plus);
			Bitmap resizedBitmap = Bitmap.createBitmap(source, 0, 0,
					source.getWidth(), source.getHeight(), matrix, true);
			ivComposer.setImageBitmap(resizedBitmap);
			if (source != null && !source.isRecycled())
				source.recycle();
		}

		public void onAnimationRepeat(Animation animation) {
		}

		public void onAnimationStart(Animation animation) {
		}
	};
	/**
	 * 当点击红色Button收回功能按键时“+”的旋转特效
	 */
	private AnimationListener anticlockwiseAmListener = new AnimationListener() {
		public void onAnimationEnd(Animation arg0) {
			Bitmap source = BitmapFactory.decodeResource(
					PathButtons.this.getResources(),
					R.drawable.composer_icn_plus);
			ivComposer.setImageBitmap(source);
		}

		public void onAnimationRepeat(Animation animation) {
		}

		public void onAnimationStart(Animation animation) {
		}
	};
}


在实现这个应用的MainActivity类，该类直接继承PathButtons即可。

package com.Berwin.pathbuttons;

import com.Berwin.pathbuttons.utils.PathButtons;
import android.os.Bundle;
import android.view.View;
/**
 * 
 * @author TangBowen
 *
 */
public class PathButtonsMainActivity extends PathButtons{
	@Override
	public void onCreate(Bundle savedInstanceState) {
		setContentView(R.layout.main_activity);
		super.onCreate(savedInstanceState);
	}
	@Override
	public void onClick(View v) {
		super.onClick(v);
	}
}

上面是Path按钮的实现的主要类，当然还有其他的xml文件，用于控制点击按钮的画面切换，和动画效果，在此不写出。源码地址点击打开链接点击打开链接

Berwin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Path按钮的实现
06-05
Path按钮的代码实现，其中将PathButton生成工具类，方便在其他程序中直接导入继承就可以实现Path按钮的实现。
App首页常见底部Path按钮(一分钟学会使用)
小成的博客
10-14 2957
虽然说App底部Path按钮显示使用越来越少见，不过因为项目需要可以写写
WPF 中path的小细节
anjingyatou的专栏
01-14 1707
今天遇到一个小问题，在这里与大家分享下，几个容易混淆的path格式。 第一行的path 和第二行的path绑定的结果相同，都表示绑定到这个集合。 第三行的path绑定有点意思，它绑定的是当前集合中的项目。 />
WPF -- 使用Path路径
qq_23018459的博客
04-19 2746
源地址在 WPF 中总会修改 Button 的 Style，比如一个自定义的 Close 按钮。刚入门的可能会用一张 PNG 格式的图片来做这个按钮的 Icon，但这个是不优雅的。而且你要改的时候还得去操作文件，想想都痛苦。但是很多人苦于不知道去哪里获取 Path，当然网上已经有不少使用 Photoshop 获取图片的 Path ，但如果图片的质量不好，获取的 Path 歪歪曲曲的也不好看，更何况...
App首页常见底部Path按钮
10-14
虽然说App底部Path按钮显示使用越来越少见，不过因为项目需要可以写写
Android 超炫的Path Button效果源码.zip
07-17
"Android 超炫的Path Button效果源码"就是一个很好的例子，它展示了一种独特的按钮交互效果，使得按钮在被点击时能呈现出动态的、沿着路径变化的视觉体验。这种效果通常能够吸引用户注意力，提高其对应用的兴趣。 ...
Android 超炫的Path Button效果源码.rar
12-03
【Android 超炫的Path Button效果源码】 在Android应用开发中，用户界面的设计是至关重要的，一个吸引人的UI可以提升用户体验，增加用户留存率。"Path Button"是一种独特的按钮设计，它通过自定义视图和动画效果，...
android 超炫的Path Button效果源码
03-14
"android 超炫的Path Button效果源码"就是这样一个示例，它展示了一种创新的按钮设计，通过Path动画使得按钮在用户交互时呈现出动态、流畅的效果。 Path Button的核心概念是利用Android的矢量图形库，如SVG...
模仿Path菜单按钮的效果
mengzhengjie的专栏
07-31 785
模仿Path菜单按钮的效果 利用Animation动画实现Path菜单的效果。 首先说一下几个动画 1，RotateAnimation   是旋转动画， new RotateAnimation(fromDegrees, toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_S
开源项目之PathButton(仿Path按钮动画效果)
banketree
09-24 5261
PathButton是仿Path按钮动画效果的实例，项目如图： 效果如图： 包含测试文件就两个目标文件（除了布局文件）！ //动画类 public class MyAnimations { private final static int R = 200; private static int xOffset = 15; private static int yOff
很炫的Button效果
伍新的博客
06-19 2084
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
Android开发 PathButton 简单实现
ganfanzhou的博客
12-25 1072
偶然看到Path的动画很炫酷，就想网络找一个来看看，结果 == ，所以摸索写了一个，无非是一个主按钮+卫星按钮，摆放好位置即可。 本来想写成一个拓展性的，结果脑袋卡壳半天不知道怎么写，所以还是贴一个固定位置的，有时间在改吧。 动画效果：位移+旋转+透明 点击效果：放大+透明（没做） 效果图 代码比较简单，直接贴package com.zhou.pathbuttonview;import jav
HTML中的button标签的使用，和介绍
热门推荐
datouniao1的博客
08-08 1万+
关于button按钮的介绍 知道：button是定义一个按钮，但是在表单中也有一个可以定义按，我们知道当<input type="button">的时候也是在网页上创建了一个按钮, 现在要说的是这个button这个标签和input里面的标签有怎样的区别。当然这个标签为我们提供了更为强大的功能，我们可以设置button，设置button上 面的文字，甚至可以加载图像等等多媒体
WPF自定义按钮中利用Path路径生成图标
qq_37189288的博客
06-09 2212
第一步，在App.xaml中定义一个Path路径资源 <ResourceDictionary> <!--Setting Image--> <PathFigureCollection x:Key="SettingPathData"> M704.334 320.166c-166.812-169.952-465.88-48.558-464.332 192.338C239.94 662.402 362.098 784.56 512 784.5c240.882 1.5
GEE数据集-高分辨率全球树冠高度地图（1 米）Meta 公司.pdf
07-17
绘制植被结构图对于了解全球碳循环以及监测基于自然的气候适应和减缓方法至关重要。通过对这些数据的重复测量，可以观察现有森林的砍伐或退化情况、森林的自然再生以及农林业等可持续农业实践的实施情况。高空间分辨率的树冠高度和树冠投影面积评估对于监测碳通量和评估基于树木的土地利用也很重要，因为森林结构在空间上可能高度异质，特别是在农林系统中。极高分辨率的卫星图像（地面采样距离小于一米）使提取树木层面的信息成为可能，同时还能进行大尺度监测。本文介绍了第一份同时为多个次国家辖区制作的高分辨率树冠高度图。具体来说，我们为加利福尼亚州和圣保罗州制作了非常高分辨率的树冠高度地图，与之前基于哨兵/GEDI 的全球树冠高度地图的十米（10 米）分辨率相比，分辨率有了显著提高。这些地图是通过在 2017 年至 2020 年的 Maxar 图像上训练的自监督模型中提取特征，并根据航空激光雷达地图训练密集预测解码器生成的。我们还引入了一个后处理步骤，使用在 GEDI 观测数据上训练的卷积网络。我们利用预留验证激光雷达数据以及与其他遥感地图和实地收集的数据进行比较，对所提出的地图进行了评估，发现我们的模型产生的平均绝对
Matlab下载安装、仿真实验方法.docx
最新发布
07-17
通过以上步骤，你可以完成Matlab的安装、仿真实验的进行以及撰写详细的实验报告。这些步骤将帮助你建立一个清晰、系统的仿真实验流程。
h5 源码 超炫 案例
01-01
H5源码超炫案例不仅仅是在视觉上具有吸引力，更重要的是能够通过技术手段实现用户与页面的互动体验，增强用户对产品或内容的认知和记忆。这种表现形式不仅在网页设计中有广泛的应用，也成为了品牌营销和数字化创意的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值