首先,将整个菜单动画分解开来。
1.一级菜单按钮的旋转动画2个,十字和叉叉状态的转换。
2.二级菜单按钮的平移动画2个,弹簧效果的in和out
3.二级菜单按钮的点击效果,放大消失,其他未点击按钮缩小消失。
4.一级菜单按钮的恢复效果,放大出现
现在 逐一去实现:
首先是一级菜单按钮的旋转动画,这2个动画可以直接在xml中定义,然后load到代码中来,具体代码如下:
rotate_story_add_button_in.xml
[code="java"]<?xml version="1.0" encoding="UTF-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:duration="150" android:fromdegrees="0.0" android:todegrees="-225.0" android:pivotx="50.0%" android:pivoty="50.0%" android:fillafter="true" android:fillenabled="true"></rotate>[/code]
rotate_story_add_button_out.xml
[code="java"]<?xml version="1.0" encoding="UTF-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:duration="150" android:fromdegrees="-225.0" android:todegrees="0.0" android:pivotx="50.0%" android:pivoty="50.0%" android:fillafter="true" android:fillenabled="true"></rotate>[/code]
这2段没什么好说的,定义好角度即可。
接下来是需要我们在代码中定义的动画部分,这几个动画的部分需要定义一个基类,作为统一的调用接口,这个基类被称作InOutAnimation,继承自AnimationSet,这个基类的主要工作是为view提供in和out两种不同的状态时的动画效果。其子类需要实现2个方法:
[code="java"]1 protected abstract void addInAnimation(View aview[]);
2 protected abstract void addOutAnimation(View aview[]);[/code]
从而进行view的入场和离场动画。
下面是InOutAnimation的代码部分:
[code="java"]public abstract class InOutAnimation extends AnimationSet {
public Direction direction;
public enum Direction {
IN, OUT;
}
public InOutAnimation(Direction direction, long l, View[] aview) {
super(true);
this.direction = direction;
switch (this.direction) {
case IN:
addInAnimation(aview);
break;
case OUT:
addOutAnimation(aview);
break;
}
setDuration(l);
}
protected abstract void addInAnimation(View aview[]);
protected abstract void addOutAnimation(View aview[]);
}[/code]
接下来就是重头戏啦,二级菜单按钮的平移动画。
这部分动画看起来可能会比较复杂和神秘,其实不然,当把整个动画过程分解开来的时候,都是最最简单的平移而已,我们要做的只是定义一下平移的起点和终点、开始动画的顺序以及插值(Interpolator),让整个过程看起来很炫。
先说动画的起点和终点吧,起点很简单,就是整个view的左下角,即0,0点,为了效果漂亮一些,我们稍微的将左下角位置定义的有一些偏移,经验上的值是16,-13,这个点的位置看你心情而定咯~ 好 终点就是你想让他在的点上就好了,终点我们将定义到layout中去,为这个2级菜单指定一个margin的值就好。
还是上代码比较直观:
动画如下:
1 收缩部分:TranslateAnimation(xOffset + -mlp.leftMargin, 0F,yOffset + mlp.bottomMargin, 0F)
2 扩张部分:TranslateAnimation(0F, xOffset + -mlp.leftMargin, 0F,yOffset + mlp.bottomMargin)
位置定义部分:
例如:
android:layout_marginBottom="142dp" android:layout_marginLeft="10.667dp"
这个位置大家可以直观的在布局文件中看到,详细的布局文件也将在下面展示。
以上是单独的每一个二级按钮的动画,而组合的动画就是指定了一下开始的时间差以及插值:
这个就是奥妙所在了,OvershootInterpolator AnticipateInterpolator 这2个插值器提供了弹力效果。
整段的代码如下:
ComposerButtonAnimation.java
[code="java"]位置定义部分:
例如:
android:layout_marginBottom="142dp" android:layout_marginLeft="10.667dp"
这个位置大家可以直观的在布局文件中看到,详细的布局文件也将在下面展示。
以上是单独的每一个二级按钮的动画,而组合的动画就是指定了一下开始的时间差以及插值:
这个就是奥妙所在了,OvershootInterpolator AnticipateInterpolator 这2个插值器提供了弹力效果。
整段的代码如下:
ComposerButtonAnimation.java
[code="java"]public class ComposerButtonAnimation extends InOutAnimation {
public static final int DURATION = 500;
private static final int xOffset = 16;
private static final int yOffset = -13;
public ComposerButtonAnimation(Direction direction, long l, View view) {
super(direction, l, new View[] { view });
}
public static void startAnimations(ViewGroup viewgroup,
InOutAnimation.Direction direction) {
switch (direction) {
case IN:
startAnimationsIn(viewgroup);
break;
case OUT:
startAnimationsOut(viewgroup);
break;
}
}
private static void startAnimationsIn(ViewGroup viewgroup) {
for (int i = 0; i
分享到:
相关推荐
android版的path2.0菜单功能实现源码 免费下载
此为AS工程文件,配套我的博客源代码,讲了用Android属性动画简单的实现Path2.0中的菜单效果,非常简单。
老二牛车教育程矢 Axure夜话之Axure手机原型视频教程之Path2.0菜单.rar
安卓Android源码——PathButton(扇形旋转菜单).zip
Android 代码,实现path2.0 炫酷的旋转菜单效果,点击主按钮 会在按钮周围弹出一系列小按钮,点击小按钮 所有小按钮 缩回到主按钮位置,动画效果非常绚丽.
原来PATH的菜单效果如此简单。布局+TranslateAnimation搞定
android版的path2.0菜单功能实现源码 path2.0的动态菜单确实很炫,在网上没找的某个大拿自己实现的。感觉效果还可以,就分享出来让大家一起来改进
android PATH菜单实现,简洁 旋转菜单
设计工具类 使用Axure设计Path2.0
ANDROID 仿path按钮效果(无旋转),效果还可以,旋转好像比较复杂,,
目前Path风格的菜单已经很普遍了。这个demo不同于path,是一个真实的扇形的菜单,有扇形的打开关闭效果,也可以对每个扇区添加点击事件,不过是个半成品,没有弄成可配置属性的。
android仿path菜单,支持:左上;右上;右下;左下;中五个方向进行布局。利用三角函数计算位置,位置更加精准,弧度更加圆滑。
android 仿Path菜单,具备基本功能。 1、若需要增加item,在xml中添加一个imageview即可,代码会自动按扇形展开 2、可以设置在屏幕的某个角展开 3、可以设置item的单击事件
android版的path2.0菜单功能实现,附带源代码
该源码由源码天堂免费提供下载,源码实现类似Path 2.0应用的列表效果。在列表的第一行加上图片,当手指往下拉动列表时,第一行的图片下面的部分会显示出来,即所谓的视差效果(所谓“视差滚动”就是让多层背景以不同...
这是一款android版的path2.0菜单功能实现效果源码,该源码比较简单,而且界面设计非常不错的,效果很好的,大家可以研究一下,这个效果确实做得很不错的,值得开发者学习。
android仿path半圆形菜单
仿path菜单,支持:左上;右上;右下;左下;中五个方向进行布局。利用三角函数计算位置,位置更加精准,弧度更加圆滑。中间布局时支持半圆形和圆形。
Android画图Path的使用
Android中Path类的quadTo和lineTo函数的区别