首页 > 代码库 > 购物车特效-贝塞尔曲线动画(点击添加按钮的进候,产生抛物线动画效果)
购物车特效-贝塞尔曲线动画(点击添加按钮的进候,产生抛物线动画效果)
demo效果:
l 购物车特效原理:
1.从添加按钮获取开始坐标
2.从购物车图标获取结束坐标
3.打气一个视图,添加属性动画ObjectAnimator(缩小),ValueAnimator(路线)
4.动画开始时添加该视图,动画结束删除该视图
5.运动路径使用TypeEvaluator与贝塞尔函数计算
activity布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--贝塞尔曲线动画自定义控件--> <custom.BezierAnim android:id="@+id/bezier_anim" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--添加按钮--> <Button android:id="@+id/bt_good" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_margin="10dp" android:text="+" /> <!--购物车--> <ImageView android:id="@+id/iv_cart" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:src=http://www.mamicode.com/"@drawable/cart91" />>移动控件布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="50dp" android:layout_height="50dp" android:orientation="vertical"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:src=http://www.mamicode.com/"@drawable/coin91" />>贝塞尔曲线动画的自定义控件编写:
public class BezierAnim extends FrameLayout { public BezierAnim(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public BezierAnim(Context context) { this(context, null, 0); } public BezierAnim(Context context, AttributeSet attrs) { this(context, attrs, 0); } //PointF等价于float[]数组,里面存放的x和y的值 (point相当于int[]) private PointF mLocation = new PointF();//这样创建出来,里面还没有值 @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); //获取当前父布局在界面的屏幕坐标(也就是父布局左上角坐标) int[] layoutLoc = new int[2]; getLocationInWindow(layoutLoc); mLocation.set(layoutLoc[0], layoutLoc[1]);//将父布局左上角的值赋值给mLocation } /** * 开始贝塞尔动画 * * @param startView 动画从哪个view开始(+号) * @param endView 动画在哪个view结束(购物车) * @param layoutIdMove 动画作用的移动控件(钱袋子的布局) */ public void startCartAnim(View startView, View endView, int layoutIdMove) { //1,开始位置 int[] startLoc = new int[2]; startView.getLocationInWindow(startLoc);//获取当前view在屏幕上的坐标 PointF startF = new PointF(startLoc[0] - mLocation.x, startLoc[1] - mLocation.y);//得到当前view相对于父布局左上角位置的坐标 // 2,结束位置 int[] endLoc = new int[2]; endView.getLocationInWindow(endLoc); final PointF endF = new PointF(endLoc[0] - mLocation.x, endLoc[1] - mLocation.y); //3.移动控件。inflate()参数:作用布局,参考布局,false final View moveView = LayoutInflater.from(getContext()).inflate(layoutIdMove, this, false); //开始动画 使用属性动画合集 AnimatorSet set = new AnimatorSet(); //缩小动画 ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(moveView, "scaleX", 1.0f, 0.1f); ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(moveView, "scaleY", 1.0f, 0.1f); //路径动画(baisaier曲线路径,开始坐标,结束坐标) ValueAnimator pathAnim = ObjectAnimator.ofObject(beisaier, startF, endF); pathAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //更新坐标 PointF newPointF = (PointF) animation.getAnimatedValue(); moveView.setX(newPointF.x); moveView.setY(newPointF.y); } }); //将这些动画放入集合中 set.playTogether(scaleXAnim, scaleYAnim, pathAnim); Animator.AnimatorListener listener = new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { BezierAnim.this.addView(moveView);//加入动画作用的控件 } @Override public void onAnimationEnd(Animator animation) { BezierAnim.this.removeView(moveView);//移除动画作用的控件 } @Override public void onAnimationCancel(Animator animation) {} @Override public void onAnimationRepeat(Animator animation) {} }; set.addListener(listener);//动画播放监听器 set.setDuration(1000); //运动时间 set.start(); //时间 } //路径计算器 private TypeEvaluator<PointF> beisaier = new TypeEvaluator<PointF>() { @Override public PointF evaluate(float fraction, PointF startValue, PointF endValue) { //返回变化的轨迹坐标 PointF newF = new PointF((startValue.x + endValue.x) / 2, 0); return BezierCurve.bezier(fraction, startValue, newF, endValue); } }; }
路径计算器:public class BezierCurve { /** * 二次贝塞尔曲线插值 * t:值范围from = 0, to = 1 */ public static PointF bezier(float t, PointF point0, PointF point1, PointF point2) { float oneMinusT = 1.0f - t; PointF point = new PointF(); point.x = oneMinusT * oneMinusT * point0.x + 2 * t * oneMinusT * point1.x + t * t * point2.x; point.y = oneMinusT * oneMinusT * point0.y + 2 * t * oneMinusT * point1.y + t * t * point2.y; return point; } /** * 三次贝塞尔曲线插值 * t:值范围from = 0, to = 1 */ public static PointF bezier(float t, PointF point0, PointF point1, PointF point2, PointF point3) { float oneMinusT = 1.0f - t; PointF point = new PointF(); point.x = oneMinusT * oneMinusT * oneMinusT * (point0.x) + 3 * oneMinusT * oneMinusT * t * (point1.x) + 3 * oneMinusT * t * t * (point2.x) + t * t * t * (point3.x); point.y = oneMinusT * oneMinusT * oneMinusT * (point0.y) + 3 * oneMinusT * oneMinusT * t * (point1.y) + 3 * oneMinusT * t * t * (point2.y) + t * t * t * (point3.y); return point; } }
activity开始动画:public class CartBazierActivity extends Activity { @InjectView(R.id.bt_good) Button btGood; @InjectView(R.id.iv_cart) ImageView ivCart; @InjectView(R.id.bezier_anim) BezierAnim bezierAnim; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_cart_bezier); ButterKnife.inject(this); } @OnClick(R.id.bt_good) public void bezierMove() { Toast.makeText(this, "添加了一件商品", Toast.LENGTH_SHORT).show(); bezierAnim.startCartAnim(btGood, ivCart, R.layout.moveview); } }若是startView和endView不在一个界面,可以用EventBus传值
更多:http://www.jb51.net/article/95991.htm
购物车特效-贝塞尔曲线动画(点击添加按钮的进候,产生抛物线动画效果)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。