Android使用动画动态添加商品进购物车

本文实例为大家分享了Android添加商品进购物车的具体代码,供大家参考,具体内容如下

1、首先展示下效果图

2、讲一下思路,小球由加号位置运动到购物车位置,首先得获得这两个点在整个屏幕中的坐标,然后分别计算这两个点的横纵坐标的差值,再通过TranslateAnimation这个类设置小球在X、Y方向上的偏移量,最后通过AnimationSet这个类将这两个动画放在一起执行。这是小球运动的动画,还有就是购物车变大缩小的动画。这个动画通过ObjectAnimator的ofFloat的方法设置缩放,要注意的是当小球落下的时候,购物车才开始动画,所以要设置一下setStartDelay这个方法。

3、具体的代码我就贴一下动画部分的代码,如果想要这个Demo看下我最后贴出的Github的地址

@Override
  public void setAnim(View view) {
    // TODO Auto-generated method stub
    int[] start_location = new int[2];// 一个整型数组用来存储按钮在屏幕的X,Y坐标
    view.getLocationInWindow(start_location);// 购买按钮在屏幕中的坐标
    buyImg = new ImageView(this);// 动画的小圆圈
    buyImg.setImageResource(R.drawable.sign);// 设置buyImg的图片
    setAnim(buyImg, start_location);
  }

  /**
   * hdh: 创建动画层
   *
   * @return
   */
  private ViewGroup createAnimLayout() {
    ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView();// 获得Window界面的最顶层
    LinearLayout animLayout = new LinearLayout(this);
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
    animLayout.setLayoutParams(lp);
    //animLayout.setId();
    animLayout.setBackgroundResource(android.R.color.transparent);
    rootView.addView(animLayout);
    return animLayout;
  }

  /**
   * hdh:
   *
   * @param vp
   * @param view
   * @param location
   * @return
   */
  private View addViewToAnimLayout(final ViewGroup vp, 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;
  }

  /**
   * hdh:动画
   *
   * @param v
   * @param start_location
   */
  private void setAnim(final View v, int[] start_location) {
    anim_mask_layout = null;
    anim_mask_layout = createAnimLayout();
    anim_mask_layout.addView(v);
    View view = addViewToAnimLayout(anim_mask_layout, v, start_location);
    int[] end_location = new int[2];// 存储动画结束位置的X,Y坐标
    text_chart_num.getLocationInWindow(end_location);// 将购物车的位置存储起来
    // 计算位移
    int endX = end_location[0] - start_location[0];// 动画位移的X坐标
    int endY = end_location[1] - start_location[1];// 动画位移的y坐标
    TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0);
    translateAnimationX.setInterpolator(new LinearInterpolator());// 设置此动画的加速曲线。默认为一个线性插值。
    translateAnimationX.setRepeatCount(0);// 动画重复的次数
    translateAnimationX.setFillAfter(true);

    TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
    translateAnimationY.setInterpolator(new AccelerateInterpolator());
    translateAnimationY.setRepeatCount(0);// 动画重复次数
    translateAnimationY.setFillAfter(true);

    AnimationSet set = new AnimationSet(false);
    set.setFillAfter(false);
    set.addAnimation(translateAnimationX);
    set.addAnimation(translateAnimationY);
    set.setDuration(1000);
    view.startAnimation(set);
    set.setAnimationListener(new Animation.AnimationListener() {

      @Override
      public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub
        v.setVisibility(View.VISIBLE);
      }

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

      }

      @Override
      public void onAnimationEnd(Animation animation) {
        // TODO Auto-generated method stub
        v.setVisibility(View.GONE);
      }
    });
    ObjectAnimator anim = ObjectAnimator//
        .ofFloat(view, "scale", 1.0F, 1.5F, 1.0f)//
        .setDuration(500);//
    anim.setStartDelay(1000);
    anim.start();
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        float cVal = (Float) animation.getAnimatedValue();
        image_chart.setScaleX(cVal);
        image_chart.setScaleY(cVal);
        text_chart_num.setScaleX(cVal);
        text_chart_num.setScaleY(cVal);
      }
    });
  }

