安卓购物车添加商品动画效果

最新推荐文章于 2024-05-06 14:19:58 发布

原创最新推荐文章于 2024-05-06 14:19:58 发布 · 置顶 · 681 阅读

1 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种用于模拟商品加入购物车过程的自定义动画实现方式，通过View动画和属性动画结合，实现流畅的商品滑动及缩放效果。

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

自定义动画类（直接使用）

package com.bjut.sse.yimeiband.main;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.bjut.sse.yimeiband.wrap.WrapAnimationListener;

/**
 * 作者：haoran   
 * 说明：添加商品到购物车的动画
 */

public class ShoppingCartAnim {

    private ImageView buyImg;//播放动画的参照imageview
    private int[] start_location = new int[2];// 这是用来存储动画开始位置的X、Y坐标;
    private int[] end_location = new int[2];// 这是用来存储动画结束位置的X、Y坐标;

    private ViewGroup root;//动画层
    private AnimationSet set;


    public ShoppingCartAnim(Activity activity, Drawable drawable) {

        buyImg = new ImageView(activity);//buyImg是动画的图片
        buyImg.setImageDrawable(drawable);// 设置buyImg的图片
        //buyImg.setImageBitmap(bitmap);//也可以设置bitmap，可以用商品缩略图来播放动画
        root = (ViewGroup) activity.getWindow().getDecorView();//创建一个动画层
        root.addView(buyImg);//将动画参照imageview放入
    }

    /**
     * 将image图片添加到动画层并放在起始坐标位置
     *
     * @param view     播放动画的view
     * @param location 起始位置
     * @return
     */
    private View addViewFromAnimLayout(View view, int[] location) {
        int x = location[0];
        int y = location[1];
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
               60,
               60);
        lp.leftMargin = x;
        lp.topMargin = y;
        view.setLayoutParams(lp);
        return view;

    }

    public void startAnim(View startView, View endView) {
        // 1 这是获取起始目标view在屏幕的X、Y坐标（这也是动画开始的坐标）
        startView.getLocationInWindow(start_location);
        // 2 购物车结束位置(目标位置)
        endView.getLocationInWindow(end_location);
        // 3 新建一个图层位于源view之上
        View run_view = addViewFromAnimLayout(buyImg, start_location);

        // 计算位移
        int endX = end_location[0] - start_location[0];
        int endY = end_location[1] - start_location[1] + UiUtils.STATUE_BAR_HEIGHT;

        // 4 平移动画 绘制X轴 0到结束的x轴
        TranslateAnimation translateAnimationX = new TranslateAnimation(0,
                endX, 0, 0);
        //设置线性插值器
        translateAnimationX.setInterpolator(new LinearInterpolator());
        // 动画重复执行的次数
        translateAnimationX.setRepeatCount(0);
        //设置动画播放完以后消失，终止填充
        translateAnimationX.setFillAfter(true);

        // 5  平移动画 绘制Y轴
        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0,
                0, endY);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());
        translateAnimationY.setRepeatCount(0);
        translateAnimationX.setFillAfter(true);

        // 6 将两个动画放在动画播放集合里
        //  设置false使每个子动画都使用自己的插值器
        set = new AnimationSet(false);
        //设置动画播放完以后消失，终止填充
        set.setFillAfter(false);
        set.addAnimation(translateAnimationY);
        //set.addAnimation(scaleAnimation);
        set.addAnimation(translateAnimationX);
        set.setDuration(800);// 动画的执行时间
        /**
         * 动画开始播放的时候，参照对象要显示出来，如果不显示的话这个动画会看不到任何东西。
         * 因为不管用户点击几次动画，播放的imageview都是从参照对象buyImg中clone来的
         * */
        buyImg.setVisibility(View.VISIBLE);
        run_view.startAnimation(set);
        // 动画监听事件
        set.setAnimationListener(new WrapAnimationListener(){
            @Override
            public void onAnimationEnd(Animation animation) {
                super.onAnimationEnd(animation);
                //动画播放完以后，参照对象要隐藏
                buyImg.setVisibility(View.GONE);
                set.cancel();
            }
        });
    }
}

实现思路：在SourceImageview上加一层 ImageView，让ImageView 做view动画或属性动画，这里就只来一个view动画的set集合

包装类 WrapAnimationListener 简化书写

public class WrapAnimationListener implements Animation.AnimationListener {
    @Override
    public void onAnimationStart(Animation animation) {

    }

    @Override
    public void onAnimationEnd(Animation animation) {

    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
}

调用

  /**
     * 做添加商品的动画
     */
    private void doAddAnimation(ImageView v) {

        ShoppingCartAnim cartAnimation = new ShoppingCartAnim(getActivity(),v.getDrawable());
        cartAnimation.startAnim(v,target);

    }

购物车的小红点

        target = (ImageView) getActivity().findViewById(R.id.btn_title_right);
        bv = new BadgeView(getContext(), target);
        bv.setBadgeBackgroundColor(Color.TRANSPARENT);
        bv.setTextColor(Color.RED);
        bv.setTextSize(10);
        bv.setBadgePosition(BadgeView.POSITION_CENTER);

思考：用户体验，个人认为这个效果没必要，就不上图了。

添加属性动画：

ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(run_view, "translationX", 0,endX);
        translateAnimationX.setDuration(400);
        translateAnimationX.setInterpolator(new LinearInterpolator());

        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(run_view, "translationY", 0,endY);
        translateAnimationY.setDuration(400);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());

        //缩小动画
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(run_view, "scaleX", 1, 0.1f);
        scaleX.setDuration(400);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(run_view, "scaleY", 1, 0.1f);
        scaleY.setDuration(400);
        scaleY.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                root.removeView(buyImg);

            }

            @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(translateAnimationX);
        animatorSet.play(scaleY).with(translateAnimationY);
        animatorSet.start();

效果图：这里写图片描述