`
bjstyle
  • 浏览: 4713 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

android实现Path2.0中绚丽的的旋转扇形菜单

阅读更多
首先,将整个菜单动画分解开来。 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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics