Android自定义控件开发入门与实战(4)属性动画

实现一个路径动画
在用户单击按钮时,把菜单弹出来,动画从小变到大,透明度从0到1,再次点击时,动画从大变小,透明度从1到0。
在这里插入图片描述
这个动画最核心的就是计算出每个小button所移动的x、y距离。我们假设这些小球到黄球menu的直线与y轴的夹角为α
比如说上面的小蓝球,它所移动的x、y距离应该是

  1. x = radius * sin(α)
  2. y = radius * cos(α)

因为小球都是往黄球的x轴的负方向、y轴的负方向移动,随意x y值都应该是负数
其次α的值应该是一个简单的除法
α = Math.toRadians(90) / (total - 1) * index
或者
α = Math.PI * index / ((total - 1) * 2)
因为 Math.toRadians(90)和Math.PI/2都是90°的意思
第一个球和y轴的夹角是0,而第二个则是22°,第三个是22°*2,以此类推
可以写出代码:

   public void onClick(View v) {
        if (!mIsMenuOpen) {
            mIsMenuOpen = true;
            openMenu();
        } else {
            mIsMenuOpen = false;
            closeMenu();
        }
    }
  private void openMenu() {
        doAnimationOpen(mItemButton1, 0, 5, 300);
        doAnimationOpen(mItemButton2, 1, 5, 300);
        doAnimationOpen(mItemButton3, 2, 5, 300);
        doAnimationOpen(mItemButton4, 3, 5, 300);
        doAnimationOpen(mItemButton5, 4, 5, 300);
    }

    private void doAnimationOpen(View v, int index, int total, int radius) {
        if (v.getVisibility() != View.VISIBLE) {
            v.setVisibility(View.VISIBLE);
        }
        double degree = Math.toRadians(90) / (total - 1) * index;
        int translationX = (int) -(radius * Math.sin(degree));
        int translationY = (int) -(radius * Math.cos(degree));
        AnimatorSet set = new AnimatorSet();
        set.playTogether(ObjectAnimator.ofFloat(v, "translationX", 0, translationX),
                ObjectAnimator.ofFloat(v, "translationY", 0, translationY),
                ObjectAnimator.ofFloat(v, "scaleX", 0f, 1f),
                ObjectAnimator.ofFloat(v, "scaleY", 0f, 1f),
                ObjectAnimator.ofFloat(v, "alpha", 0, 1));
        set.setDuration(500).start();
         set.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                v.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

 private void closeMenu() {
        doAnimationClose(mItemButton1, 0, 5, 300);
        doAnimationClose(mItemButton2, 1, 5, 300);
        doAnimationClose(mItemButton3, 2, 5, 300);
        doAnimationClose(mItemButton4, 3, 5, 300);
        doAnimationClose(mItemButton5, 4, 5, 300);
    }

    private void doAnimationClose(View v, int index, int total, int radius) {
        if (v.getVisibility() != View.VISIBLE) {
            v.setVisibility(View.VISIBLE);
        }
        double degree = Math.PI * index / ((total - 1) * 2);
        int translationX = (int) -(radius * Math.sin(degree));
        int translationY = (int) -(radius * Math.cos(degree));
        AnimatorSet set = new AnimatorSet();
        set.playTogether(ObjectAnimator.ofFloat(v, "translationX", translationX, 0),
                ObjectAnimator.ofFloat(v, "translationY", translationY, 0),
                ObjectAnimator.ofFloat(v, "scaleX", 1f, 0f),
                ObjectAnimator.ofFloat(v, "scaleY", 1f, 0f),
                ObjectAnimator.ofFloat(v, "alpha", 1, 0));
        set.setDuration(500).start();
    }

Animator的XML实现
在XML中有Animator对应的三个标签

  1. < animator />:对应ValueAnimator
  2. < objectAnimator />:对应ObjectAnimator
  3. < set />:对应AnimatorSet

要将动画放在res/animator下:
在这里插入图片描述
这些值得定义为:
在这里插入图片描述

第四章、属性动画进阶

这一章开始就有很多我没有学过的知识啦。
4.1 PropertyValuesHolder与KeyFrame
ValueAnimator和ObjectAnimator除了上述那些创建Animator实例的函数意外。还都有一个函数:

public static ValueAnimator ofPropertyValuesHolder(PropertyValuesHolder.....values)

public static ObjectAnimator ofPropertyValuesHolder(Object target,PropertyValuesHolder...values)

两个Animator都有这个函数,但一般而言,ValueAnimator使用的情况并不多,所以我们就看下ObjectAnimator中的ofPropertyValuesHolder。

ofPropetyValuesHolder
其含义就是:保存了动画过程中所需的操作和对应的值。我们通过ofFloat构造的动画,ofFloat函数的内部实现其实就是将传入的参数封装成PropetyValuesHolder实例来保存动画状态的。在封装成实例之后,后期的各种操作也是由ofPropetyValuesHolder为主的。

所以ObjectAnimator通过暴露出PropertyValuesHolder方法,我们就可以用它来构造动画。
通过PropetyValuesHolder实例的函数有以下几个:

public static PropertyValuesHolder ofFloat(String propertyName,float.....values);
public static PropertyValuesHolder ofInt(String propertyName,int.....values);
public static PropertyValuesHolder ofObject(String propertyName,TypeEvaluator evaluator,Object.....values);
public static PropertyValuesHolder ofKeyframe(String propertyName,Keyframe....values);
  1. 关于PropertyValuesHolder的ofFloat和ofInt
    就比ObjectAnimator中的ofFloat和ofInt少一个target
  2. 关于将PropertyValuesHolder设置到ObjectAnimator中
    ObjectAnimator有个暴露的方法,所以我们可以将构造好的PropertyValuesHolder实例加入进去
ObjectAnimator.ofPropertyValuesHolder(Object target,PropertyValuesHolder ....values)

如果传入多个实例,就会在targert上同时做多个操作。

关于PropertyValuesHolder的ofObject除了要加一个TypeEvaluator也差不多~

Keyframe
想要控制动画速率的变化,可以通过自定义插值器,也可以通过自定义Evaluator来实现。但如果真的让我们为了速率变化而自定义插值器或者Evaluator,因为要设计数学知识,所以也不简单,Google为我们定义了一个Keyframe类,直译就是关键帧。
跟flash中的那个一样~
生成方式为:

public static Keyframe ofFloat(float fraction,float value)

fraction为当前进度,value为动画当前所在的位置的值。
比如Keyframe.ofFloat(0,0)表示动画进度为0的时候,动画所在的位置数值为0
Keyframe.ofFloat(0.25f,-20f),表示动画进度为25的时候,动画所在的位置数值为-20.

在理解Keyframe.ofKeyframe函数的参数后,我们来看PropertyValuesHolder是如何使用Keyframe对象的。

public static PropertyHolder ofKeyframe(String propertyName,Ketframe .... values)

所以使用完成的Keyframe代码如下:

     Keyframe frame0 = Keyframe.ofFloat(0f,0);
     Keyframe frame1 = Keyframe.ofFloat(0.1f,-20f);
     Keyframe frame2 = Keyframe.ofFloat(1,0);
     PropertyValuesHolder holder = PropertyValuesHolder.ofKeyframe("rotation",frame0,frame1,frame2);
     Animator animator = ObjectAnimator.ofPropertyValuesHolder(mImage,frameHolder);
     animator.setDuration(1000);
     animator.start();

分成三步:

  1. 生成Keyframe对象
  2. 利用PropertyValuesHolder.ofKeyframe()函数生成PropertyValuesHolder对象
  3. 利用ObjectAnimator.ofPropertyValuesHolder函数生成Animator
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值