添加购物车效果-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

添加购物车效果

简介: 做一个商品加入购物车的效果,之前一直想尝试去实现,无奈啊,没机会。致谢 nianxin 徐宜生 001.gif 怎么用? public void addAction(View view) { new DriftingTextView(this) .

做一个商品加入购物车的效果,之前一直想尝试去实现,无奈啊,没机会。致谢 nianxin 徐宜生

001.gif

怎么用?

<pre>
public void addAction(View view) {
new DriftingTextView(this)
.startView(view)
.rootView(getWindow().getDecorView())
.endView(btCart)
.startBesselAnim();
}
</pre>

代码很少

<pre>
package github.alex.jumpview;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Point;
import android.graphics.drawable.GradientDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.TextView;

/**
* 漂移的文本控件
* 作者:alex
* 时间:2016/7/28 10:54
* 博客地址:http://www.jianshu.com/users/c3c4ea133871/subscriptions
*/
public class DriftingTextView extends TextView {
private GradientDrawable gradientDrawable;
private static final int VIEW_SIZE = 20;

/\*\*
 \* 控件的半径
 \*/
protected int radius;
/\*\*
 \* 起点
 \*/
protected Point startPoint;
/\*\*
 \* 终点
 \*/
protected Point endPoint;
/\*\*
 \* 漂移的时间
 \*/
private long driftingDuration;

public DriftingTextView(Context context) {
    super(context);
    initView();
}

public DriftingTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initView();
}

private void initView() {
    driftingDuration = 500;
    gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.OVAL);
    gradientDrawable.setColor(Color.parseColor("#FF0000"));
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        setBackground(gradientDrawable);
    } else {
        setBackgroundDrawable(gradientDrawable);
    }
    setGravity(Gravity.CENTER);
    setText("1");
    setTextColor(Color.WHITE);
    setTextSize(10);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int size = (int) dp2Px(VIEW_SIZE);
    setMeasuredDimension(size, size);
    radius = size / 2;
}

/\*\*
 \* 设置  起始点
 \*/
public DriftingTextView startPoint(Point startPoint) {
    startPoint.y -= 10;
    this.startPoint = startPoint;
    return this;
}

/\*\*
 \* 设置 起始点的 控件
 \*/
public DriftingTextView startView(View view) {
    int position[] = new int[2];
    view.getLocationInWindow(position);
    startPoint(new Point(position[0], position[1]));
    return this;
}

/\*\*
 \* 设置 结束点
 \*/
public DriftingTextView endPoint(Point endPoint) {
    this.endPoint = endPoint;
    return this;
}

/\*\*
 \* 设置 结束点的 控件
 \*/
public DriftingTextView endView(View view) {
    int position[] = new int[2];
    view.getLocationInWindow(position);
    endPoint(new Point(position[0], position[1]));
    return this;
}

/\*\*
 \* 设置漂移文本控件的 父控件
 \*/
public DriftingTextView rootView(ViewGroup viewGroup) {
    viewGroup.addView(this);
    return this;
}
/\*\*
 \* 设置漂移文本控件的 父控件
 \*/
public DriftingTextView rootView(View view) {
    if(view instanceof ViewGroup){
        ViewGroup viewGroup = (ViewGroup) view;
        viewGroup.addView(this);
    }
    return this;
}

/\*\*
 \* 设置 漂移时间
 \*
 \* @param driftingDuration 漂移时间,单位 ms
 \*                         如果小于 20ms,或者大于 5000ms,使用默认时间500ms
 \*/
public DriftingTextView driftingDuration(long driftingDuration) {
    if ((driftingDuration < 20) || (driftingDuration > 5000)) {
        driftingDuration = 500;
    }
    this.driftingDuration = driftingDuration;
    return this;
}

public void startBesselAnim() {
    if (startPoint == null || endPoint == null) return;
    int pointX = (startPoint.x + endPoint.x) / 2;
    int pointY = (int) (startPoint.y - dp2Px(100));
    Point driftingPoint = new Point(pointX, pointY);
    BesselEvaluator bezierEvaluator = new BesselEvaluator(driftingPoint);
    ValueAnimator anim = ValueAnimator.ofObject(bezierEvaluator, startPoint, endPoint);
    anim.addUpdateListener(new MyAnimatorUpdateListener());
    anim.setDuration(driftingDuration);
    anim.addListener(new MyAnimatorListenerAdapter());
    anim.setInterpolator(new AccelerateDecelerateInterpolator());
    anim.start();
}

private final class MyAnimatorListenerAdapter extends AnimatorListenerAdapter {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        ViewGroup viewGroup = (ViewGroup) getParent();
        viewGroup.removeView(DriftingTextView.this);
    }
}

private final class MyAnimatorUpdateListener implements ValueAnimator.AnimatorUpdateListener {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        Point point = (Point) valueAnimator.getAnimatedValue();
        setX(point.x);
        setY(point.y);
        invalidate();
    }
}

public class BesselEvaluator implements TypeEvaluator<Point> {

    private Point driftingPoint;

    public BesselEvaluator(Point driftingPoint) {
        this.driftingPoint = driftingPoint;
    }

    @Override
    public Point evaluate(float t, Point startValue, Point endValue) {
        int x = (int) ((1 - t) \* (1 - t) \* startValue.x + 2 \* t \* (1 - t) \* driftingPoint.x + t \* t \* endValue.x);
        int y = (int) ((1 - t) \* (1 - t) \* startValue.y + 2 \* t \* (1 - t) \* driftingPoint.y + t \* t \* endValue.y);
        return new Point(x, y);
    }
}

/\*\*
 \* 数据转换: dp---->px
 \*/
private float dp2Px(float dp) {
    return dp \* getContext().getResources().getDisplayMetrics().density;
}

/\*\*
 \* sp转px
 \*/
private float sp2px(float sp) {
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, getContext().getResources().getDisplayMetrics());
}

}

public class BezierUtil {

/\*\*
 \* B(t) = (1 - t)^2 \* P0 + 2t \* (1 - t) \* P1 + t^2 \* P2, t ∈ [0,1]
 \*
 \* @param t  曲线长度比例
 \* @param p0 起始点
 \* @param p1 控制点
 \* @param p2 终止点
 \* @return t对应的点
 \*/
public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
    PointF point = new PointF();
    float temp = 1 - t;
    point.x = temp \* temp \* p0.x + 2 \* t \* temp \* p1.x + t \* t \* p2.x;
    point.y = temp \* temp \* p0.y + 2 \* t \* temp \* p1.y + t \* t \* p2.y;
    return point;
}

/\*\*
 \* B(t) = P0 \* (1-t)^3 + 3 \* P1 \* t \* (1-t)^2 + 3 \* P2 \* t^2 \* (1-t) + P3 \* t^3, t ∈ [0,1]
 \*
 \* @param t  曲线长度比例
 \* @param p0 起始点
 \* @param p1 控制点1
 \* @param p2 控制点2
 \* @param p3 终止点
 \* @return t对应的点
 \*/
public static PointF CalculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
    PointF point = new PointF();
    float temp = 1 - t;
    point.x = p0.x \* temp \* temp \* temp + 3 \* p1.x \* t \* temp \* temp + 3 \* p2.x \* t \* t \* temp + p3.x \* t \* t \* t;
    point.y = p0.y \* temp \* temp \* temp + 3 \* p1.y \* t \* temp \* temp + 3 \* p2.y \* t \* t \* temp + p3.y \* t \* t \* t;
    return point;
}

}
</pre>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章