Android 属性动画实现抛物线动画

Posted 我爱烤冷面

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android 属性动画实现抛物线动画相关的知识,希望对你有一定的参考价值。

此前多次学习过安卓动画,知道有三种动画,知道三种动画的特性,但是一直没有实践过,看了没有多久,就忘记了,而且也不会用,这次通过实现“抛物线”动画,对安卓的动画有了一次较为明确的理解。

首先,安卓的三种动画有哪三种呢?
1、Tween Animation 渐变(补间)动画
2、Animation-list 逐帧动画
3、Property Animation——Animator 属性动画

以我的理解方式来解释这三种动画,以操作一个view为例。

第一,补间动画Tween Animation是四种动画类型(位移、旋转、透明度、伸缩)操作于这个view, 使这个view产生相应的视觉效果,但是没有改变view本身的任何属性(这个不想多解释了,每篇动画文章都会提到这句)。补间动画对应4个动画类:AlphaAnimation(透明度)、ScaleAnimation(缩放)、TranslateAnimation(位移)、RotateAnimation(旋转),我们可以在代码中,通过操作这4个类,来实现自己想要的动画效果,当然,我们也可以使用布局文件来实现(alph、scale、translate、rotate)。

第二,逐帧动画Animation-list 是按照给定的顺序,轮流显示一定数目的图像而显示的动画效果。参考博文http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1106/1915.html

第三,属性动画Animator,其实跟Tween 很像,也是那4种基础动画方式,但是属性动画可以改变view本身的属性,并且属性动画大体分为两种,第一种是跟tween十分相似的,ObjectAnimator,通过ofFloat、ofInt、ofObject来实现跟tween动画相似的动画方式。第二种是,ValueAnimator是计算动画过程中变化的值,包含动画的开始值,结束值,持续时间等属性。但并没有把这些计算出来的值应用到具体的对象上面,所以也不会有什么的动画显示出来。要把计算出来的值应用到对象上,必须为ValueAnimator注册一个监听器ValueAnimator.AnimatorUpdateListener,该监听器负责更新对象的属性值。在实现这个监听器的时候,可以通过getAnimatedValue()的方法来获取当前帧的值。 此时,我只想说,动画实在太复杂了!!这里我先简单介绍了3类动画的概念,接下来介绍一下实现抛物线动画,分别使用属性动画跟补间动画实现,那些负责的动画还没研究透彻,以后研究透彻了再写 !

抛物线动画的实现

首先,套用一句别人那里学来的话,理解一下抛物线动画的原理:两个位移动画,一个横向匀速移动,一个纵向变速移动,两个动画同时执行,就有了抛物线的效果。

然后,我们看一下两个动画相同的代码部分
起始点、终点位置
//获取起点坐标
int[] location2 = new int[2];
readingIV.getLocationInWindow(location2);
int x1 = location2[0];
int y1 = location2[1];
//获取终点坐标,最近拍摄的坐标
int[] location = new int[2];
mRecentPhoto.getLocationInWindow(location);
int x2 = location[0];
int y2 = location[1]

1、补间动画实现方式

  //两个位移动画
        TranslateAnimation translateAnimationX = new TranslateAnimation(0, -(x1 - x2)-offsetX, 0, 0);   //横向动画
        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, y2 - y1 + offsetY); //竖向动画
        translateAnimationX.setInterpolator(new LinearInterpolator());  //横向动画设为匀速运动
        translateAnimationX.setRepeatCount(0);// 动画重复执行的次数
        translateAnimationY.setInterpolator(new AccelerateInterpolator());  //竖向动画设为开始结尾处加速,中间迅速
        translateAnimationY.setRepeatCount(0);// 动画重复执行的次数
        // 组合动画
        AnimationSet anim = new AnimationSet(false);
        anim.setFillAfter(false);   //动画结束不停留在最后一帧
        anim.addAnimation(translateAnimationX);
        anim.addAnimation(translateAnimationY);
        anim.setAnimationListener(new Animation.AnimationListener()    //抛物线动画结束后,执行淡出动画
            @Override
            public void onAnimationStart(Animation animation) 
            

            @Override
            public void onAnimationRepeat(Animation animation) 
            

            @Override
            public void onAnimationEnd(Animation animation) 
                AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.01f);//淡出动画
                alphaAnim.setDuration(500);
                alphaAnim.setInterpolator(new LinearInterpolator());
                alphaAnim.setFillAfter(false);   //动画结束不停留在最后一帧
                alphaAnim.setRepeatCount(0);// 动画重复执行的次数
                readingIV.clearAnimation();
                readingIV.startAnimation(alphaAnim);

                alphaAnim.setAnimationListener(new Animation.AnimationListener() 
                    @Override
                    public void onAnimationStart(Animation animation) 
                    

                    @Override
                    public void onAnimationEnd(Animation animation) 
                        readingIV.setVisibility(View.INVISIBLE);
                        refreshCouldIndicator(activity, null, null);
                    

                    @Override
                    public void onAnimationRepeat(Animation animation) 
                    
                );
            
        );
        // 播放
        readingIV.setVisibility(View.VISIBLE);
        refreshCouldIndicator(activity, null, null);
        anim.setDuration(800);// 动画的执行时间
        anim.setStartOffset(400);
        readingIV.startAnimation(anim);

通过以上方法,可以实现抛物线,并在结束的位置执行淡出动画。但是,在部分机型上, 发现该动画执行结束后, 淡出动画会跑到起始位置执行, 但是大部分机型都是没问题的, 这种适配问题我没搞清楚是什么原因导致的, 但是既然是回到初始位置执行,那么就说明跟view的属性没发生变化有关,于是采用属性动画来实现,解决了该问题,原理几乎相同。

//抛物线动画
        ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(view, "translationX", 0, -(x1 - x2) - offsetX);
        translateAnimationX.setDuration(800);
        translateAnimationX.setInterpolator(new LinearInterpolator());
//        translateAnimationX.start();
        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(view, "translationY", 0, y2 - y1 + offsetY);
        translateAnimationY.setDuration(800);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());

        //缩小动画
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1, 0);
        scaleX.setDuration(200);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1, 0);
        scaleY.setDuration(200);
        scaleY.addListener(new Animator.AnimatorListener() 
            @Override
            public void onAnimationStart(Animator animation) 
            

            @Override
            public void onAnimationEnd(Animator animation) 
                anim_mask_layout.removeView(readingIV);
                setLvTouch(activity, false);
            

            @Override
            public void onAnimationCancel(Animator animation) 
            

            @Override
            public void onAnimationRepeat(Animator animation) 
            
        );
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(translateAnimationX).with(translateAnimationY);
        animatorSet.play(scaleX).with(scaleY).after(translateAnimationX);
        animatorSet.start();

源码下载

以上是关于Android 属性动画实现抛物线动画的主要内容,如果未能解决你的问题,请参考以下文章

把商品添加到购物车的动画效果(贝塞尔曲线)

把商品添加到购物车的动画效果(贝塞尔曲线)

Android开发-根据起点终点实现直线逐点绘制动画-02

ios之CAKeyframeAnimation关键帧动画详解

Android 利用二次贝塞尔曲线模仿购物车添加物品抛物线动画

JS 实现抛物线动画