属性动画 模拟美团外卖购物车曲线动画
2017-10-12 19:04
876 查看
效果图
就是点击右上角的按钮,会有一个小圆点从该按钮位置曲线移动到左下角的按钮的位置MainActivity.java
package com.qunar.yuzhiyun.propertyanimation; import android.animation.ObjectAnimator; import android.graphics.Point; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.Button; public class MainActivity extends AppCompatActivity implements View.OnClickListener{ Button btnStart; Button btnEnd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); btnStart= (Button) findViewById(R.id.btnStart); btnEnd= (Button) findViewById(R.id.btnEnd); btnStart.setOnClickListener(this); } @Override public void onClick(View view) { switch (view.getId()){ case R.id.btnStart: int start[] = new int[2]; btnStart.getLocationInWindow(start); int end[] = new int[2]; btnEnd.getLocationInWindow(end); Point startPoint=new Point(start[0],start[1]); Point endPoint=new Point(end[0],end[1]); BallView ballView=new BallView(MainActivity.this); ballView.startAnimation(startPoint,endPoint); ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView(); rootView.addView(ballView); } } }
BezierEvaluator.java
(自定义一个TypeEvaluator ,用于计算物体移动的中间位置 )public class BezierEvaluator implements TypeEvaluator<Point> { private Point controllPoint; public BezierEvaluator(Point controllPoint) { this.controllPoint = controllPoint; } @Override public Point evaluate(float t, Point startValue, Point endValue) { int x = (int) ((1 - t) * (1 - t) * startValue.x + 2 * t * (1 - t) * controllPoint.x + t * t * endValue.x); int y = (int) ((1 - t) * (1 - t) * startValue.y + 2 * t * (1 - t) * controllPoint.y + t * t * endValue.y); return new Point(x, y); } }
BallView.java (小红点视图)
package com.qunar.yuzhiyun.propertyanimation; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Point; import android.support.annotation.Nullable; import android.support.v7.widget.AppCompatTextView; import android.util.AttributeSet; import android.view.Gravity; import android.view.ViewGroup; import android.view.animation.AccelerateDecelerateInterpolator; import android.widget.TextView; /** * Created by yuzhiyun on 17/10/12. */ public class BallView extends AppCompatTextView implements ValueAnimator.AnimatorUpdateListener{ Paint paint; int radius=30; public BallView(Context context) { super(context); paint = new Paint(); paint.setColor(Color.RED); paint.setAntiAlias(true); setGravity(Gravity.CENTER); setText("1"); setTextColor(Color.WHITE); setTextSize(12); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(radius*2,radius*2); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,radius,paint); } public void startAnimation(Point startPoint, Point endPoint){ //控制点,二阶贝塞尔曲线需要三个点,目前只有两个,所以需要新增一个 int pointX = (startPoint.x + endPoint.x) / 2; int pointY = (int) (startPoint.y ); Point controllPoint = new Point(pointX, pointY); BezierEvaluator bezierEvaluator=new BezierEvaluator(controllPoint); ValueAnimator anim= ValueAnimator.ofObject(bezierEvaluator,startPoint,endPoint); anim.addUpdateListener(this); anim.setDuration(2000); anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); ViewGroup viewGroup = (ViewGroup) getParent(); viewGroup.removeView(BallView.this); } }); anim.setInterpolator(new AccelerateDecelerateInterpolator()); anim.start(); } @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { Point point = (Point) valueAnimator.getAnimatedValue(); setX(point.x); setY(point.y); invalidate(); } }
参考自 http://www.jianshu.com/p/d9a3ae9e806d
相关文章推荐
- jQuery模拟实现天猫购物车动画效果实例代码
- 属性动画+MVP+Tablayout+购物车
- 浅谈属性动画简单使用之实现爱的贝塞尔曲线浪漫告白效果(三)
- 补间动画,属性动画实现购物车添加动画
- 属性动画Animator玩法/自定义估值器TypeEvaluator实现抛物线曲线动画
- 浅谈属性动画简单使用之实现爱的贝塞尔曲线浪漫告白效果(三)
- Android自定义view之path类描绘二阶贝塞尔曲线+属性动画(模仿QQ账号信息曲线动画)
- Android 属性动画:实现购物车添加商品动画
- Android动画:模拟开关按钮点击打开动画(属性动画之平移动画)
- JQuery模拟实现天猫购物车动画效果
- 组合属性动画:缩放、渐变 平移和旋转+ImageLoader加载图片+MVP+OKhttp+拦截器+请求网络数据二级列表购物车
- u3d_插件DoTween:(07)动画的属性设置(动画曲线和事件函数)
- 属性动画详情和购物车加订单
- 属性动画+购物车+全选反选+选中计算价格+单个删除
- Android 曲线动画animation,类似加入购物车动画
- 组合属性动画+商品详情+MVP+购物车
- 属性动画+购物车+结算
- 加入购物车动画-UIBezierPath曲线的实用
- 属性动画+购物车+下订单