4、GitHub地址:点击打开链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android利用二阶贝塞尔曲线实现添加购物车动画详解

    一.引入 其实之前一直以为像饿了么或者是美团外卖那种把商品添加到购物车的动画会很难做,但是实际做起来好像并没有想象中的那么难哈哈. 布局主要使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager 动画主要使用二阶贝塞尔曲线与属性动画 消息传递使用EventBus普通事件 二.大致思路 1.如图所示主要有三个点,起点.终点.以及贝塞尔曲线的控制点 2.起点即点击的View的位置,一般来说用如下方式即可

  • Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹

    不知上一节高仿QQ未读消息气泡大家还喜欢么,今天继续练习贝赛尔曲线,这一节我们通过贝赛尔曲线和属性动画估值器实现添加至购物车的运动轨迹,效果如下: 1.新建自定义View,重写构造方法,初始化Paint.Path: 2.确定起始点.终止点.控制点坐标,这里我们直接固定: @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh);

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

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

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • 详解Android实现购物车页面及购物车效果(点击动画)

    本文介绍了Android实现购物车页面及购物车效果(点击动画),分享给大家,具体如下: 效果图如下: 思路: (1)思考每个条目中的数字的更新原理. (2)购物车的动画效果. (3)购物清单怎么显示(这个我暂时没有写,如果需要的话,可以在我的简书下给我留言). 1.因为进入页面,所有的商品个数都显示为零,所以我用 ArrayList<HashMap<String, Object>> data,把商品集合都附上零: //下面把data都添加0,为了刚开始显示时,显示的是0 for (

  • Android实现购物车添加物品的动画效果

    前言:当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,最近做到这个功能,借助别人的demo写了一个. 效果: 开发环境:AndroidStudio2.1.2+gradle-2.10 涉及知识:1.沉浸式状态栏,2.单位精度计算(价格),3.List之Iterator. 部分代码: public class MainActivity extends AppCompatActivity implements FoodAdapter.FoodActionCa

  • Android实现添加商品到购物车动画效果

    本文实例为大家分享了Android添加商品到购物车的具体代码,供大家参考,具体内容如下 实现需求 在商品列表页面中,从列表item添加商品时,实现一个动画,给人感觉像是在添加商品到购物车. 思路 1.获取各个动画执行对象的起点和终点的坐标,利用PathMeasure绘制绘制贝塞尔曲线: 2.为商品图片设置属性动画: 3.为动画设置addUpdateListene监听器,更新view的坐标. 效果图: MainActivity.java package com.zlw.yzm.demo; impo

  • Android仿饿了么加入购物车旋转控件自带闪转腾挪动画的按钮效果(实例详解)

    概述 在上文,酷炫Path动画已经预告了,今天给大家带来的是利用 纯自定义View,实现的仿饿了么加入购物车控件,自带闪转腾挪动画的按钮. 效果图如下: 图1 项目中使用的效果,考虑到了View的回收复用, 并且可以看到在RecyclerView中使用,切换LayoutManager也是没有问题的, 图2 Demo效果,测试各种属性值 注意,本控件非继承自ViewGroup,而是纯自定义View实现.理由如下: 1 减少布局层级,从而提高性能 2 文字和图形纯draw,用到什么draw什么,没有

  • Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • android中贝塞尔曲线的应用示例

    前言: 贝塞尔曲线又称贝兹曲线,它的主要意义在于无论是直线或曲线都能在数学上予以描述.最初由保罗·德卡斯特里奥(Paul de Casteljau)于1959年运用德卡斯特里奥演算法开发(de Casteljau Algorithm),在1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表.目前广泛应用于图形绘制领域来模拟光滑曲线,为计算机矢量图形学奠定了基础.在一些图形处理软件中都能见到贝塞尔曲线,比如CorelDraw中翻译成"贝赛尔工具":而在Firewo

随机推荐