高仿饿了么加减动画

原创 2018年04月16日 09:56:49

效果

效果图

apk下载

分析

1.初始addView、subView、numView都在父布局的right

 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        for (int i = 0; i < count; i++) {
            View view = getChildAt(i);
            view.layout(width - view.getMeasuredWidth(), height / 2 - view.getMeasuredHeight() / 2, width, height / 2 + view.getMeasuredHeight() / 2);
        }
    }

2.开始动画

subView
  • TranslationX:right->left
  • Rotation:0->-360
  • Alpha:0->1
  • ScaleX:->0.1->1
  • ScaleY:->0.1->1
        ObjectAnimator subTranslation = ObjectAnimator.ofFloat(btnSub, "TranslationX", 0, (width - btnSub.getMeasuredWidth()) * -1f);
        ObjectAnimator subRotation = ObjectAnimator.ofFloat(btnSub, "Rotation", 0, -360);
        ObjectAnimator subAlpha = ObjectAnimator.ofFloat(btnSub, "Alpha", 0, 1f);
        ObjectAnimator subScaleX = ObjectAnimator.ofFloat(btnSub, "ScaleX", 0.1f, 1f);
        ObjectAnimator subScaleY = ObjectAnimator.ofFloat(btnSub, "ScaleY", 0.1f, 1f);
numView
  • TranslationX:right->center
  • Rotation:0->-360
  • Alpha:0->1
  • ScaleX:->0.1->1
  • ScaleY:->0.1->1
        ObjectAnimator numberTranslation = ObjectAnimator.ofFloat(textNumber, "TranslationX", 0, (width - textNumber.getMeasuredWidth()) / -2f);
        ObjectAnimator numberRotation = ObjectAnimator.ofFloat(textNumber, "Rotation", 0, -360);
        ObjectAnimator numberAlpha = ObjectAnimator.ofFloat(textNumber, "Alpha", 0, 1f);
        ObjectAnimator numberScaleX = ObjectAnimator.ofFloat(textNumber, "ScaleX", 0.1f, 1f);
        ObjectAnimator numberScaleY = ObjectAnimator.ofFloat(textNumber, "ScaleY", 0.1f, 1f);

组合

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setInterpolator(new LinearInterpolator());
        animatorSet.playTogether(numberTranslation, numberRotation, numberAlpha, numberScaleX, numberScaleY,
                subTranslation, subRotation, subAlpha, subScaleX, subScaleY);
        animatorSet.setDuration(duration);
        animatorSet.setStartDelay(startDelay);
        animatorSet.start();

3.结束动画与开始相反

动画结束后要改变textview的值并且取消动画监听。

        btnSub.clearAnimation();
        ObjectAnimator subTranslation = ObjectAnimator.ofFloat(btnSub, "TranslationX", (width - btnSub.getMeasuredWidth()) * -1f, 0);
        ObjectAnimator subRotation = ObjectAnimator.ofFloat(btnSub, "Rotation", 360, 0);
        ObjectAnimator subAlpha = ObjectAnimator.ofFloat(btnSub, "Alpha", 1f, 0);
        ObjectAnimator subScaleX = ObjectAnimator.ofFloat(btnSub, "ScaleX", 1f, 0.1f);
        ObjectAnimator subScaleY = ObjectAnimator.ofFloat(btnSub, "ScaleY", 1f, 0.1f);

        textNumber.clearAnimation();
        ObjectAnimator numberTranslation = ObjectAnimator.ofFloat(textNumber, "TranslationX", (width - textNumber.getMeasuredWidth()) / -2f, 0);
        ObjectAnimator numberRotation = ObjectAnimator.ofFloat(textNumber, "Rotation", 360, 0);
        ObjectAnimator numberAlpha = ObjectAnimator.ofFloat(textNumber, "Alpha", 1f, 0);
        ObjectAnimator numberScaleX = ObjectAnimator.ofFloat(textNumber, "ScaleX", 1f, 0.1f);
        ObjectAnimator numberScaleY = ObjectAnimator.ofFloat(textNumber, "ScaleY", 1f, 0.1f);

        final AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setInterpolator(new LinearInterpolator());
        animatorSet.playTogether(numberTranslation, numberRotation, numberAlpha, numberScaleX, numberScaleY,
                subTranslation, subRotation, subAlpha, subScaleX, subScaleY);
        animatorSet.setDuration(duration);
        animatorSet.setStartDelay(startDelay);
        animatorSet.start();
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                textNumber.setText(String.valueOf(number));
                animatorSet.removeAllListeners();
            }
        });

