登录 立即注册
安币:

仿美团外卖添加商品的抛物线动画

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-9-6 16:34:52
Tag:抛物线 动画 外卖
立即下载
收藏

项目介绍:

1.初衷         公司要做一个点餐系统,要求类似要的美团外卖的点餐动画,就像下面这样一个抛物线(biu)
1905930-f419e78607521fb6.gif
美团的动画

身为一个把时间节约全部投入到工作中的程序员,baidu geogle了好久发现没有这个动画效果的具体实现.有的效果也不是很好,只好自己写一个这样的效果了(搬砖去了)

2.结果结果demo就是和下面一样做的一个动画效果
1905930-a9a2726a504ab56f.gif
自己的动画


可以直接使用拷贝这个类或者在Project中build.gradle添加
[XML] 查看源文件 复制代码
allprojects{
          repositories{
                   ... 
                   maven{url"https://jitpack.io"}
         }
}

在Moudle中的build.gradle
[XML] 查看源文件 复制代码
dependencies{
            compile'com.github.jlcclidong:AddCartAniamtion:v3.0'
}

直接使用AddCartAniamtion.AddToCart()完成动画,图片默认为填入ImageView的图片,想要自己更改的可以去源码中更改,本人水平有限,希望多交流。
自己使用在RecycleView中没有问题。动画左右飞都木有问题。
3.过程本身看到过一个用贝塞尔曲线来做这个效果的,效果不好(好吧,主要是自己数学实在不争气)
身为程序员里物理学的最好的还是用物理公式来解决问题吧,加属性动画
首先确定父控件,起始位置控件,以及终点位置控件位置

[Java] 查看源文件 复制代码
//计算父控件的位置
int[] parent =new int[2];
rl.getLocationInWindow(parent);
//计算起点控件位置
int[] startLocation =new int[2];
startView.getLocationInWindow(startLocation);
//计算终点控件位置
int[] endLocation =new int[2];
endView.getLocationInWindow(endLocation);
添加一个用于ImageView用于动画(注意确定添加的位置是一定要注意父控件的Padding值,因为这个错位了好久)
final ImageView view =newImageView(mContext);

//确定ImageView大小与传进来的ImageView相同
RelativeLayout.LayoutParams params =new RelativeLayout.LayoutParams(startView.getWidth(),startView.getHeight());
//获取ImageView的图片 并设置在新的ImageView上
view.setImageDrawable(startView.getDrawable());
//确定ImageView的位置与startView相同
params.leftMargin= startLocation[0] - parent[0] - rl.getPaddingLeft();
params.topMargin= startLocation[1] - parent[1] - rl.getPaddingTop();
rl.addView(view,params);


好吧重点来了 我把初始的X轴Y轴速度设成相同的这样保证了上移的效果 然后根据时间 距离计算初速度 加速度 基本就用到了这么一个公式
[Java] 查看源文件 复制代码
s=vt+g*t*t/2
//计算两者的横向X轴的距离差
int XtoX = endLocation[0] - startLocation[0] + endView.getWidth() /2-
               startView.getWidth() /2;
//根据距离 时间 获取到对应的X轴的初速度
final float xv = XtoX / time;
//计算两者的横向X轴的距离差
int YtoY = endLocation[1] - startLocation[1];
//根据距离 时间 初始设置的Y轴初速度与X轴初速度相同 获取到竖直方向上的加速度
final float g;
if(xv>0) {
           g = (YtoY + xv * time) / time / time *2;
}else{
           g = (YtoY - xv * time) / time / time *2;
}

设置属性动画了
[Java] 查看源文件 复制代码
ValueAnimator va =new ValueAnimator();
va.setDuration(time *1000);
va.setObjectValues(newPointF(0,0));
//计算位置
va.setEvaluator(new TypeEvaluator() {
            @Override
            publicPointFevaluate(float v,PointF pointF,PointF t1) {
                          PointF point =newPointF();
                          point.x= v *xv*time;
                          if(xv>0) {
                               point.y=g* (v *time) * (v *time) /2-xv* v *time;
                          }else{
                              point.y=g* (v *time) * (v *time) /2+xv* v *time;
                         }
                         return point;
          }
});
//设置动画
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                     public void onAnimationUpdate(ValueAnimator valueAnimator) {
                                  PointF point = (PointF)valueAnimator.getAnimatedValue();
                                  view.setTranslationX(point.x);
                                   view.setTranslationY(point.y);
                     }
});

设置成功 开启动画  最后监听动画结束时remove这个ImageView
4.结束语写逻辑代码写的久了很多时候就会忘了一般的动画实现,这个动画实现虽然没什么含金量,但是很多项目中都可能会用得到可以直接使用还是很方便的,大神掠过,新接触android动画的还是可以看看的,代码内注释很详细。




相关源码推荐:

我来说两句
所有评论(47)
yukong 2016-9-6 16:37:15
感谢分享,楼主V5~
回复
柠檬lemon 2016-9-6 16:37:45
感谢分享,楼主V5~
回复
aliouswang 2016-9-6 16:39:05
mark,收藏了
回复
w00214777 2016-9-6 16:45:16
学习...学习...
回复
转角依然笑~ 2016-9-6 17:06:56
不错不错,楼主辛苦了。。。
回复
是个宝宝 2016-9-6 17:20:26
mark,收藏了
回复
蓝魔米光 2016-9-6 17:47:56
感谢分享,安卓巴士有你更精彩:)
回复
上传代码
查看数:4087 收藏数:14 下载数:36 点赞数:0
状态:已购或VIP 售价:10(原价:10)金钱 下载权限:初级码农 
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487

如何获得代码达人称号

如何成为签约作者

联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表