使用二阶贝塞尔曲线实现添加购物车动画

最新推荐文章于 2024-06-24 00:02:15 发布

2401_84121827

最新推荐文章于 2024-06-24 00:02:15 发布

阅读量860

点赞数 7

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84121827/article/details/137423912

版权

程序员专栏收录该内容

193 篇文章 0 订阅

订阅专栏

int[] controlPosition = new int[2];
// tablayout位置
int[] tablayoutPosition = new int[2];

startPosition = data.getStartPosition();
mShoppingCart.getLocationInWindow(endPosition);
mTabLayout.getLocationInWindow(tablayoutPosition);
// 处理起点y坐标偏移的问题
startPosition[1] = startPosition[1] - tablayoutPosition[1] - mTabLayout.getHeight();
// 终点进行一下居中处理
endPosition[0] = endPosition[0] + (mShoppingCart.getWidth() / 2);
controlPosition[0] = endPosition[0];
controlPosition[1] = startPosition[1];

通过Path的quadTo方法绘制贝塞尔曲线，使用PathMeasure获取点的坐标（借助ValueAnimator.ofFloat()配合getPosTan()来获取坐标）

Path path = new Path();
path.moveTo(startPosition[0], startPosition[1]);
path.quadTo(controlPosition[0], controlPosition[1], endPosition[0], endPosition[1]);
PathMeasure pathMeasure = new PathMeasure();
// false表示path路径不闭合
pathMeasure.setPath(path, false);

// ofFloat是一个生成器
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
// 匀速线性插值器
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setDuration(800);
valueAnimator.addUpdateListener(animation -> {
float value = (Float) animation.getAnimatedValue();
pathMeasure.getPosTan(value, currentPosition, null);
imageView.setX(currentPosition[0]);
imageView.setY(currentPosition[1]);
});
valueAnimator.start();

下面是用属性动画给购物车篮子做了一个放大缩小的动画效果

// mShoppingCart是View
ObjectAnimator shoppingCartX = ObjectAnimator.ofFloat(mShoppingCart, “scaleX”, 1.0f, 1.3f, 1.0f);
ObjectAnimator shoppingCartY = ObjectAnimator.ofFloat(mShoppingCart, “scaleY”, 1.0f, 1.3f, 1.0f);
shoppingCartX.setInterpolator(new AccelerateInterpolator());
shoppingCartY.setInterpolator(new AccelerateInterpolator());
AnimatorSet shoppingCart = new AnimatorSet();
shoppingCart
.play(shoppingCartX)
.with(shoppingCartY);
shoppingCart.setDuration(800);
shoppingCart.start();

三、稍完整的大部分代码

private void AddAnimation(AddEventBean data) {
// 起点
int[] startPosition;
// 终点
int[] endPosition = new int[2];
// 贝塞尔控制点
int[] controlPosition = new int[2];
// 当前位置
float[] currentPosition = new float[2];
// tablayout位置
int[] tablayoutPosition = new int[2];

final ImageView imageView = new ImageView(this);
mConView.addView(imageView);
imageView.setImageResource(R.drawable.specialadd);
imageView.getLayoutParams().width = getResources().getDimensionPixelSize(R.dimen.dp_px_30);
imageView.getLayoutParams().height = getResources().getDimensionPixelSize(R.dimen.dp_px_30);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setVisibility(View.VISIBLE);
imageView.setX(startPosition[0]);
imageView.setY(startPosition[1]);

ObjectAnimator shoppingCartX = ObjectAnimator.ofFloat(mShoppingCart, “scaleX”, 1.0f, 1.3f, 1.0f);
ObjectAnimator shoppingCartY = ObjectAnimator.ofFloat(mShoppingCart, “scaleY”, 1.0f, 1.3f, 1.0f);
shoppingCartX.setInterpolator(new AccelerateInterpolator());
shoppingCartY.setInterpolator(new AccelerateInterpolator());
AnimatorSet shoppingCart = new AnimatorSet();
shoppingCart
.play(shoppingCartX)
.with(shoppingCartY);
shoppingCart.setDuration(800);
shoppingCart.start();

valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {

}

//当动画结束后：
@Override
public void onAnimationEnd(Animator animation) {
goodsChange(data);
}

@Override
public void onAnimationCancel(Animator animation) {

}

@Override
public void onAnimationRepeat(Animator animation) {

}
});
}

四、大致写下布局（同时也算留做备份）

<?xml version="1.0" encoding="utf-8"?>

顶部常驻的toolbar

<android.support.design.widget.CoordinatorLayout
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:layout_weight=“1”>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

Android前沿技术大纲
全套体系化高级架构视频

Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！

Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！

2401_84121827

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
使用二阶贝塞尔曲线实现添加购物车动画

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！Android前沿技术大纲全套体系化高级架构视频Android高级架构资料、源码、笔记、视频。
复制链接

扫一扫