贝塞尔曲线之购物车动画效果.doc

贝塞尔曲线之购物车动画效果 Question 贝塞尔曲线是什么？ 贝塞尔曲线可以做什么? 怎么做？ What is it ? 贝塞尔曲线在百度定义是贝塞尔曲线(Bézier curve)，又称 贝兹 曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。 Usage 贝塞尔曲线根据不同点实现不同动态效果： 一阶贝塞尔曲线（两点），绘制成一条直线 看了上面贝塞尔曲线不同点不同效果后，相信大家都清楚贝塞尔曲线能干什么？没错，贝塞尔曲线能造高逼格动画 就笔者目前了解的采用贝塞尔曲线实现的知名开源项目有： QQ拖拽清除效果 纸飞机刷新动画 滴油刷新动画 波浪动画 到此大家是不是很兴奋，想更多了解如何造一个高逼格贝塞尔曲线动画。接下来我就给大家讲述如何造一个基于贝塞尔曲线实现的购物车动画，大家擦亮眼睛啦~~ How to do it ? 思路 确定动画起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间点的轨迹 设置属性动画，ValueAnimator插值器，获取中间点的坐标 将执行动画控件的x、y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 知识点 Android中提供了绘制一阶、二阶、三阶的接口： 一阶接口： public void lineTo(float x,float y) 二阶接口： public void quadTo(float x1, float y1, float x2, float y2) 三阶接口： public void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) PathMeasure使用 getLength() 理解 boolean getPosTan(float distance, float[] pos, float[] tan) 如何获取控件在屏幕中的绝对坐标 int[] location = new int[2]; view.getLocationInWindow(location); 得到view在屏幕中的绝对坐标。 理解属性动画插值器ValueAnimator Code 首先写购物车布局xml，代码如下： [html] view plain copy 在CODE上查看代码片派生到我的代码片 ?xml version=1.0 encoding=utf-8? android:id=@+id/rly_bezier_curve_shopping_cart android:layout_width=match_parent android:layout_height=match_parent android:paddingBottom=@dimen/activity_vertical_margin android:paddingLeft=@dimen/activity_horizontal_margin android:paddingRight=@dimen/activity_horizontal_margin android:paddingTop=@dimen/activity_vertical_margin FrameLayout android:id=@+id/fly_bezier_curve_shopping_cart android:layout_width=match_parent android:layout_height=wrap_content android:layout_alignParentBottom=true android:layout_alignParentLeft=true android:paddingRight=30dp android:layout_alignParentStart=true ImageView android:id=@+id/iv_bezier_curve_shopping_cart android:layout_width=40dp android:layout_height=40dp android:layout_gravity=right android:src=@drawable/menu_shop_car_selected /