动画效果第一弹——购物车添加商品特效

本文介绍了一种在Android应用中实现商品加入购物车时的抛物线动画效果的方法。通过使用TranslateAnimation结合LinearInterpolator和AccelerateInterpolator,使得小球能够沿着抛物线路径移动,最终进入购物车图标,同时更新购物车中的商品数量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(一)引言

以前在饿了么上面订餐的时候,曾经看到过这么一个特效,就是将商品加入订单时,会有一个小球呈抛物线状落入购物车中,然后购物车中的数量会改变。具体的效果如下图。
这里写图片描述

效果很简单 ,就是一个抛物线的动画,那么我们应该用什么技术来实现呢?想了想,动画层是不个错的选择!下面开始分析及实现

(二)分析

当点击购买按钮的时候,我们在布局上加入一个动画层,然后让小球在动画层上做抛物线运动,就可实现上图中的效果了。
说到做抛物线运动,当然需要数学上的一点小知识。 抛物线的原理很简单,其实就是X轴方向保持匀速线性运动,而Y轴做加速度运动就好了。
在android的动画中,可以设置Interpolator属性。 Interpolator 被用来修饰动画效果,定义动画的变化率,可以使存在的动画效果accelerated(加速),decelerated(减速),repeated(重复),bounced(弹跳)等。而我们需要用到的就是LinearInterpolator线性匀速运动和AccelerateInterpolator加速度运动效果。
所以我们只要给小球分别设置X和Y方向上的TranslateAnimation平移动画,在设置相应的Interpolator ,即可实现抛物线效果。

(三)代码实现

关于布局文件和ListView就不必多说了 在最后提供的源码中都可以看到,我们这里主要讲解在动画层上实现抛物线动画的功能。

    holder.buyBtn.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
        // 用来存储按钮的在屏幕的X、Y坐标
        int[] startLocation = new int[2];
// 获取购买按钮的在屏幕的X、Y坐标(这也是动画开始的坐标)      
        v.getLocationInWindow(startLocation);
        //设置小球的图片
        ball = new ImageView(mContext);
        ball.setImageResource(R.drawable.sign);
        setAnim(ball, startLocation);// 开始执行动画
                }
            });

这段代码很简单,就是设置小球的初始坐标,然后开始执行动画。
下面是执行动画的函数。

private void setAnim(final View v, int[] startLocation) {
        anim_mask_layout = null;
        //创建动画层
        anim_mask_layout = createAnimLayout();
        //把动画小球添加到动画层
        anim_mask_layout.addView(v);
    final View view = addViewToAnimLayout(anim_mask_layout, v,startLocation);
        // 存储动画结束位置的X、Y坐标
        int[] endLocation = new int[2];
        // shopCart是购物车
        shopCart.getLocationInWindow(endLocation);

        // 计算位移
        // 动画位移的X坐标
        int endX = 0 - startLocation[0] + 40;
        // 动画位移的y坐标
        int endY = endLocation[1] - startLocation[1];
        //设置X方向上的平移动画
        TranslateAnimation translateAnimationX = new TranslateAnimation(0,
                endX, 0, 0);
        translateAnimationX.setInterpolator(new LinearInterpolator());
        // 动画重复执行的次数
        translateAnimationX.setRepeatCount(0);
        translateAnimationX.setFillAfter(true);
       //设置Y方向上的平移动画
        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0,
                0, endY);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());
        // 动画重复执行的次数
        translateAnimationY.setRepeatCount(0);
        translateAnimationX.setFillAfter(true);

        AnimationSet set = new AnimationSet(false);
        set.setFillAfter(false);
        set.addAnimation(translateAnimationY);
        set.addAnimation(translateAnimationX);
        set.setDuration(800);// 动画的执行时间
        view.startAnimation(set);
        // 动画监听事件
        set.setAnimationListener(new AnimationListener() {
            // 动画的开始
            @Override
            public void onAnimationStart(Animation animation) {
                v.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
            }

            // 动画的结束
            @Override
            public void onAnimationEnd(Animation animation) {
                v.setVisibility(View.GONE);
                buyNum++;//让购买数量加1
                buyNumView.setText(buyNum + "");//
                buyNumView.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
                buyNumView.show();
            }
        });

    }

buyNumView是github上的一个组件BadgeView.就是那个购物车右上角显示数字的标签,在QQ和微信上都能看到这玩意。
下面是将小球添加到动画层的代码

private View addViewToAnimLayout(final ViewGroup parent, final View view,
            int[] location) {
        int x = location[0];
        int y = location[1];
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.leftMargin = x;
        lp.topMargin = y;
        view.setLayoutParams(lp);
        return view;
    }

主要的实现就是这样了。大家也可以根据这个案例做一些改进,就可以做出其他的效果。
各位如果喜欢的话,可以留个言 点个赞~!

源码送上

js加入购物车抛物线动画购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 复制代码 代码如下: 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: ¥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ¥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ¥¥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ¥6969.00 乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视 加入购物车 然后,我们还需要在页面的右侧加上购物车以及提示信息。 复制代码 代码如下: 购物车 已成功加入购物车! CSS 我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码: 复制代码 代码如下: .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} .box:hover{border:1px solid #f90} .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} .box h4 span{font-size:20px} .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} .cart{color: #fff;t
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值