欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

安卓特效实现之添加商品抛物线动画

程序员文章站 2022-05-04 20:01:36
...

大家好,我是梦辛工作的是灵,最近在做一款购物的APP,然后客户要求有个加入商品时候,商品自动调入购物车的一个特效,之前没有做过的我一脸懵逼,毫无头绪,好吧,不得不承认我自己很菜,然后经过多次百度和查阅资料,大概知道了实现逻辑,就是 新建一个 ImageView 从 起点 到 终点 显示贝塞尔曲线的一个动画过程,动画实现完后,在将ImageView 移除,然后下面是实现代码(我也是参考其他大佬的):

 	/**
     * 商品加入到购物车的动画效果 
     */
    private void addCart(Bitmap bitmap,View start,View end,RelativeLayout parentView) {
		 
        // 1.先创建 一个 用于执行动画的 ImageView 
        final ImageView goods = new ImageView(this);
        goods.setImageBitmap(bitmap); 
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(50,50);
        parentView.addView(goods, params);
 
        //2.获得父视图的坐标
        int[] parentLocation = new int[2];
        parentView.getLocationInWindow(parentLocation);

        //3.获得起点视图的坐标
        int startLoc[] = new int[2];
        start.getLocationInWindow(startLoc);

        //4.获得终点视图的坐标
        int endLoc[] = new int[2];
        end.getLocationInWindow(endLoc);
 
		//5.计算动画开始的坐标  结束的坐标
		
        //开始掉落的商品的起始点:商品起始点 - 父布局起始点 + 该商品图片的一半
        float startX = startLoc[0] - parentLocation[0] + start.getWidth() / 2;
        float startY = startLoc[1] - parentLocation[1] + start.getHeight() / 2;

        //商品掉落后的终点坐标:购物车起始点-父布局起始点+购物车图片的1/5
        float endX = endLoc[0] - parentLocation[0] + end.getWidth() / 5;
        float endY = endLoc[1] - parentLocation[1];

		// 6.计算中间动画的插值坐标(贝塞尔曲线)(其实就是用贝塞尔曲线来完成起终点的过程)
		
        //开始绘制贝塞尔曲线 路径
        Path path = new Path();
        
        //移动到起始点(贝塞尔曲线的起点)
        path.moveTo(startX, startY);
        
        //使用二次萨贝尔曲线:注意第一个起始坐标越大,贝塞尔曲线的横向距离就会越大,一般按照下面的式子取即可
        path.quadTo((startX + endX) / 2, startY, endX, endY);
        
        //mPathMeasure用来计算贝塞尔曲线的曲线长度和贝塞尔曲线中间插值的坐标,
        // 如果是true,path会形成一个闭环
        PathMeasure mPathMeasure = new PathMeasure(path, false);

        //属性动画实现(从0到贝塞尔曲线的长度之间进行插值计算,获取中间过程的距离值)
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength());
        valueAnimator.setDuration(300);
        
        // 匀速线性插值器
        valueAnimator.setInterpolator(new LinearInterpolator());
        
        float[] mCurrentPosition = new float[2];
        
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 当插值计算进行时,获取中间的每个值,
                // 这里这个值是中间过程中的曲线长度(下面根据这个值来得出中间点的坐标值)
                float value = (Float) animation.getAnimatedValue();
                
                //获取当前点坐标封装到mCurrentPosition
                // boolean getPosTan(float distance, float[] pos, float[] tan) :
                // 传入一个距离distance(0<=distance<=getLength()),然后会计算当前距
                // 离的坐标点和切线,pos会自动填充上坐标,这个方法很重要。
                mPathMeasure.getPosTan(value, mCurrentPosition, null);
                
                //mCurrentPosition此时就是中间距离点的坐标值
                // 移动的商品图片(动画图片)的坐标设置为该中间点的坐标
                goods.setTranslationX(mCurrentPosition[0]);
                goods.setTranslationY(mCurrentPosition[1]);
                
            }
        });
        
		// 7.执行动画
        valueAnimator.start();

		// 8.监听动画结束
		valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            //当动画结束后:
            @Override
            public void onAnimationEnd(Animator animation) {
                // 移除视图
                parentView.removeView(goods);
                // 购物车的数量增加
                doAddGoods();  
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

这次学到了,大佬的代码有点乱,我重新整理和排布了下,顺带再次理解了下思路,争取后续能举一反三,大家一起加油吧
大佬传送门https://www.jb51.net/article/95991.htm

相关标签: 安卓动画