方法

  • 获取number
    public int getNumber()
  • 接口 isAdd: true代表点击+,false代表点击-,number为当前值
public void setListener(OnChangeListener listener) {
             this.listener = listener;
         }

         public interface OnChangeListener {
             void onChange(boolean isAdd, int number);
         }

GitHub

GitHub

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LuckKissMo/article/details/79956756

android 饿了么 加入购物车动画(贝塞尔曲线绘制)

先看下效果吧 为什么要做这个 1,每天使用某订餐软件,加入购物车比较炫酷,加入的时候 加了一系列的动画,物品掉落到篮子里面。上网查证这个是贝塞尔曲线。 canvas中提供了绘制 贝塞尔曲线的方法...
  • u014510302
  • u014510302
  • 2016年08月25日 11:39
  • 1304

vue实战:vue.js高仿饿了么webapp

学习了下mook的前端实战教程,花了几天时间看视频加上自己慢慢摸索,基本实现了全部的功能,因为教程中用的是vue1.0,而现在已经是2.0的版本,再加上2.0和1.0的差别还挺多的,所以很多地方也都是...
  • u012465508
  • u012465508
  • 2018年03月01日 23:00
  • 61

仿饿了么购物车下单动画效果

效果图 [代码]java代码: ? 01 02 03 04 05 06 07 08 09 1...
  • wsd7747
  • wsd7747
  • 2017年05月04日 17:16
  • 1292

仿饿了么,百度订餐外卖系统

1.销售管理 (1)当前订单列表:自动刷新获取新订单,获取到新订单时候有声音提示,自动打印,有多样化的搜索功能,可以屏蔽某个ip提交订单。 (2)可售产品:展示当前菜品出售情况,包括总份数,已经出...
  • u012646273
  • u012646273
  • 2015年02月09日 16:41
  • 1601

vue.js高仿饿了么(前期整理)

1、熟悉项目开发流程需求分析——&gt;脚手架工具——&gt;数据mock——&gt;架构设计——&gt;代码编写——&gt;自测——&gt;编译打包。...
  • yelin042
  • yelin042
  • 2018年03月16日 09:24
  • 125

Vue高仿饿了么学习笔记(一)

前几天在慕课网上学习了Vue高仿饿了么,将里面的知识点在这里记录下来。因为学习的是Vue1.0版本,自己学习升级为Vue2.0版本。但最近看到已经有了Vue2.0的视频讲解。 GitHub地址:ht...
  • HaiJing1995
  • HaiJing1995
  • 2017年03月27日 09:41
  • 2644

高仿Vue饿了么 实战开发

简介这次我们使用 Vue 来完整的开发一个 App,下面展示了我们开发了一个 Web App 的全流程,从而让你真正的了解一个项目从零到一的过程:同时我们会以线上开发环境的要求来完成这次的开发任务,让...
  • ansenamerson
  • ansenamerson
  • 2017年08月02日 12:41
  • 437

高仿<饿了么>源码

高仿饿了么界面效果,动画效果还是不错滴,分享给大家一下
  • zz2043191420
  • zz2043191420
  • 2015年08月03日 09:11
  • 2932

学习笔记之vue高仿饿了么课程项目--vue.js篇

跟着慕课网上的视频(vue.js高仿饿了么外卖App)做了一个基于vue2.0的项目。 欢迎大家来访问我的github哦:my-github 现把项目中学到的知识和遇到的问题做一整理。这篇是v...
  • sherry_chan
  • sherry_chan
  • 2018年01月12日 14:20
  • 286
收藏助手
不良信息举报
您举报文章:高仿饿了么加减动画
举报原因:
原因补充:

(最多只允许输入30个字)